Tree Shaking 是前端打包优化的核心技术，依赖 ES 模块静态分析剔除未引用代码；需统一使用 import/export、声明 sideEffects、选用 ESM 第三方库（如 lodash-es）、配合 production 模式与 Terser 压缩，方可实现体积显著缩减。
精简前端应用打包后的冗余代码，核心是让构建工具“看清”哪些代码真正在用、哪些可以删、哪些不该一起加载。不是靠手动删逻辑，而是靠配置+规范+现代语法协同发力。
启用 Tree Shaking 剔除未引用代码
Tree Shaking 依赖静态分析，只对 ES 模块（import/export）生效，CommonJS（require/module.exports）会直接被跳过。
- 确保项目中所有模块都使用
import和export，避免混用require - 在
package.json中声明"sideEffects": false，告诉打包工具：本包无副作用，可安全剔除未引用导出 - 使用提供 ESM 版本的第三方库，例如
lodash-es替代lodash，date-fns替代moment - 检查
node_modules中的库是否含"module"字段，这是 ESM 入口标识
做精准的代码分割与懒加载
不把所有 JS 打成一个大文件，而是按需切分，首次访问只加载当前页必需的部分。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 路由级懒加载：用
React.lazy + Suspense或 Vue 的defineAsyncComponent - 组件级拆分：对非首屏模块（如弹窗、图表、编辑器）使用
import()动态导入 - 提取公共依赖：通过
splitChunks将react、vue、lodash-es等稳定库单独打包为vendorschunk - 避免重复打包：多个入口共用的工具函数，应抽离为独立模块并纳入
cacheGroups统一提取
压缩、混淆与运行时瘦身
压缩是最后一步“挤水分”，但前提是前面结构已合理；运行时代码常被忽略，却可能占 bundle 体积近三成。
立即学习“Java免费学习笔记（深入）”；
- 启用
TerserPlugin（Webpack 默认开启），配置drop_console: true和drop_debugger: true移除调试语句 - 生产环境关闭
devtool或设为hidden-source-map，防止 source map 文件泄露或增大体积 - 精简 Webpack Runtime：通过
webpack --json | jq分析 runtime 模块清单，禁用非必要模块（如兼容旧浏览器的CompatGetDefaultExportRuntimeModule） - 移除未使用的 polyfill：用
@babel/preset-env配合targets按需注入，而非全量引入@babel/polyfill
持续验证与定位问题
优化不能凭感觉，必须量化。每次改动后看体积变化是否符合预期。
- 用
webpack-bundle-analyzer生成可视化报告，直观看到每个 chunk 的组成和大小 - Vite 项目可用
vite-bundle-visualizer，效果类似 - 对比构建产物中的
.js文件，重点关注体积突增的模块，检查是否误引整包或未拆分 - Lighthouse 审计中关注 JavaScript boot-up time 和 Unused JavaScript 两项指标
