浅谈vue项目打包优化策略

使用vue-cli部署生产包时，发现资源包很大，打包后的vendor.js达到了1.4M，这已经很大了，而且会影响到首屏加载。那么，怎么优化呢？

1.组件按需加载

这是首先可以优化的点。如果频繁使用了第三方组件/UI库，如我的项目中经常同时使用了 element-ui, mint-ui,echarts等组件库，如果全部引入，项目体积非常大，这时可以按需引入组件。

示例如下：

1.1 element-ui

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将.babelrc 修改为：

{ "presets": [["es2015", { "modules": false }]], "plugins": [  [   "component",   {    "libraryName": "element-ui",    "styleLibraryName": "theme-chalk"   }  ] ]}

然后引入部分组件，这样一来，就不需要引入样式了，插件会帮我们处理。

// main.jsimport Vue from 'vue'import { Dialog, Loading } from 'element-ui'Vue.use(Dialog)Vue.use(Loading.directive)Vue.prototype.$loading = Loading.service// 然后正常使用组件

1.2 mint-ui

由于mint-ui是element-ui的移动端组件，所以它的使用和引入几乎和element-ui一样。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将.babelrc 修改为：

{ "presets": [  ["es2015", { "modules": false }] ], "plugins": [["component", [  {   "libraryName": "mint-ui",   "style": true  } ]]]}

然后引入部分组件

// main.jsimport Vue from 'vue'import { Toast, MessageBox } from 'element-ui'Vue.use(Dialog)Vue.use(Loading.directive)Vue.prototype.$loading = Loading.service// 然后正常使用组件

注意，element-ui和mint-ui不能同时在.babelrc中进行插件设置，这种情况下，依然可以按需引入，但是不要在.babelrc中配置，在引入的地方同时引入css即可。

1.3 echarts

首先安装babel-plugin-equire

npm i babel-plugin-equire -D

然后，在.babelrc文件中添加该插件

{ "plugins": [    // other plugins    ...      "equire" ]}

创建一个js文件

// echarts.js// eslint-disable-next-lineconst echarts = equire([ 'tooltip', 'candlestick', 'bar', 'line', 'axisPointer', 'legend', 'grid'])export default echarts// 业务组件，引入echartsimport echarts from '@/assets/lib/echarts'// 使用与以前一样

按需加载echarts

解决vue-cli首屏加载慢的问题

2.路由懒加载

这里需要一个插件

vue-router官方推荐syntax-dynamic-import插件，不过它要求同时安装@bable/core^7.0.0，如果你安装了babel-core6，是会有版本冲突的。我的做法如下