How we used esbuild to reduce our browser extension build times by 90% | 1Password Blog

背景

1Password 内部使用的浏览器扩展代码构建系统逐渐变得越来越慢。在一场公司范围的 Beyond Boundaries 黑客马拉松中，团队决定对其进行全面升级。

挑战

随着团队规模的扩大和新特性的增加，构建时间从 30 秒增加到了惊人的 1 分 10 秒，影响了开发者的工作效率和开发者节奏的进入。

解决方案

1. 数据收集和团队组建：在 hackathon 之前，进行数据收集、项目提案编写、团队成员招募，并对现有构建系统进行初步研究。
2. 现有问题分析：通过使用 OpenTelemetry 工具获取系统高层次的性能信息，发现了长时间的 Webpack 和 Rollup 构建，以及缺乏并行性的小依赖构建等问题。

具体改进措施

• 使用 esbuild 替代 Webpack/Rollup，显著缩短构建时间。
• 在 hackathon 期间，采用 esbuild 作为 Webpack/Rollup 的加载器，大幅提升了性能，特别是对 Rollup 运行时间减少了约 80%。
• 将 esbuild 完全替代 Webpack/Rollup，最终将构建时间减少了约 90%。

后续工作

1. 上线实施：在 hackathon 之后，解决了各种问题，如图像资源打破、缺失 TypeScript 类型检查、生产构建未测试等。
2. 类型检查集成：开发了一个自定义的类型检查插件，实现了与 tsc 的兼容性并提供性能优化。
3. 生产包体积改进：使用 esbuild 的包大小分析工具，优化了包体积，减少了无效的 CJS 构建，并显著减小了生产包的尺寸。

最终结果

• 构建时间从原来的 1 分 10 秒减少到 5 秒，减少了 90% 以上。
• 新系统的监视模式能够在不到一秒的时间内重新打包 TypeScript 文件。
• 内部开发者对新构建系统的满意度显著提升，内部调查显示满意度从 3% 提升到了 95%。