启用Tree Shaking、代码分割、压缩混淆及体积分析，优先使用ES6模块，动态加载路由，分离第三方库，结合webpack-bundle-analyzer等工具优化JS打包体积。
减少 JavaScript 打包体积是前端构建优化的核心目标之一，直接影响页面加载速度和用户体验。关键在于识别冗余代码、合理拆分资源并利用现代工具链进行压缩与剔除。
启用 Tree Shaking 剔除未使用代码
Tree Shaking 是基于 ES6 模块静态结构的特性，在打包时移除未被引用的导出模块。
建议：- 优先使用 ES6 模块语法（import/export），避免 CommonJS 动态引入
- 确保使用的库提供 ESM 版本（如查看 package.json 中的 "module" 字段）
- 在 Webpack 或 Vite 等构建工具中开启 production 模式，自动启用 Tree Shaking
分割代码（Code Splitting）按需加载
将代码拆分为多个小块，只在需要时加载，降低首屏体积。
实现方式：- 使用动态 import() 实现路由级或组件级懒加载
- 配置 Webpack 的 splitChunks 将第三方库（如 react、lodash）单独打包
- 提取公共模块，避免重复打包到多个 chunk 中
压缩与混淆提升输出效率
通过压缩工具减小文件尺寸，去除注释、空白和缩短变量名。
立即学习“Java免费学习笔记（深入）”；
常用手段：- 启用 TerserPlugin（Webpack 内置）压缩 JS 代码
- 使用 Babel 对语法进行按需转换，避免全量 polyfill
- 配置 babel-plugin-transform-runtime 减少 helper 代码重复
分析体积构成定位问题模块
借助可视化工具了解哪些依赖或代码占比较大，有针对性地优化。
推荐工具：- webpack-bundle-analyzer：生成交互式体积分析图
- vite-bundle-visualizer：适用于 Vite 项目
- source-map-explorer：通过 sourcemap 分析代码来源
基本上就这些。持续监控打包结果，结合业务场景选择合适策略，能显著降低 JS 体积。关键是建立从开发到构建的闭环优化意识。不复杂但容易忽略。
