为什么仅使用部分功能时，整个设计系统模块都被打包到Next.js页面中？

核心原因汇总 #

• 设计系统产物规范不支持tree shaking：如果设计系统打包输出的是CommonJS格式，而非ES Module，打包器默认无法执行摇树优化，会全量引入所有代码。
• 引入写法不符合摇树要求：全量导入写法如import * as DesignSystem from '你的设计系统包名'会导致打包器无法识别未使用的导出内容，直接全量打包。
• 设计系统存在未声明的副作用：如果设计系统入口文件直接引入全量样式、全局注册组件、挂载全局变量等，打包器会判定这些代码不能移除，会全量保留。另外如果设计系统的package.json没有正确配置sideEffects字段声明副作用文件，也会导致摇树失效。
• Next.js配置异常：next.config.js里如果配置了错误的transpilePackages规则、禁用了生产环境优化、或者配置了错误的alias/external规则，都会影响摇树逻辑。
• 业务代码使用CommonJS导入：如果用require语法引入设计系统内容，也无法触发tree shaking。

具体排查路径 #

• 先确认设计系统的基础配置：查看设计系统包的package.json，确认是否有"type": "module"声明，产物是否包含ES Module版本，是否配置了sideEffects字段明确无副作用或者指定有副作用的样式文件路径。
• 排查业务代码引入方式：将现有全量引入写法改为精准引入测试，比如把import { Button } from '你的设计系统包名'改成import Button from '你的设计系统包名/button'，重新执行打包分析，看体积是否下降，如果下降说明是摇树失效的问题。
• 检查next.config.js配置：确认没有禁用生产环境优化，transpilePackages配置正确包含你的设计系统包，没有多余的alias、external规则干扰打包逻辑。
• 最小场景复现排查：新建空白Next.js项目，只引入设计系统的单个组件后打包分析，如果还是全量引入，说明问题出在设计系统本身，否则就是现有业务项目的配置问题。
• 从分析产物反查入口：点开npm run build:analyze生成的分析页面，找到设计系统的文件，逐层往上找引入链，定位到触发全量引入的具体代码位置。

内容的提问来源于stack exchange，提问作者jojo