webpack打包vue项目性能优化

webpack打包vue项目性能优化

1. 项目打包上线设置productionSourceMap为false减小.map文件所占dist文件的体积；

2. 开启gzip对dist文件进一步压缩（ps：需后端配合开启gzip方可使用）；

3. 使用cdn减小打包后vendor.js的体积，从而缩短首屏加载时间（ps：第3步如果注释掉出现错误可以不进行注释）；

4. 按需引用组件（iview为例）；

5. webpack-parallel-uglify-plugin替换uglifyjs-webpack-plugin提升打包速度（ps：uglifyjs-webpack-plugin单进程，webpack-parallel-uglify-plugin多进程）

   // 引入 ParallelUglifyPlugin 插件
   const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
   
   // 使用 ParallelUglifyPlugin 并行压缩输出的 JS 代码
   new ParallelUglifyPlugin({
      // 传递给 UglifyJS 的参数
      uglifyJS: {
        output: {
          // 最紧凑的输出
          beautify: false,
          // 删除所有的注释
          comments: false,
        },
        compress: {
          // 在UglifyJs删除没有用到的代码时不输出警告
          warnings: false,
          // 删除所有的 `console` 语句，可以兼容ie浏览器
          drop_console: true,
          // 内嵌定义了但是只用到一次的变量
          collapse_vars: true,
          // 提取出出现多次但是没有定义成变量去引用的静态值
          reduce_vars: true,
        }
      },
      test: /.js$/g, //使用正则去匹配哪些文件需要被 ParallelUglifyPlugin 压缩，默认是 /.js$/g
      include: [], //使用正则去命中需要被 ParallelUglifyPlugin 压缩的文件，默认为 []
      exclude: [], //使用正则去命中不需要被 ParallelUglifyPlugin 压缩的文件，默认为 []
      cacheDir: '', //缓存压缩后的结果，默认不会缓存，想开启缓存请设置一个目录路径
      workerCount: '', //开启几个子进程去并发的执行压缩。默认是当前运行电脑的 CPU 核数减去1
      sourceMap: false //是否输出 Source Map，这会导致压缩过程变慢
    })