JavaScript 中怎么在 Webpack 中使用 terser-webpack-plugin 进行代码压缩-js教程-PHP中文网

webpack中terser-webpack-plugin通过optimization.minimizer机制实现js压缩，production模式下默认启用但需显式配置mode和minimize，配合parallel、drop_console等选项及source-map、tree shaking协同优化。

javascript 中怎么在 webpack 中使用 terser-webpack-plugin 进行代码压缩

Webpack 中使用 terser-webpack-plugin 做 JavaScript 压缩，核心是让 Webpack 在构建时调用 Terser 对输出的 JS 文件进行体积优化和逻辑精简。它不是“额外加个插件才生效”，而是围绕 Webpack 的 optimization.minimizer 机制来配置——尤其在 mode: 'production' 下已默认启用，但自定义配置才能真正掌控压缩行为。

确认生产模式并启用压缩开关

Webpack 5+ 在 mode: 'production' 下会自动启用 TerserPlugin，但前提是必须显式声明该模式：

确保 webpack.config.js 中有 mode: 'production'
同时设置 optimization.minimize: true（虽然 production 模式下默认为 true，显式写出更稳妥）
若你手动覆盖了 minimizer 数组，就需主动引入并实例化插件

安装与基础接入

先安装插件（开发依赖）：

npm install terser-webpack-plugin --save-dev
或 yarn add -D terser-webpack-plugin

然后在配置中引入并注册：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

const TerserPlugin = require('terser-webpack-plugin');
<p>module.exports = {
mode: 'production',
optimization: {
minimize: true,
minimizer: [new TerserPlugin()],
},
};</p>

常用实用配置项

实际项目中，通常需要调整以下几类行为：

并行压缩提速：设 parallel: true 或指定核数（如 parallel: require('os').cpus().length - 1）
保留版权注释：用 extractComments: true 把注释抽到单独文件，或 keep_fnames: true 防止函数名被混淆影响调试
移除 console 和 debugger：在 terserOptions.compress 中设 drop_console: true、drop_debugger: true
精准控制压缩范围：用 test（如 /\.js(\?.*)?$/i）、include、exclude 过滤文件，避免误压 polyfill 或第三方库

配合源码映射与 Tree Shaking

压缩不是孤立操作，需协同其他机制：

开启 devtool: 'source-map'（或 'cheap-module-source-map'）并设 sourceMap: true 在插件中，确保报错可定位原始代码
确保 TypeScript 编译目标为 "module": "ESNext"，导出方式为静态 export，否则 Tree Shaking 失效，Terser 也无法剔除未用代码
避免在对象上动态赋值导出（如 utils.fn = () => {}），这会让压缩器无法安全判定“未使用”

不复杂但容易忽略。关键不在装插件，而在理解它怎么和 Webpack 的优化流水线协作。