vue项目打包优化之webpack-parallel-uglify-plugin

·  阅读 4809

话说我所在项目组由于有专门的运维人员负责上线部署,所以我一直没怎么去关注过打包时间长短这件事,不过前几天我为了解决echats散点图symbol图片路径编译之后异常问题,不得不在本地打包测试,可是每次编译都花费了我20分钟左右的时间,等的我都快睡着了。

真是难为运维人员忍了这么久,不过我实在是不忍心他们在这么忍下去,痛下决心进行优化。查看了一些资料,优化方案五花八门,但是实质性作用的我觉得可能有两个,一个是happypack一个是webpack-parallel-uglify-plugin。本着试试不要钱的想法,在测试之后我发现happypack有点鸡肋,webpack-parallel-uglify-plugin效果显著。

测试demo在使用webpack-parallel-uglify-plugin打包前打包时间

Time: 9879ms复制代码

测试demo在使用webpack-parallel-uglify-plugin打包后打包时间

Time: 5368ms复制代码

在我们项目中效果就更明显了,时间缩减至1/3。大大提高了上线效率。

下面简单介绍一下webpack-parallel-uglify-plugin以及使用方法。

这个插件可以帮助具有许多入口点的项目加速构建。随Webpack提供的uglifyjs插件在每个输出文件上按顺序运行。这个插件与每个可用CPU的一个线程并行运行uglify。这可能会导致显著减少构建时间,因为最小化是CPU密集型的。

This plugin serves to help projects with many entry points speed up their builds. The UglifyJS plugin provided with webpack runs sequentially on each of the output files. This plugin runs uglify in parallel with one thread for each of your available cpus. This can lead to significantly reduced build times as minification is very CPU intensive.

1、安装webpack-parallel-uglify-plugin

npm i webpack-parallel-uglify-plugin -D复制代码

2、在webpack.prod.conf.js中进行配置

不再使用uglifyjs-webpack-plugin,改用webpack-parallel-uglify-plugin

// const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');复制代码

// new UglifyJsPlugin({    
//   uglifyOptions: {    
//     compress: {    
//       warnings: false    
//     }    
//   },    
//   sourceMap: config.build.productionSourceMap,    
//   parallel: true    
// }),    
new ParallelUglifyPlugin({
      uglifyJS: {
        output: {
          comments: false,//是否保留代码中的注释,默认为保留
        },
        warnings: true,//是否在UglifyJS删除没有用到的代码时输出警告信息,默认为false
        compress:{
          drop_console: true,//是否删除代码中所有的console语句,默认为false
          collapse_vars: true,//是否内嵌虽然已经定义了,但是只用到一次的变量, 默认值false
          reduce_vars: true,//是否提取出现了多次但是没有定义成变量去引用的静态值,默认为false
        }
      },
      cacheDir: '',//用作缓存的可选绝对路径。如果未提供,则不使用缓存。
      sourceMap: config.build.productionSourceMap,//可选布尔值。是否为压缩后的代码生成对应的Source Map(浏览器可以在调试代码时定位到源码位置了),这会减慢编译速度。默认为false
 }),复制代码

new ParallelUglifyPlugin() 创建实例对象,常见参数配置如下:

  • test: 使用正则去匹配哪些文件需要被 ParallelUglifyPlugin 压缩,默认是 /.js$/。
  • include: 使用正则去包含被 ParallelUglifyPlugin 压缩的文件,默认为 []。
  • exclude: 使用正则去不包含被 ParallelUglifyPlugin 压缩的文件,默认为 []。
  • cacheDir: 缓存压缩后的结果,下次遇到一样的输入时直接从缓存中获取压缩后的结果并返回,cacheDir 用于配置缓存存放的目录路径。默认不会缓存,想开启缓存请设置一个目录路径。
  • workerCount:开启几个子进程去并发的执行压缩。默认为cpus的数量 - 1或资产数量(以较小者为准)。
  • sourceMap:是否为压缩后的代码生成对应的Source Map, 可选布尔值。会减慢编译速度。默认为false。
  • uglifyJS:用于压缩 ES5 代码时的配置,Object 类型,直接透传给 UglifyJS 的参数。不能与uglifyES一起使用。
  • uglifyES:用于压缩 ES6 代码时的配置,Object 类型,直接透传给 UglifyES 的参数。不能与uglifyJS一起使用。

其中uglifyJS还有很多配置项,可参考www.npmjs.com/package/ugl…在此不一一赘述。

webpack-parallel-uglify-plugin还有很多配置项和知识点,比如说processAssets,

pruneCache等,可参考github.com/gdborton/we…在此也不一一赘述。

TIME!


分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改