《十四》对打包后的 JavaScript 文件中的代码进行压缩和丑化

原创已于 2025-02-17 09:10:12 修改 · 547 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Webpack

于 2023-10-23 22:17:45 首次发布

Webpack 专栏收录该内容

34 篇文章

订阅专栏

Terser是可对JavaScript代码进行解释、压缩和丑化的工具集，可单独使用，也能结合Webpack等构建工具。文中介绍了单独使用Terser的安装、运行命令及效果，还说明了在Webpack中通过TerserPlugin插件实现其功能，Webpack5+默认安装该插件。

Terser 是一个可以对 JavaScript 代码进行压缩和丑化的工具集。本身是一个独立的工具，可以单独使用；也可以结合 Webpack 等构建工具一起使用。

早期是使用 uglify-js 来压缩、丑化 JavaScript 代码的，但是目前已经不再维护了，并且不支持 ES6+ 的语法。

单独使用：

安装 Terser，默认同时会安装对应的 CLI 工具：npm install terser。
新建 src/index.js 文件，并编写代码。
运行 terser ./src/index.js -o ./src/output.min.js 命令，会发现 Terser 生效生成了 output.min.js 文件，只是删掉了空格，其他都没有改变。

-o ：输出的文件。
运行 terser ./src/index.js -o ./src/output.min.js -c defaults 命令，会发现 Terser 生效生成了 output.min.js 文件，死代码也被删掉了。

-c：对代码进行压缩。有很多配置选项，具体可查看官方文档。
运行 terser ./src/index.js -o ./src/output.min.js -m toplevel 命令，会发现 Terser 生效生成了 output.min.js 文件，函数名、参数名等被丑化了。

-m：对名词进行转换和丑化。有很多配置选项，具体可查看官方文档。

在 Webpack 中使用：

在 Webpack 中是通过 TerserPlugin 插件来实现 Terser 功能的。Webpack5+ 默认就会安装 TerserPlugin 插件，之前的版本需要手动安装 TerserPlugin 插件。在 Webpack 配置文件中通过 optimization.minimizer 选项来配置 TerserPlugin 插件。

在 production 模式下，默认就会使用 TerserPlugin 插件来处理代码。

// webpack.config.js
const TerserPlugin = require('terser-webpack-plugin')

module.exports = {
    mode: 'development',
    devtool: 'source-map',
    optimization: {
        // 需要将 minimize 设置为 true
        minimize: true,
        // 在 minimizer 中通过 TerserPlugin 实例配置 Terser
        minimizer: [
            new TerserPlugin({
                // 有很多配置选项，具体可查看官方文档
                terserOptions: {
                    toplevel: true,
                }
            })
        ]
    },
}