核心是确保构建工具准确识别未使用代码并安全删除，需语法、库支持与构建配置三者协同：优先选用ESM库、正确导入、声明副作用、验证效果。
核心是让构建工具能准确识别哪些代码真没被用，然后安全删掉。这不单靠“写对 import”，而是语法、库支持、构建配置三者必须咬合。
选对库的 ESM 版本再导入
很多体积问题不是你写的错，而是库本身不支持静态分析。CommonJS 包（比如普通 lodash、moment）哪怕你写了 import { debounce }，Babel 或 Webpack 也可能把它转成 require，Tree Shaking 就彻底失效。
- ✅ 优先用原生 ESM 库：lodash-es 替代 lodash；date-fns 替代 moment；dayjs 替代 moment；Element Plus 的 es 入口替代完整版
- ✅ 检查 package.json：确认有 "type": "module" 或 "module": "dist/index.esm.js" 字段
- ❌ 避免这种写法：import _ from 'lodash' 或 import * as antd from 'antd'——整包锁死，摇不动
用具名导入，禁用默认/星号导入
导入方式直接决定构建器能不能“看到”你到底用了什么。默认导出或命名空间导入会遮蔽实际使用路径，导致保守保留。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- ✅ 推荐：import { throttle, debounce } from 'lodash-es' —— 工具能精准标记只保留这两个函数
- ✅ 子路径导入也有效（需库支持）：import throttle from 'lodash-es/throttle'
- ❌ 少用：import _ from 'lodash-es'（即使 ESM 版，default 导出仍是对象大杂烩）
- ❌ 避免：import * as utils from './utils' 后又没访问 utils.xxx —— 部分工具无法推断，整模块保留
声明副作用，防止误删关键文件
有些第三方模块没有导出，但执行了全局逻辑（如注入 CSS、注册组件、打补丁）。构建器若不知道它有副作用，会当成“死代码”一并删掉，导致样式丢失或功能异常。
立即学习“Java免费学习笔记（深入）”；
- ✅ 在项目根目录 package.json 中加："sideEffects": ["*.css", "*.scss", "src/polyfill.js"]
- ✅ 若用 Element Plus / Ant Design 等 UI 库，确保 CSS 是显式引入：import 'element-plus/theme-chalk/index.css'，并列在 sideEffects 白名单里
- ❌ 不要写 "sideEffects": false 却漏掉样式文件——界面可能直接白屏
- ❌ 避免在库入口文件顶层执行副作用：ElementPlus.install() 应由使用者调用，而非自动运行
验证是否真生效，别靠感觉
优化后体积没变？很可能某处卡住了。必须检查产物，而不是相信配置开了就一定起效。
- ✅ Webpack：加 --stats=verbose 或用 webpack-bundle-analyzer 查看依赖图，确认未用函数是否出现在 chunk 中
- ✅ Vite：运行 vite build --report 生成 report.html，聚焦 node_modules 占比异常高的模块
- ✅ 手动验证：在入口加一行 import { unusedHelper } from './utils'，构建前后对比体积——不变说明已被摇掉；变大说明它原本没被剔除，得回头查原因
