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.js
import 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.js
import 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-line
const echarts = equire([
  'tooltip',
  'candlestick',
  'bar',
  'line',
  'axisPointer',
  'legend',
  'grid'
])
export default echarts

// 业务组件，引入echarts
import echarts from '@/assets/lib/echarts'
// 使用与以前一样

按需加载echarts

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

2.路由懒加载

这里需要一个插件

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

npm install babel-plugin-syntax-dynamic-import --save-dev(^6.18.0)

// router.js
const login = () => import('@/components/login')
const router = new VueRouter({
  routes: [
    { path: '/login', component: login }
  ]
})

还有一种魔法注释用法

有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用命名 chunk，一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')

3.异步组件

如果组件在页面加载时不需要，只在调用时用到，这时可以使用异步组件的写法。仅仅是引入和组件注册写法不同

// template
<test v-if="showTest"></test>

// script
  components: {
    test: () => import('./test') // 将组件异步引入，告诉webpack，将该部分代码分割打包
  },
  methods:{
      clickTest () {
          this.showTest = !this.showTest
    }
  }

4.图片的压缩合并

无损压缩图片：https://tinypng.com/

如有可能，将图片制作成精灵图

5.CDN加速

在index.html中引入cdn资源

  <head>
    <link href="https://cdn.bootcss.com/element-ui/2.13.0/theme-chalk/index.css" rel="stylesheet">
  </head>
  <body>
    <div id="app">
    </div>
    <!-- built files will be auto injected -->
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.13.0/index.js"></script>
  </body>

修改 build/webpack.base.conf.js

    module.exports = {
      context: path.resolve(__dirname, '../'),
      entry: {
        app: './src/main.js'
      },
      externals:{
        'vue': 'Vue',
        'vue-router': 'VueRouter',
        'vuex':'Vuex',
        'vue-resource': 'VueResource'，
        'element-ui':'ELEMENT'
      },
      ...
    }

修改src/main.js src/router/index.js 注释掉import引入的vue,vue-resource

    // import Vue from 'vue'
    // import VueResource from 'vue-resource'
    // Vue.use(VueResource)
    // 注释element-ui相关引入，注意如果使用了按需引入，这部分也要去掉

6.压缩代码

vue-cli已经使用UglifyJsPlugin 插件来压缩代码，可以设置成如下配置：

new webpack.optimize.UglifyJsPlugin({
  compress: {
    warnings: false,
    drop_console: true,
    pure_funcs: ['console.log']
  },
  sourceMap: false
})

其中sourceMap: false是禁用除错功能。

如果设为true，在部署包中会生成.map结尾的js文件。它用于在代码混淆压缩的情况下仍可进行调试。这个功能虽好，但会大大增加整体资源包的体积，所以将其禁用。

vue项目打包优化策略