什么是 uglify-es-webpack-plugin
uglify-es-webpack-plugin 是一个 webpack 插件，它可以将 JavaScript 代码压缩和混淆，从而减小文件体积，提高站点速度，提升用户体验。
它是在 uglify-js 基础上开发而来，采用更加先进的语法分析和压缩算法，能够支持 ES6/ES7 语法，并能够保证压缩后的代码不会出错。
如何使用 uglify-es-webpack-plugin
安装 uglify-es-webpack-plugin
npm install uglify-es-webpack-plugin --save-dev
在 webpack 配置文件中引入插件
const UglifyESPlugin = require('uglify-es-webpack-plugin');在 optimization 配置中添加插件
optimization: { minimizer: [ new UglifyESPlugin() ] }配置插件的参数
可以通过传入一个配置对象来更细粒度地控制插件的行为。常用配置项包括：
- test：需要压缩的文件类型，默认是 /.(js|jsx|json|css|less|scss|html?)$/i。可以通过传入一个正则表达式来自定义。
- cache：是否启用缓存，默认是 true。如果开启缓存，uglify-es-webpack-plugin 会将压缩过的代码缓存在内存中，下次构建可以直接使用缓存，提高构建速度。
- parallel：是否启用并行压缩。默认是 true，在多核 CPU 上会比串行压缩更快。
示例代码：
-- -------------------- ---- ------- --- ---------------- ----- ---------------- ------ ------ --------- -- -------------- - ------------- ----- --------- - -------------- ----- ------- ---- - - --
uglify-es-webpack-plugin 的使用案例
我们在一个简单的 React 项目中使用 uglify-es-webpack-plugin。首先需要安装项目依赖：
npm install react react-dom --save npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev npm install uglify-es-webpack-plugin --save-dev
然后创建一个简单的 React 组件：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- --- ------- --------- -
-------- -
----- - ---- - - -----------
------ -
-----
------ -------
------
--
-
-
------ ------- ----在 webpack 配置文件中添加对应的规则和插件：
-- -------------------- ---- -------
----- -------------- - ------------------------------------
-------------- - -
----- -------------
------ -----------------
------- -
----- ----------------------- --------
--------- -----------
--
------- -
------ -
-
----- --------------
-------- ---------------
---- -
------- ---------------
-------- -
-------- --------------------- ----------------------
-
-
-
-
--
-------- -
--- ----------------
-------------- -
------- -
--------- -----
-
-
--
-
--最后运行 webpack 进行构建：
./node_modules/.bin/webpack
可以看到，输出的 bundle.js 已经被压缩混淆过了，可以提高站点速度和用户体验。
小结
uglify-es-webpack-plugin 是一个非常实用的 JavaScript 代码压缩和混淆工具，可以帮助我们优化站点性能和用户体验。本文介绍了它的安装和使用方法，并且附上了示例代码。希望可以对前端工程师们的工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/193256