乐趣区

关于vue-cli:vuecli4版本如何快速优化性能

jiezi

注意事项：
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、路由懒加载等开发细节，本人把控就好。

退出移动版