前端实战

别让整个组件库都打进包里——从 entry 出口设计开始做 Tree Shaking

组件库 Tree Shaking 失效的根源在于入口文件采用全量导出模式,迫使打包工具加载所有模块。解决方案是将入口拆到组件粒度,为每个组件建立独立入口,配合 package.json 的 exports map 提供友好路径。同时需正确配置 sideEffects 数组标记 CSS 等有副作用文件,避免样式丢失。构建时保持文件结构输出而非单一 bundle,并通过 stats 分析验证优化效果。

前端实战

AI 写代码时,组件库的原子粒度到底该切多细——一个可验证的划分模型

AI 写代码时,组件库的最佳切分标准是“属性收敛度”,即组件属性集合是否形成闭合、无歧义且不与其他组件重叠。通过追踪 Props 变异率,当组件连续版本变异率低于 15% 且无新维度引入时,即达到合理粒度。拆分需遵循“不共享受控状态”原则,将属性控制在 12 个以内,可显著提升 AI 生成代码的准确率,同时通过组合模式保持人类开发体验。