组件库按需加载与 Tree Shaking
组件库如何实现按需加载(lazy load on demand)？babel-plugin-import 的原理是什么？ES Module + Tree Shaking 方案相比有什么优势？sideEffects 字段如何配置？
回答
苦行僧
方案1: babel-plugin-import——编译时转换 import { Button } from 'ui-lib' 为 import Button from 'ui-lib/es/button' + import style。方案2: ES Module Tree Shaking——直接 import，配合 module 入口 + sideEffects:['*.css']。Webpack/Rollup/Vite 自动摇除未用导出。优势: 零配置、原生支持。sideEffects: false(所有模块无副作用)；数组指定有副作用文件如 ['dist/*.css']。CSS 有副作用(导入生效)，必须在 sideEffects 中保留。