在现代前端开发中，JavaScript 打包优化对提升应用性能至关重要。代码体积过大直接影响加载速度和用户体验。通过合理的代码分割（Code Splitting）和 Tree Shaking 策略，可以显著减少打包后文件的大小，提高首屏加载效率。以下是实际项目中可落地的关键实践。
理解代码分割：按需加载模块
代码分割的核心思想是将代码拆分为多个块，按需加载而非一次性全部加载。这对于大型单页应用尤其有效。
路由级分割 是最常见的实现方式。使用 Webpack、Vite 或 Rollup 时，结合动态 import() 可轻松实现：
- 在 React 中配合 React.lazy 和 Suspense 按路由拆分组件
- Vue 项目可通过异步组件定义，如 component: () => import('./views/Home.vue')
- 确保打包工具配置了 chunk 分割规则，例如 Webpack 的 splitChunks 配置项
公共依赖应提取到独立 chunk，避免重复加载。比如将 react、react-dom 单独打包为 vendor 文件。
立即学习“Java免费学习笔记（深入）”；
将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。
启用 Tree Shaking：移除无用代码
Tree Shaking 基于 ES6 模块的静态结构特性，在构建时自动剔除未引用的导出代码。要让其生效，必须满足几个前提条件：
- 使用 ES6 模块语法（import / export），避免 CommonJS（require）
- 构建工具需运行在生产模式下，Webpack 会自动标记无用代码（/* unused harmony export */）
- 在 package.json 中声明 "sideEffects": false 或列出有副作用的文件，帮助工具判断哪些模块不能被删除
例如引入 lodash 时，应使用精确导入：import debounce from 'lodash/debounce'，而不是整个库，否则无法 shake 掉其他方法。
结合工具链提升优化效果
选择合适的构建工具能简化优化流程。Webpack、Rollup 和 Vite 都原生支持上述功能，但配置细节不同。
建议操作：
- 使用 Webpack 的 ModuleConcatenationPlugin 合并模块，增强压缩效果
- 开启生产环境压缩（如 TerserPlugin），进一步减小体积
- 利用分析工具（如 webpack-bundle-analyzer）可视化输出，定位大体积模块
- Vite 用户可在构建时直接启用 build.rollupOptions.output.manualChunks 自定义分割策略
基本上就这些。关键在于坚持使用标准模块语法，合理划分代码边界，并持续监控打包结果。不复杂但容易忽略。
