JavaScript打包优化的核心是减少体积、提升加载效率、增强缓存复用且不牺牲可维护性，具体包括代码分割与按需加载、Tree Shaking、按需引入、依赖替换、压缩传输优化及持续分析协作。
JavaScript打包优化的核心是减少体积、提升加载效率、增强缓存复用，同时不牺牲可维护性。实际落地时，关键不在堆砌技术，而在理解每种策略解决的具体问题。
代码分割与按需加载
把大包拆小，让用户只下载当前需要的代码。
- 用
import()动态导入实现路由级或组件级懒加载，比如 React 中搭配React.lazy和Suspense，Vue 中用异步组件写法 - 配置
SplitChunksPlugin提取公共依赖（如react、lodash-es），生成独立vendorschunk，提升缓存命中率 - 对低频功能模块（如 PDF 渲染、富文本编辑器）做条件性加载，用户触发操作后再拉取
- 配合
webpackPreload或webpackPrefetch提示浏览器预加载可能用到的资源，缓解懒加载延迟
剔除冗余与静态优化
让代码本身更干净，而不是靠压缩“硬减”。
- 启用 Tree Shaking：确保使用 ES 模块语法，避免
require；在package.json中声明"sideEffects": false或明确列出有副作用的文件 - 避免全量引入第三方库，改用按需导入，例如
import { debounce } from 'lodash-es'，或用babel-plugin-lodash自动转换 - 替换重型依赖，如用
dayjs替代moment.js，用date-fns替代lodash/fp等组合方案
压缩与传输优化
在构建和部署环节进一步“瘦身”。
立即学习“Java免费学习笔记（深入）”；
- 生产模式下自动启用 Terser 压缩：移除空格、注释、调试语句，混淆变量名
- 服务端开启 Gzip 或 Brotli 压缩，配合 CDN 使用效果更明显
- 禁用生产环境的 source map，除非调试必需；若需保留，建议单独上传至错误监控平台
- 抽离运行时代码（
runtimeChunk: 'single'），防止业务代码变更导致 vendor 缓存失效
持续分析与协作习惯
优化不是一次性的配置动作，而是团队协作中的日常意识。
- 用
webpack-bundle-analyzer定期查看 bundle 构成，定位“体积刺客”模块 - 新引入依赖前先查体积（如 bundlephobia.com），评估是否真有必要
- CI 流程中加入体积阈值检查，防止无意识膨胀
- 优先选 ESM 版本的库，避开 CommonJS 包——后者无法被 Tree Shaking 正确识别
