核心是让每个导出可被独立识别与安全剔除：需按功能粒度拆分文件、仅用命名导出、入口仅做静态转发，并在package.json中声明ESM入口和sideEffects字段。
要在组件库开发中让 Tree Shaking 达到极致裁剪效果，核心不是“写了 export”，而是让每个导出都可被独立识别、安全剔除。这需要从模块组织方式、导出语法、入口设计三方面统一约束，避免打包工具因结构模糊而保守保留整块代码。
按功能粒度拆分文件，每个导出自成模块
不要把多个组件或工具函数塞进一个文件再默认导出对象。那样即使只用 Button，整个 utils.js 也可能被保留。
- 每个组件/工具单独一个文件：如 Button.vue、debounce.ts、request.ts
- 每个文件只做一件事，且只用命名导出：export const Button = defineComponent(...)，不写 export default { Button, Icon }
- 禁止在组件文件顶层执行副作用（如自动注册全局指令、注入样式），这类逻辑必须封装进函数并显式调用
入口文件仅做“转发”，不聚合、不加工
主入口（如 index.ts）不应新建对象、不合并导出、不运行逻辑，只做静态路径映射。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 正确写法：export { Button } from './components/Button'; export { debounce } from './utils/debounce';
- 错误写法：const components = { Button }; export default components; 或 export * from './components';（可能触发命名空间保留）
- 如果需提供“一键全量导入”，单独建 index.full.ts，与默认入口物理隔离，避免污染 ESM 分析链
package.json 显式声明 ESM 入口与无副作用
下游项目能否摇掉未用组件，取决于它能否准确找到你的纯净 ESM 版本，并信任你不会偷偷执行副作用。
立即学习“Java免费学习笔记（深入）”；
- 在 package.json 中设置："module": "dist/index.js"（ESM 构建产物）和 "exports": { ".": { "import": "./dist/index.js" } }
- 添加 "sideEffects": false；若存在真实副作用（如全局 CSS 文件），只列出具体路径："sideEffects": ["./dist/style.css"]
- 确保构建产物中没有 require、module.exports 或 Babel 注入的 helper，这些会破坏静态分析
验证裁剪是否真正生效
不靠猜测，用体积报告定位残留点。
- 构建后运行 npx rollup-plugin-visualizer（Rollup）或 vite build --report（Vite），打开 treemap 查看某个未引入的组件是否仍占体积
- 在测试项目中只写 import { Button } from 'your-lib'，检查最终 bundle 是否包含 Input、Table 等无关代码
- 临时加一行 import { Skeleton } from 'your-lib'，对比构建体积变化——不变说明已成功裁剪
