Vue SPA项目加载优化

Vue-cli构建的项目中，经常会因为依赖包的原因导致打包后的文件过大，动不动vendor.js文件就会有 几Mb 大小
对应的做法是把大型依赖包采用CDN形式引用，并配置路由懒加载

因为我项目是用的Vue全家桶+ElementUI，所以会以此为示例

1. 检查依赖包大小

这里可以使用webpack-bundle-analyzer可视化插件来查看项目捆绑包的大小关系

2. 打包优化

在index.html中将容量过大的依赖用CDN引用

<link rel="stylesheet" href="https://unpkg.com/element-ui@2.4.6/lib/theme-chalk/index.css">
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://unpkg.com/element-ui@2.4.6/lib/index.js"></scrip

并在webpack.base.conf.js中配置需要跳过打包的依赖，key是包名，value是CDN引用对象

externals: {
    'vue':'Vue',
    'vuex': 'Vuex',
    'vue-router':'VueRouter',
    'axios':'axios',
    'element-ui': 'ElementUI'
}

然后就可以将main.js中对应包的引入和注册给删除

// import Vue from 'vue'
// import VueRouter from 'vue-router'
// import Vuex from 'vuex'
// import 'element-ui/lib/theme-chalk/index.css'
// import ElementUI from 'element-ui'

// Vue.use(VueRouter)
// Vue.use(Vuex)
// Vue.use(ElementUI)

这里需要注意ElementUI在CDN下访问时应该用ELEMENT对象

Vue.prototype.$msgbox = ELEMENT.MessageBox;
Vue.prototype.$alert = ELEMENT.MessageBox.alert;
Vue.prototype.$confirm = ELEMENT.MessageBox.confirm;
Vue.prototype.$prompt = ELEMENT.MessageBox.prompt;
Vue.prototype.$message = ELEMENT.Message;

到此为止，应用应该是可以访问的状态
并且通过webpack-bundle-analyzer查看会发现相关的依赖包都已经不见了

3. 路由懒加载

Vue-router配置路由懒加载，打包时就会将组件分开，访问相应路由时再加载资源

修改/src/router/index.js里的路由配置即可

// import Login from '@/components/Login'

export default new VueRouter({
  routes: [
    {
      path: '/Login',
      name: 'Login',
      component: resolve => require(['@/components/Login'], resolve)
    }
  ]
})

4. Gzip压缩

Gzip压缩除了项目本身还需要服务器上的配置，这里我只说明一下Vue项目中的问题

在/config/index.js中修改打包时的配置，找到productionGzip并进行修改

productionGzip: true,
productionGzipExtensions: ['js', 'css'],

在webpack.prod.conf.js中可以看到Gzip的相关配置
过程中用到了compression-webpack-plugin依赖，没有的话需要进行安装

if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

这样打包时就会对大文件进行压缩，完成后能看到后缀为gz的相关文件

部署到服务器上，访问应用时能看到文件的响应头中，编码是Gzip

vendor文件的大小也从近2m大小变成了11k，首屏访问速度也提高了很多

结尾

至此就是关于Vue SPA应用的一些优化方法
当然除了这些，在开发时注意代码结构、组件的复用、依赖按需加载等也都能优化加载速度

共勉