webpack plugins 是构建流程中决定产物质量、体积和运行时行为的核心机制；关键在于选对、配准、时机对，而非堆砌数量。
Webpack 的 plugins 是构建流程中执行高级逻辑的核心机制，直接决定产物质量、体积大小和运行时行为。用好 plugins 不需要堆砌数量，关键是选对、配准、时机对。
压缩 JavaScript 代码：TerserPlugin 是默认且首选
Webpack 5+ 在 mode: 'production' 下自动启用 TerserPlugin，完成 JS 压缩（minify）与混淆（mangle）。它比旧版 UglifyJsPlugin 更快、支持 ES6+ 语法、错误恢复更强。
- 如需自定义压缩行为，可在
optimization.minimizer中覆盖默认配置 - 常见优化项包括：
drop_console: true（移除 console）、pure_funcs: ['console.log']（按函数粒度清除）、keep_fnames: false（允许重命名函数名以进一步压缩） - 注意：开启
sourceMap: true会显著拖慢构建速度，建议仅在调试阶段启用，生产环境禁用
注入环境变量：DefinePlugin 实现编译期静态替换
不能靠运行时读取 process.env —— Webpack 打包时无法访问 Node 环境变量。正确做法是用 DefinePlugin 在编译阶段把变量“硬编码”进代码。
- 写法示例：
new webpack.DefinePlugin({ API_BASE_URL: JSON.stringify('https://api.example.com') }) - 变量值必须是字符串字面量或 JSON 安全表达式（如
__DEV__: JSON.stringify(true)），否则会报错 - 业务代码中可直接使用：
fetch(API_BASE_URL + '/user')，打包后该变量会被替换成实际字符串，无运行时开销
优化产物结构：SplitChunksPlugin + HtmlWebpackPlugin 组合发力
单一 bundle 文件不利于缓存和加载。Plugins 可拆分、分析、包装最终产物：
-
SplitChunksPlugin（内置）：自动提取
node_modules中的第三方库为vendors.js，配合chunkFilename和 contenthash，实现长期缓存 -
HtmlWebpackPlugin：生成 HTML 并自动注入 script 标签；开启
minify选项可压缩 HTML，减少传输体积 -
CompressionPlugin：输出
.gz文件，配合 Nginx 开启 gzip_static，让浏览器自动请求压缩版本
辅助开发与诊断：分析类插件只在需要时启用
这些插件不参与最终产物，但对优化过程至关重要，务必限制使用场景：
- webpack-bundle-analyzer：构建后打开可视化报告，精准定位体积异常模块（如意外引入了整个 Lodash）
- speed-measure-webpack-plugin：包裹整个 config，显示每个 loader/plugin 的耗时，快速识别性能瓶颈
- 二者都增加构建时间，应仅在
npm run analyze这类专用脚本中启用，避免污染日常开发或 CI 流程
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
