关键在于选对工具链并调优配置：新项目用Vite（默认esbuild压缩，需切terser删console），老项目用Webpack（需手动配TerserPlugin、SplitChunksPlugin及drop_console）；Terser必须启用mangle和drop_console等参数；source map线上用hidden模式，避免泄露路径且适配错误监控。
JavaScript 代码打包与压缩不是“配个工具就能自动变快”，关键在于选对工具链、理解每个环节的作用，以及避开默认配置埋的坑。
Webpack 或 Vite？先看项目类型再决定打包器
新项目优先用 Vite：启动快、热更新准、默认启用 esbuild 做 TS/JS 转译和 minify，build 时自动调用 Terser 压缩。老项目用 Webpack 更稳妥，但得手动配 TerserPlugin 和 SplitChunksPlugin。
-
Vite的build.minify默认是esbuild，压缩快但不支持console移除或debugger删除，要彻底删日志得切到terser -
Webpack的mode: 'production'会自动启用TerserPlugin，但默认不移除console，需在TerserPlugin配置里加drop_console: true - 若用
Webpack 5+，node_modules中的 ES 模块会被自动识别，不用额外配resolve.alias指向esm入口，但旧包（如lodash）仍可能引入全量包，得靠imports或babel-plugin-lodash优化
Terser 压缩必须调参，否则白压
Terser 是目前最主流的 JS 压缩器，但它的默认行为偏保守——比如不删 console、不合并重复字符串、保留可读的变量名（mangle 开关默认关）。线上包体积大，往往就卡在这儿。
- 启用变量名混淆：
mangle: { reserved: ['require', 'exports', 'module'] }，避免破坏 UMD 或 CJS 兼容性 - 删除调试语句：
compress: { drop_console: true, drop_debugger: true }，注意这会让console.log('a', x)整行消失，不是只删console - 开启
module: true（Vite 构建时传给 Terser）能更好处理export/import，减少冗余包装函数 - 慎用
unsafe类 compress 选项（如unsafe_arrows），某些低版本 Safari 会报错
Source map 怎么配才不影响线上性能又方便排查？
开发用 source-map，上线必须关掉或改用 hidden-source-map。前者把映射文件直接内联进 bundle，增大体积；后者生成独立 .map 文件但不带 sourceMappingURL 注释，不会被浏览器加载，只供错误监控系统上传解析。
立即学习“Java免费学习笔记（深入）”；
- Vite 中设
build.sourcemap: 'hidden'即可 - Webpack 中
devtool: 'hidden-source-map'，并确保output.devtoolModuleFilenameTemplate不暴露本地路径（比如用[resource-path]替代[absolute-resource-path]） - 若用 Sentry 等平台，上传
.map文件时，要同步传原始构建时的 Git commit hash 和publicPath，否则定位不到源码行
真正影响首屏速度的，往往不是压缩率高低，而是代码拆分是否合理、第三方包有没有被误打进来、eval 类 source map 是否残留。压缩只是最后一步，别让它掩盖了更前面的结构问题。
