在前端开发的过程中，我们经常会需要进行 JavaScript 文件的压缩和混淆。而 webpack 更是成为了前端开发人员打包构建工具的首选。对于 JavaScript 的压缩和混淆，我们可以使用 webpack 自带的 UglifyJsPlugin 插件来实现。但是在大型项目中，由于需要压缩和混淆的文件数量庞大，导致打包构建的时间会变得非常缓慢，这时我们就需要使用 cache-uglifyjs-webpack-plugin 插件来进行缓存操作了。
什么是 cache-uglifyjs-webpack-plugin
cache-uglifyjs-webpack-plugin 是一个webpack插件，是一种更快的uglifyJS插件，它使用了文件缓存，可以在不改变输出内容的前提下，将缓慢的uglifyJS操作缓存到磁盘中，并在下次构建时直接从缓存读取。这样能够大大加快构建速度，同时减少磁盘 I/O 操作，提高构建过程的性能和效率。
如何使用 cache-uglifyjs-webpack-plugin
安装
在项目的根目录中执行以下命令，安装 cache-uglifyjs-webpack-plugin
npm install --save-dev cache-uglifyjs-webpack-plugin
配置
在 webpack 配置中添加 cache-uglifyjs-webpack-plugin 插件。下面是一个 webpack.config.js 中使用该插件的示例：
-- -------------------- ---- ------- ----- ------------------- - ----------------------------------------- -------------- - - ------- ------------- - --------- ----- ---------- - --- --------------------- ------------ ----------------------- ---------- --------- ----------------- -------- ------------- -------------- - --------- - --------- ------ ------------- ----- -------------- ---- - - -- - -- ------- -展开代码
在上面的示例中，我们导入了 cache-uglifyjs-webpack-plugin，然后将其作为 minimize 的自定义最小化器，放进了 plugins 数组中。
在 CacheUglifyJsPlugin 的配置选项中，我们可以指定缓存文件夹，指定应该启用的 worker 数量，以及指定哪些文件需要缓存。
缓存文件夹
我们通过设置cacheFolder选项指定用来存储缓存文件夹的路径，注意这个文件夹需要为可写状态。
new CacheUglifyJsPlugin({ cacheFolder: path.resolve(__dirname, '.cache') })
启用 worker 数量
worker 是用来处理并行化压缩的进程。在工作的时候，每个 worker 都会独立的处理不同的文件。
通过 parallel 选项，可以指定应该启用的 worker 数量。
new CacheUglifyJsPlugin({ parallel: os.cpus().length })
缓存文件排除
可以使用 exclude 选项，排除哪些文件不应该被缓存。 例如：
new CacheUglifyJsPlugin({ exclude: /\/excludes/ })
配置 uglify-options
CacheUglifyJsPlugin 基于 UglifyJS,由于 uglifyJS 有很多参数，因此您可以使用 uglifyOptions 对象来配置您需要传递给 UglifyJS 插件的参数。
uglifyOptions: { compress: { warnings: false, drop_console: true, drop_debugger: true } }
注意事项
- 如果您使用 Windows，那么请注意请确保你的文件系统支持文件锁定(setupLocker.js)。
- 插件仅适用于生产模式。
总结
cache-uglifyjs-webpack-plugin 可以帮助我们解决 JavaScript 文件压缩和混淆缓慢的问题，同时提高构建过程的性能和效率。通过对插件的配合使用，我们可以大幅度加速 webpack 打包构建，并提高前端项目的开发效率。
至此，我们已经完成了对 cache-uglifyjs-webpack-plugin 的介绍，希望这篇使用教程对你有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/68799
