TypeScript开发OpenTelemetry遥测库如何实现tree-shaking优化打包体积

结论先行 #

从根入口导入TraceClass的写法不一定会全量引入所有模块，是否能实现tree-shaking取决于你的库打包配置、以及使用方的构建工具配置，不需要强制要求用户使用子路径导入。

具体场景说明 #

1. 可以正常tree-shake的情况
   只要同时满足以下条件，就算用户从根入口导入单个类，剩余的metrics、logs模块代码都会被自动摇除，不会进入最终打包产物：

• 你的库输出的是ES Module(ESM) 格式产物，而非CommonJS格式（CommonJS的动态导出逻辑无法被打包工具静态分析，不支持tree-shaking）
• 你在库的package.json中正确配置了sideEffects字段，明确告知打包工具你的库没有额外副作用，例如可以直接配置"sideEffects": false，如果有部分文件存在副作用则单独列出路径即可
• 使用方的构建工具（Webpack/Rollup/Vite等）开启了生产模式下的tree-shaking能力（目前主流脚手架的生产构建默认都会开启）

2. 必须使用子路径导入的情况
   如果存在以下任意一种情况，就需要用户通过子路径mytelemetrylib/trace导入才能保证按需引入：

• 你的库仅输出CommonJS格式产物
• 你的库代码存在大量无法被静态分析的副作用，打包工具无法安全摇除未使用的模块代码

优化建议 #

如果要最大化兼顾易用性和按需引入能力，你可以做以下配置：

• 优先输出ESM格式产物，在package.json中配置"type": "module"，同时用module字段指定ESM入口路径
• 在package.json中新增exports字段，明确子路径的入口映射，避免用户导入子路径时出现解析错误，示例配置如下：

{
  "exports": {
    ".": "./lib/index.ts",
    "./trace": "./lib/trace/index.ts",
    "./metrics": "./lib/metrics/index.ts",
    "./logs": "./lib/logs/index.ts"
  }
}

• 如果你不确定自己的库tree-shaking是否生效，可以用rollup或者webpack的bundle分析工具验证产物内容。

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