webpack 生产环境自动启用代码压缩与优化，关键在于显式设置 mode: 'production'，从而触发 terserplugin、scope hoisting、tree shaking 及 node_env=production；需配合 es 模块、合理导出、splitchunks 分包及可选的 terserplugin 微调。
Webpack 在生产环境自动启用代码压缩与多项优化，但需确保配置到位才能真正生效。核心不是“手动加插件”，而是让 Webpack 正确识别环境并触发内置机制。
确认 mode 为 production
这是所有优化的开关。Webpack 5+ 会根据 mode: 'production' 自动启用：
- TerserPlugin（压缩 JS，移除 console、注释、未使用变量）
- Scope Hoisting（作用域提升，减少闭包开销）
- Tree Shaking（剔除未使用的 ES 模块导出）
- 自动设置
NODE_ENV=production，影响 React/Vue 等库的行为
务必在 webpack.config.js 中显式声明：
确保 TypeScript 输出兼容且可被 Tree Shaking
压缩效果依赖于代码本身是否支持静态分析：
- 使用
import { debounce } from 'lodash'，而非import * as _ from 'lodash' -
tsconfig.json中启用"module": "ESNext"或"ES2020"（不能用commonjs） - 避免在导出对象上动态赋值（如
export const utils = {}; utils.fn = () => {}），这会阻断 Tree Shaking
按需微调压缩行为（可选）
若默认压缩不够或需保留特定内容，可自定义 TerserPlugin：
- 保留版权注释：
keep_fnames: true或extractComments: true - 禁用某类压缩（如不删除 console）：
compress: { drop_console: false } - 启用多进程压缩（大幅提速）：
parallel: true
示例配置：
const TerserPlugin = require('terser-webpack-plugin');module.exports = {
optimization: {
minimizer: [new TerserPlugin({ parallel: true, terserOptions: { compress: { drop_console: true } } })],
}
};
配合 splitChunks 减少重复代码体积
压缩单个文件只是基础，真正减小首屏体积靠合理分包：
- 把
node_modules提取为vendorschunk，利于长期缓存 - 将多个入口共用的业务逻辑抽成
sharedchunk - 设置
minSize和maxSize防止拆出过小或过大的包
推荐基础配置：
splitChunks: {chunks: 'all',
cacheGroups: {
vendor: { test: /[\/]node_modules[\/]/, name: 'vendors', priority: 10 },
}
}
不需要额外安装压缩插件，Webpack 内置已足够。重点是让代码结构、TS 编译目标和 Webpack 配置形成闭环 —— 压缩不是终点，而是正确工程化实践的自然结果。
