vue-cli4版本如何快速优化性能

注意事项：
1、vue-cli4版本测试环境无法打包出带有hash值的文件名，解决方法：

即便设置filenameHashing:true,也是无效的，vue-cli4版本是认准NODE_ENV='production',
如果想执行 npm run build:stage【指令对应环境变量文件是env.staging】，
需要设置NODE_ENV='production'

优化主要步骤：
1、使用插件compressionPlugin进行gzip进行压缩，效果很明显

安装 npm install --save-dev compression-webpack-plugin
如果安装失败，指定版本npm install --save-dev [email protected]

const CompressionWebpackPlugin = require('compression-webpack-plugin');

chainWebpack(config) {
    config.plugin('compressionPlugin').use(
      new CompressionWebpackPlugin({
        test: /\.(js|css|json|ico|svg)$/,// 匹配文件格式
        algorithm: 'gzip',
        threshold: 10240, // 对超过10k的数据压缩
        minRatio: 0.8, // 压缩比
        deleteOriginalAssets: false //是否删除源文件
      })
    );
}

nginx配置，直接粘贴在http {} 里面
  gzip on; #其他属性不用，这个一定要开，开启浏览器压缩请求
  gzip_buffers 4 16k; # 压缩响应的缓冲区的数量和大小
  gzip_comp_level 9;  # 响应压缩的级别，1-9，数字越大压缩得越好，但越耗时间
  gzip_http_version 1.1; # 默认1.1，所需的最小HTTP版本
  gzip_min_length  1k;  # 压缩最小大小，小于该值的文件不会被压缩
  gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/javascript application/json;
  gzip_disable "MSIE [1-6]\.";
  gzip_vary on; 

2、使用vue-cli4自带的splitChunks来分隔代码，会对公共模块进行抽取

chainWebpack(config) {
   config
      .when(process.env.NODE_ENV !== 'development',
        config => {
          config
            .plugin('ScriptExtHtmlWebpackPlugin')
            .after('html')
            .use('script-ext-html-webpack-plugin', [{
              inline: /runtime\..*\.js$/
            }])
            .end()
          config
            .optimization.splitChunks({
              chunks: 'all',
              cacheGroups: {
                libs: {
                  name: 'chunk-libs',
                  test: /[\\/]node_modules[\\/]/,
                  priority: 10,
                  chunks: 'initial'
                },
                elementUI: {
                  name: 'chunk-elementUI', 
                  priority: 20, 
                  test: /[\\/]node_modules[\\/]_?element-ui(.*)/ 
                },
                commons: {
                  name: 'chunk-commons',
                  test: resolve('src/components'), 
                  minChunks: 3,
                  priority: 5,
                  reuseExistingChunk: true
                }
              }
            })
          
          config.optimization.runtimeChunk('single')
        }
      )
}

3、cdn引用依赖资源，不要使用预加载rel='prefetch',浪费首页加载性能；
4、图片压缩，去除空格插件terser-webpack-plugin，等等
5、入口文件main.js的按需引入也是比较重要的，只要在首页关联用到的文件，都会加载splitChunks切出来的文件，所以需要按需引入。
6、路由懒加载等开发细节，自己把控就好。