esbuild-loader：用 esbuild 给 Webpack 提速，替换即见效

文章目录esbuild-loader用 esbuild 给 Webpack 提速替换即见效它能替换什么实际怎么用一些要注意的点关于性能预期适合什么场景esbuild-loader用 esbuild 给 Webpack 提速替换即见效最近看 Webpack 构建优化方案又翻到 esbuild-loader 这个项目privatenumber 维护Star 数 3.6k 左右。它干的事情不复杂把 Webpack 构建里最慢的几个环节换成用 esbuild 来跑。我自己经手过几个老项目babel-loader 加 ts-loader 加 Terser 的组合构建动辄几分钟。看到这种工具就忍不住想试。esbuild 用 Go 写的转译和压缩速度本来就比 JS 实现快一个量级esbuild-loader 就是把这能力接到了 Webpack 上。它能替换什么主要是三个位置babel-loader做的 JS 转译可以换成 esbuild-loaderts-loader做的 TypeScript 编译同样能替换Terser 做的代码压缩用 EsbuildPlugin 替代替换的代价不算大。webpack 配置里改个 loader 名字加个 target 选项就行。tsconfig.json 它会自动加载不用额外配置。type checking 它不做需要靠 IDE 或者 fork-ts-checker-webpack-plugin 单独跑。实际怎么用基本的 webpack.config.js 改法匹配 .js、.jsx、.ts、.tsx 文件加一条 rulesloader 写 esbuild-loaderoptions 里指定 target 比如 es2015。原来 babel-loader 和 ts-loader 的规则可以删掉。压缩环节在 optimization.minimizer 里 new 一个 EsbuildPlugin传 target。EsbuildPlugin 还能替代 DefinePlugin 来定义全局常量省掉 DefinePlugin 的解析开销。CSS 压缩也支持。如果 css 用 MiniCssExtractPlugin 抽成独立文件EsbuildPlugin 加个 css: true 就接管 CSS 压缩。如果 CSS 是 style-loader 注入的那就在 loader 链里加一条 esbuild-loader 配 minify: true。一些要注意的点tsconfig 方面esbuild 只支持 tsconfig 的一部分选项。isolatedModules建议开起来避免重新导出类型时报错。emitDecoratorMetadata和 declaration 这种依赖类型信息的特性esbuild 不支持 decorator 重度使用的项目要谨慎。esbuild 不做类型检查根据它的 FAQ 也不会加。需要类型检查就在构建流程里单独跑 tsc --noEmit或者用 fork-ts-checker-webpack-plugin 并行做。EsbuildPlugin 的 define 选项在 eval 类 devtool 下不工作因为 esbuild 没法替换 eval 字符串里的标识符。这种场景要改用 loader 的 defineloader 在 bundling 之前就_transform 完了。esbuild 发版很频繁esbuild-loader 自带的版本未必是最新。想用新版 esbuild可以通过 implementation 选项传进去。不过 esbuild 还没稳定跨版本可能有不兼容自行承担风险。关于性能预期esbuild 单独跑能比 Webpack 快几十倍但 esbuild-loader 跑在 Webpack 的 JS 运行时里是在每个文件上调用 esbuild transform速度上限被 Webpack 卡住了。指望它复现 esbuild 官方 benchmark 那种 100x 提速不现实。实际效果是去掉 babel-loader、ts-loader、Terser 这几个瓶颈之后的速度。具体提速多少看项目体量大项目里几十秒到一两分钟的收益是常见的。适合什么场景老项目想优化构建速度又不想从 Webpack 迁到 Vite 或者 Turbopackesbuild-loader 是个低成本的中间方案。改配置就能上线不动业务代码。新项目的话我更倾向直接用 esbuild 或者 Vite绕开 Webpack 这层。esbuild-loader 的价值在于它让那些没法立刻迁走 Webpack 的项目也能沾一点 esbuild 的光。作者 privatenumber 还维护了 tsxNode 跑 TypeScript 的工具和 instant-mocha都是 Webpack 生态周边的小工具。这个项目持续在更新issues 回得也勤维护状态不用担心。都是 Webpack 生态周边的小工具。这个项目持续在更新issues 回得也勤维护状态不用担心。