前言
在前端开发中,压缩 JS 文件是必不可少的步骤,它可以减小文件大小,缩短加载时间,提高网页的性能。Webpack 是一款优秀的前端构建工具,可以帮助我们自动化地构建前端项目,在构建时使用 UglifyJs 压缩 JS 文件十分方便,然而 UglifyJs 的依赖版本升级较慢,导致一些 ES6 语法的压缩存在问题,因而就有了 Uglifyes-webpack-plugin。本文将介绍如何使用这个插件来压缩 JavaScript 代码。
安装
npm install uglifyes-webpack-plugin --save-dev
配置
在 webpack.config.js 中添加以下配置:
-- -------------------- ---- ------- ----- -------------- - ---------------------------------- -------------- - - -- --- ------------- - --------- ----- ---------- - --- ---------------- --------- ----- -- ----- ---------- ----- -- ---- --------- -------------- - --------- - -- --- -------- -- -- ------- - -- --- -------- -- -- ------- - -- --- -------- -- - -- ----- ---------------- -- ------ --- -- -- -
通过上述配置,即可将 JS 文件压缩为最精简的形式。下面对其中的参数进行一一介绍:
parallel
:默认为os.cpus().length - 1
,即利用机器的多核 CPU 并行压缩(可以提高压缩速度)。sourceMap
:是否生成 sourcemap,用于调试压缩后的代码,便于中断点调试。uglifyOptions
:UglifyJs 配置项,包含compress
、mangle
和output
三个子对象。
示例
下面来看一个简单的示例:
console.log("Hello World!");
使用 Uglifyes-webpack-plugin 压缩后会变成:
console.log("Hello World!");
效果如下:
总结
Uglifyes-webpack-plugin 是一款十分使用方便的插件。本文介绍了它的安装和配置方法,并且给出了一个示例。使用这款插件,可以让你的 JavaScript 代码变得更加精简,提高网页的性能。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005664481e8991b448e257f