vue打包优化——vendor体积过大

写在前面

在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首开的体验。

一、分析打包文件

首先引入webpack-bundle-analyzer插件，分析打包后的vendor

• 安装

npm install webpack-bundle-analyzer --save-dev

优化前分析

打包结果

• 配置

在vue.config.js文件中的chainWebpack配置插件，默认会在8888端口打开

 chainWebpack: config => {
     config.plugin('webpack-bundle-analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
  }

发现主要是moment和vue系列的文件占用比较大。

二、moment优化

根据之前打包分析图来看，主要是locale下moment的其他语言包占用体积较大。默认是en的语言包，所以在无需其他语言的情况下，可以直接忽略掉locale下的文件不打包。
解决方案：用webpack自带的IgnorePlugin插件

vue.config.js文件

var webpack = require('webpack')

module.exports = {
 // ...此处省略其他配置
    
 chainWebpack: config => {
     config.plugin('ignore')
      .use(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)); //忽略/moment/locale下的所有文件
  }
  
  // ...此处省略其他配置
}

三、vue、vue-router、vuex改为cdn引入

将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来，达到加速首开的目的。

外部的库文件，可以使用CDN资源，或者别的服务器资源等。

1. vue.config.js中增加externals，将引用的外部模块导入

    module.exports = {
 // ...此处省略其他配置
    
 chainWebpack: config => {
    var externals = {
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'vuex': 'Vuex'
    }
    config.externals(externals)
  }
  
  // ...此处省略其他配置
}

2. html文件中直接script引入cdn文件

cdn引入的地址可以参考官网
https://cn.vuejs.org/v2/guide/installation.html#CDN

引入cdn文件

也可以像这篇文章是直接在vue.config.js中配置cdn的url地址vue-cli3打包项目引入外部CDN资源文件

四、优化结果

moment的其他语言包没有被打包了，vue等文件也都用的cdn文件，没有被打包进去vendor。

优化后打包分析

优化后打包结果

network

五、vue项目的其他优化建议

1. productsourceMap：false（在vue.config.js中配置）
   打包后每个js文件都有一个map文件。
   map文件的作用：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。 有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。
   配置该项为false可以不生成map文件。

2. 路由懒加载(按需加载)
   可参考官方文档。
   踩过的一个坑：import里面的组件路径，可以用字符串模板``形式，但是不支持变量赋值。

3. 使用插件去除console、warnings、debugger等无用内容来减少文件大小

// 安装uglifyjs-webpack-plugin
cnpm install uglifyjs-webpack-plugin --save-dev

4. 开启Gzip压缩
   https://www.cnblogs.com/yangshifu/p/9724709.html
   https://www.jb51.net/article/148254.html

参考文献

1. Vue中使用cdn加载资源

2. vue-cli3打包项目引入外部CDN资源文件

3. 关于moment打包的那些事

4. vue项目打包优化之-productionSourceMap设置