Tree Shaking 能直接减小首页 JS 文件体积，缩短下载、解析和执行时间，显著提升首屏渲染（FCP）；需使用 ES 模块语法、按需引入、启用生产模式、声明副作用并验证效果。
Tree Shaking 能直接减小首页 JS 文件体积，从而缩短下载、解析和执行时间——尤其对首屏渲染（FCP）影响显著。它不改变运行逻辑，只剔除“写了但没用”的代码，效果立竿见影。
确保项目使用 ES 模块语法
Tree Shaking 依赖静态 import/export 分析，CommonJS（require/module.exports）无法被识别为可摇动模块。
- 所有自定义工具函数、组件、工具库都用 export 显式导出，用 import { xxx } 按需引入
- 避免
import _ from 'lodash'，改用import { debounce } from 'lodash-es'（lodash-es是专为 Tree Shaking 优化的版本） - 检查第三方库是否提供 ESM 入口（如查看其
package.json中的"module"字段）
启用生产模式并配置构建工具
开发环境默认关闭 Tree Shaking，必须在构建时明确启用。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- Webpack：设置
mode: 'production'，并开启optimization.usedExports: true - Vite / Next.js / Vue CLI：默认已开启，但需确认未手动覆盖
build.minify或禁用treeshake - 确保没有全局副作用干扰判断，例如在模块顶层写
console.log()或修改window属性
检查并声明模块副作用
有些文件虽无 export，但执行即产生效果（比如 polyfill、CSS 注入），打包工具会保守保留它们——这会阻碍 Tree Shaking。
立即学习“Java免费学习笔记（深入）”；
- 在项目根目录
package.json中添加"sideEffects": false（表示所有模块都无副作用） - 若部分文件有副作用（如
src/styles/index.css），则写成："sideEffects": ["*.css", "*.scss"] - 避免在工具函数文件里做 DOM 操作或发起请求——这类逻辑应抽离到调用处
验证是否生效
光靠配置不够，得亲眼看到“叶子掉了”。
- 用
webpack-bundle-analyzer或 Vite 的build.report插件生成体积分析报告 - 搜索未使用的导出名（如
utils.js中的formatDate），看它是否出现在最终 bundle 里 - 对比开启前后首页 JS 文件大小（特别是
main.xxx.js），典型优化幅度在 20%–50%
