说明
玩转 webpack 学习笔记
方法一:使用 parallel-uglify-plugin 插件
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin'); module.exports = { plugins: [ new ParallelUglifyPlugin({ uglifyJS: { output: { beautify: false, comments: false, }, compress: { warnings: false, drop_console: true, collapse_vars: true, reduce_vars: true, } }, }), ], };
方法二:uglifyjs-webpack-plugin 开启 parallel 参数
不支持 es6 语法
const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); module.exports = { plugins: [ new UglifyJsPlugin({ uglifyOptions: { warnings: false, parse: {}, compress: {}, mangle: true , output: null, toplevel: false, nameCache: null, ie8: false, keep_fnames: false }, parallel: true }) ], };
方法三:terser-webpack-plugin 开启 parallel 参数(推荐)
支持 es6 语法
const TerserPlugin = require('terser-webpack-plugin'); module.exports = { optimization: { minimizer: [ new TerserPlugin({ parallel: 4 }) ], }, };
实战使用 terser-webpack-plugin
先安装依赖,这里使用 1.3.0 的
npm install terser-webpack-plugin@1.3.0 --save-dev
如果使用 5.3.5
打包会报错
配置一下
const TerserPlugin = require("terser-webpack-plugin"); module.exports = { optimization: { minimizer: [ new TerserPlugin({ parallel: true, }), ], }, };
我们先把 parallel 设置成 false
然后把 parallel 设置成 true,开启后速度有了一定的提升。启用多进程并行运行来缩小/最小化 JavaScript 还是很有作用的。