tree shaking 在企业级组件库中的核心是确保用户能安全精准地摇掉未用代码，需从设计源头支持静态分析：模块粒度导出、避免默认大对象、显式声明副作用、多入口esm分发、自动化验证与文档标注。
Tree Shaking 在大型企业级组件库开发中，核心目标不是“让别人能摇掉你的代码”，而是“让别人能安全、稳定、精准地摇掉你没被用到的代码”。这要求从设计源头就为静态分析服务，而非事后补救。
组件按模块粒度导出，拒绝“大对象默认导出”
避免在入口文件中写 export default { Button, Input, Table }。这种写法会让构建工具无法识别单个组件是否被引用——一旦有人 import Components from 'my-lib'，整包就会被保留。
正确做法是每个组件单独定义、单独导出：
- 每个组件存为独立文件：
src/Button/index.tsx、src/Input/index.tsx - 每个文件只做一件事：具名导出组件主体 + 类型 + 常量（如
export const BUTTON_SIZES = [...]） - 提供扁平化入口：
export { Button } from './Button'; export { Input } from './Input';，不聚合在 default 中
显式声明副作用，避免“保守保留”
当用户只导入 import { Button } from 'my-lib'，但你的 Button 组件内部执行了 document.body.classList.add('theme-ready') 或引入了全局样式，构建工具会因不确定影响而保留整个模块——这就是副作用导致的 Tree Shaking 失效。
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
解决方案分两层：
- 在
package.json中设置"sideEffects": ["./dist/styles.css", "./src/polyfills.ts"]，明确列出真正有副作用的文件；其余所有模块默认无副作用 - 将副作用逻辑抽离：样式用
import './Button/style.css'单独引入；全局初始化逻辑移至init()函数，由用户显式调用
提供多入口与类型友好的 ESM 分发结构
企业项目常需兼容不同构建链（Webpack 4/5、Vite、Rspack、Next.js），不能只靠一个 main 字段。
推荐发布结构：
-
"module": 指向未编译的 ES 模块源码（dist/es/index.js），供现代工具直接分析 -
"exports": 精确控制不同导入路径的行为："./button"→./dist/es/Button/index.js"./button/style.css"→./dist/es/Button/style.css"."→./dist/es/index.js（仅聚合导出，不含实现） - 配套生成
.d.ts文件，确保 TypeScript 用户能按需导入类型而不触发 JS 加载
验证与交付保障：把 Tree Shaking 当作 API 合约
对组件库而言，Tree Shaking 不是可选优化，而是对外承诺的体积契约。必须自动化验证：
- CI 中跑最小用例构建：只 import 一个组件，用
rollup-plugin-visualizer或source-map-explorer检查产物是否含其他组件代码 - 生成“摇树覆盖率报告”：统计各组件在模拟业务场景（如只用 Form 相关组件）下的实际打包占比
- 文档中标注每个组件的副作用边界（例如：“Table 支持虚拟滚动，启用时会动态 import react-window”）
