首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

关于vue-cli 3配置打包优化要点（推荐）

Posted in Javascript onApril 22, 2019

配置路由懒加载,封装了异步组件引入的方法,接收一个地址做参数

/**
 * 返回异步组件
 * @tips 请注意页面只能挂载在views文件下,非此路径请勿使用
 */
const AsyncComponentHook = (path: String): Function => (): any => {
  // 通过 webpack 的内联注释,设置模块名
  let component = import(/* webpackChunkName: "view-[request]" */ `@/views/${path}.vue`);
  component.catch((e) => {
    console.error(e);
  });
  return component;
};

配置代码压缩

// 安装
  npm install uglifyjs-webpack-plugin

  // 在vue.config.js文件中添加配置
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
      config.plugins.push(
        //生产环境自动删除console
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              warnings: false,
              drop_debugger: true,
              drop_console: true,
            },
          },
          sourceMap: false,
          parallel: true,
        })
      );
    }
  },

配置引用别名

设置插件的按需引入,本文使用的是element-ui，点击查看详情

经过一些基础的配置后,我们来看下目前打包后的效果。

从下图可以看到,打包出来后最大的包有1.33M。然后再看下请求,哇,217个请求、首页下载需要3.2M。

关于vue-cli 3配置打包优化要点（推荐）

关于vue-cli 3配置打包优化要点（推荐）

好吧，开始折腾

1. 优化scss配置文件的引入

我们在搭建项目的过程中经常性的会将一些scss配置文件抽离出来，例如主题色等，然后在每个需要的组件中引入。这样会显得很繁琐，我们可以借助sass-loader帮我们进行预处理，

这样我们就不用在每一个页面都进行引入样式，就能直接引用。

例如我们的样式文件目录下有一个theme.scss，我们可以在vue.config.js中作如下处理

// vue.config.js 配置
module.exports = {
 css: {
  // css预设器配置项
  loaderOptions: {
    // pass options to sass-loader
    sass: {
      // 引入全局变量样式,@使我们设置的别名,执行src目录
      data: `
        @import "@/stylePath/theme.scss";
      `
    }
  },
 },
}

通过以上配置,就可以在组件模板中注释以下代码

<style lang="scss">
  /* @import "@/stylePath/theme.scss"; */
</style>

2. 针对请求数进行优化

我们发现请求数增多是因为我们页面预先渲染了其它组件，会在html页面中插入像这样的东西<link rel="prefetch">，这该怎么优化呢？

首先我们先看下vue.config.js的官方文档，点击前往。
官方说明：  是一种 resource hint，用来告诉浏览器在页面加载完成后，利用空闲时间提前获取用户未来可能会访问的内容。

所以我们添加如下配置

// vue.config.js
module.exports = {
 chainWebpack: config => {
  // 移除 prefetch 插件
  config.plugins.delete('prefetch')
  // 移除 preload 插件
  config.plugins.delete('preload');
 }
}

 3. 公用代码提取，使用cdn加载

对于vue, vuex, vue-router，axios等我们可以利用wenpack的externals参数来配置，这里我们设定只需要在生产环境中才需要使用:

// vue.config.js
const isProduction = process.env.NODE_ENV === 'production';
const cdn = {
  css: [],
  js: [
    'https://cdn.bootcss.com/vue/2.5.17/vue.runtime.min.js',
    'https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js',
    'https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js',
    'https://cdn.bootcss.com/axios/0.18.0/axios.min.js',
  ]
}
module.exports = {
  chainWebpack: config => {
    // 生产环境配置
    if (isProduction) {
      // 生产环境注入cdn
      config.plugin('html')
        .tap(args => {
          args[0].cdn = cdn;
          return args;
        });
    }
  },
  configureWebpack: config => {
    if (isProduction) {
      // 用cdn方式引入
      config.externals = {
        'vue': 'Vue',
        'vuex': 'Vuex',
        'vue-router': 'VueRouter',
        'axios': 'axios'
      }
    }
  },
}

接着修改html文件，添加注入代码

<!DOCTYPE html>
<html lang="zh">

<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <!-- 使用CDN的CSS文件 -->
 <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
  <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow" rel="external nofollow" rel="preload" as="style">
  <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow" rel="external nofollow" rel="stylesheet">
 <% } %>
 <!-- 使用CDN的JS文件 -->
 <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
  <link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="external nofollow" rel="preload" as="script">
 <% } %>
</head>

<body>
 <noscript>
  <strong>We're sorry but eye-admin doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
 </noscript>
 <div id="app"></div>
 <!-- built files will be auto injected -->
 <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
  <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
 <% } %>
</body>

</html>

然后打包重启，我们再来看下目前的变化。

嗯，真香~从下图可以看到,打包出来后最大的包文件只有775kb。然后再看下请求,哇,43个请求、首页下载只需要1.4M。

可以看出，我们这一系列的操作后请求数减少了174个，首页渲染减少了1.8m,真是可喜可贺

关于vue-cli 3配置打包优化要点（推荐）

关于vue-cli 3配置打包优化要点（推荐）

最后，附上完整的vue-config.js文件

const path = require("path");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

const isProduction = process.env.NODE_ENV === 'production';
const cdn = {
  css: [],
  js: [
    'https://cdn.bootcss.com/vue/2.5.17/vue.runtime.min.js',
    'https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js',
    'https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js',
    'https://cdn.bootcss.com/axios/0.18.0/axios.min.js',
  ]
}

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  // 基本路径
  baseUrl: './',
  // 输出文件目录
  outputDir: 'dist',
  // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
  // assetsDir: "./",
  // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径
  indexPath: './',
  // eslint-loader 是否在保存的时候检查
  lintOnSave: true,
  // webpack配置
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  chainWebpack: config => {
    config
      .entry('index')
      .add('babel-polyfill')
      .end();
    // 配置别名
    config.resolve.alias
      .set("@", resolve("src"))
      .set("@img", resolve("src/assets/images"))
      .set("@css", resolve("src/assets/styles/css"))
      .set("@scss", resolve("src/assets/styles/scss"));
    // 生产环境配置
    if (isProduction) {
      // 删除预加载
      config.plugins.delete('preload');
      config.plugins.delete('prefetch');
      // 压缩代码
      config.optimization.minimize(true);
      // 分割代码
      config.optimization.splitChunks({
        chunks: 'all'
      })
      // 生产环境注入cdn
      config.plugin('html')
        .tap(args => {
          args[0].cdn = cdn;
          return args;
        });
    }
  },
  configureWebpack: config => {
    if (isProduction) {
      // 用cdn方式引入
      config.externals = {
        'vue': 'Vue',
        'vuex': 'Vuex',
        'vue-router': 'VueRouter',
        'axios': 'axios'
      }
      // 为生产环境修改配置...
      config.plugins.push(
        //生产环境自动删除console
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              warnings: false,
              drop_debugger: true,
              drop_console: true,
            },
          },
          sourceMap: false,
          parallel: true,
        })
      );
    } else {
      // 为开发环境修改配置...
    }
  },
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: false,
  // css相关配置
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {
      // pass options to sass-loader
      sass: {
        // 引入全局变量样式
        data: `
          @import "@/stylePath/theme.scss;
        `
      }
    },
    // 启用 CSS modules for all css / pre-processor files.
    modules: false,
  },
  // use thread-loader for babel & TS in production build
  // enabled by default if the machine has more than 1 cores
  parallel: require('os').cpus().length > 1,
  devServer: {
    port: 8888, // 端口
    open: true, // 自动开启浏览器
    compress: false, // 开启压缩
    overlay: {
      warnings: true,
      errors: true
    }
  },
}

以上就是我针对打包后做的优化处理，当然还有其它优化点，比如开启gzip压缩，不过这个需要后台服务器支持，所以暂不配置。如果你还有其它优化点，欢迎一起讨论！

以上所述是小编给大家介绍的vue-cli 3配置打包优化要点详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

关于vue-cli 3配置打包优化要点（推荐）

- Author -

Echi灬丨无痕

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript中关于执行环境的杂谈
Aug 14 Javascript
只需一行代码,轻松实现一个在线编辑器
Nov 12 Javascript
jQuery之ajax删除详解
Feb 27 Javascript
一个支付页面DEMO附截图
Jul 22 Javascript
JavaScript实现in-place思想的快速排序方法
Aug 07 Javascript
jQuery中DOM节点的删除方法总结（超全面）
Jan 22 Javascript
在页面中引入js的两种方法(推荐)
Aug 29 Javascript
Vue 中批量下载文件并打包的示例代码
Nov 20 Javascript
vue中echarts3.0自适应的方法
Feb 26 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
Node.js中package.json中库的版本号(~和^)
Apr 02 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
Apr 23 Javascript
说说如何利用 Node.js 代理解决跨域问题
Apr 22 #Javascript
详解Vue中使用Axios拦截器
Apr 22 #Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
Apr 22 #Javascript
vue 项目build错误异常的解决方法
Apr 22 #Javascript
js实现web调用摄像头 js截取视频画面
Apr 21 #Javascript
今天，小程序正式支持 SVG
Apr 20 #Javascript
详解Vue中组件的缓存
Apr 20 #Javascript
YB-230(1) AN-LP1(1) 根德5570(1) 239军机(1) ICF-903L(1) FS1016(1) YAESU(1) 74HC4066(1) frg-100(1) BCLer(1)
You might like
php与mysql建立连接并执行SQL语句的代码
2011/07/04 PHP
PHP实现linux命令tail -f
2016/02/22 PHP
使用php实现从身份证中提取生日
2016/05/09 PHP
jQuery 解析xml文件
2009/08/09 Javascript
JavaScript 图片预览效果 推荐
2009/12/22 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
2012/04/11 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
2013/03/20 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
Jquery实现遮罩层的方法
2015/06/08 Javascript
javascript url几种编码方式详解
2016/06/06 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
zTree获取当前节点的下一级子节点数实例
2017/09/05 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
2017/11/08 jQuery
微信小程序表单弹窗实例
2018/07/19 Javascript
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
2019/10/17 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
python实现问号表达式(?)的方法
2013/11/27 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
将python依赖包打包成window下可执行文件bat方式
2019/12/26 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
英国网上购买肉类网站：Great British Meat
2018/10/17 全球购物
德国最大的网上足球商店：11teamsports
2019/09/11 全球购物
俄罗斯天然和有机产品、健康生活网上商店：Fitomarket.ru
2020/10/09 全球购物
华为消费者德国官方网站：HUAWEI德国
2020/11/03 全球购物
求职简历推荐信范文
2013/12/02 职场文书
党风廉政承诺书
2014/03/27 职场文书
体育专业大学生职业生涯规划范文：打造自己的运动帝国
2014/09/12 职场文书
高校自主招生校长推荐信
2015/03/23 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书
2019暑假学生安全口号
2019/06/27 职场文书
2019年“我为祖国点赞”演讲稿（3篇）
2019/09/26 职场文书
django上传文件的三种方式
2021/04/29 Python