3 ms·

I do a lot of typescript/JavaScript work. One thing I did recently was spend a day converting several older projects from webpack to esbuild. The build times we

I do a lot of typescript/JavaScript work. One thing I did recently was spend a day converting several older projects from webpack to esbuild. The build times were cut from 45s average to less than two seconds. This tool is insanely fast at bundling and compiling typescript. I’m just as wary of JavaScript tooling fatigue as the next person, but I truly wish I’d swapped to esbuild sooner. It boggles my mind how much time I’ve wasted in the last few years just waiting for webpack to build.

llbbdd 5y ago
Do you miss anything from Webpack? My latest project is ts/tsx heavy and I've spent way more time than I'd like just keeping incremental builds under a minute, and it's not doing anything crazy in that time either.
- nozzlegear 5y ago
  The only thing that tripped me up was the difference between esbuild's `externals` and webpack's `externals`. In webpack you can use the externals config to skip bundling a module and instead get it from another source such as a Node module or, in my case, from a global variable in the browser. In esbuild, an external module is only for the first situation (getting a module from Node), so I was confused about how to get the desired behavior in esbuild. Luckily I found a plugin that does exactly what I want: [0]. Other than that, I'm pretty darn satisfied with what esbuild can do out of the box. I don't use any other plugins except global externals. I don't need a typescript -> javascript plugin like webpack; I don't need a css plugin like webpack; I don't need esnext transpilers or whatever. It's all just built in to esbuild. Honestly I don't find myself missing anything from webpack. So far esbuild is just better in every way (for myself at least). [0]: https://github.com/fal-works/esbuild-plugin-global-externals https://github.com/fal-works/esbuild-plugin-global-externals
hijodelsol 5y ago
I almost did the exact same thing today but with Vite [0]. Initial build time of a pretty large project is now 930ms instead of 20s and build time was reduced from over a minute to about 10s. Really excited to experience the performance that native ESM enable! [0]: https://vitejs.dev https://vitejs.dev

llbbdd 5y ago

Do you miss anything from Webpack? My latest project is ts/tsx heavy and I've spent way more time than I'd like just keeping incremental builds under a minute, and it's not doing anything crazy in that time either.

nozzlegear 5y ago
The only thing that tripped me up was the difference between esbuild's `externals` and webpack's `externals`. In webpack you can use the externals config to skip bundling a module and instead get it from another source such as a Node module or, in my case, from a global variable in the browser. In esbuild, an external module is only for the first situation (getting a module from Node), so I was confused about how to get the desired behavior in esbuild. Luckily I found a plugin that does exactly what I want: [0]. Other than that, I'm pretty darn satisfied with what esbuild can do out of the box. I don't use any other plugins except global externals. I don't need a typescript -> javascript plugin like webpack; I don't need a css plugin like webpack; I don't need esnext transpilers or whatever. It's all just built in to esbuild. Honestly I don't find myself missing anything from webpack. So far esbuild is just better in every way (for myself at least). [0]: https://github.com/fal-works/esbuild-plugin-global-externals https://github.com/fal-works/esbuild-plugin-global-externals

hijodelsol 5y ago

I almost did the exact same thing today but with Vite [0]. Initial build time of a pretty large project is now 930ms instead of 20s and build time was reduced from over a minute to about 10s. Really excited to experience the performance that native ESM enable! [0]: https://vitejs.dev https://vitejs.dev