Last week, I tried esbuild again, it works out of box and is truly fast. A cold start only takes 16ms to bundle a demo app. I suggest our community keep a close eye on the bundler, and there are a bunch of things we can take advantage of esbuild.
I think having in as a recommended bundler would be good. Being able to remove currying at link time would be super interesting. Would this mean anything for ReScript’s uncurrying convention?
I had relatively good success migrating my pretty convoluted webpack build over - the only thing I need to finish migrating is UMD support. I had to run the output through terser to get the filesizes down further, but the whole pipeline was still half the time of webpack.
I suspect a lot of bigger projects will get 80-90% of the way with esbuild, but the last 10% will all be completely different features. But I don’t think anyone was talking about making esbuild the only bundler, so that’s maybe not too much of an issue.
it would be interesting to explore a ReScript template that comes with rescript-react and a baseline esbuild configuration. That’s probably the starting point we’d want to recommend when starting out with React (besides other templates like rescript-next-template etc).
Webpack / CRA never felt like the right default to get started imo, since it never really reflected the fast compilation philosophy of ReScript.
I think Vite (which you already mentioned in another post) would be ideal for such a template. It provides great DX, uses esbuild for development builds and Rollup for production bundling.
yeah, definitely gonna cover vite as well (since it’s extremely simple to set up actually). Just thinking about tighter ReScript integration opportunities when going one level deeper.
This tweet makes me wonder if Evan You is considering replacing Rollup with esbuild. Vite uses esbuild for other things anyway.
That said, with the esbuild bundle times (16ms is 60fps territory, right?), serving ES modules might actually be slower, so Vite dev server is an antipattern
I’ve been very happy with esbuild for my (relatively small) projects. For one project, I rely on some webpack features, but I recently swapped babel-loader and terser for esbuild-loader, which feels like it gives me the best of both worlds.
Most of the time, I use esbuild as just a bundler like rollup. My most complex project is the one that uses webpack (with esbuild-loader). The bulk of the site is built with Eleventy and uses the Eleventy dev server. (It’s not an SPA.) I run webpack in watch mode alongside Eleventy during development. It doesn’t do hot reloading (where state etc. is saved between reloads), but that’s mainly because I’m using Eleventy’s built-in reloader which is very basic.
My team switched to esbuild in September 2020, around the time you first posted about it on Twitter. The moment we saw it we were sold; we had been using fastpack in dev and rollup in production, now we use esbuild for both. Our needs are fairly simple, though.
I do this too, but only in production. Dev builds are complete in a few hundred milliseconds
Our app is a bit more complex with server rendering etc., so we use Next.js. I do think they are exploring esbuild as well instead of Webpack (but it will probably be a pretty long journey if they switch).
I am also really interested in removing currying at link time! Is that something that is exclusively possible with ESBuild, I guess this might be possible with a webpack plugin as well?
I wonder how do u guys setup rescript+esbuild+ watcher? so that you don’t need to refresh2 haha eyy is webpack dev server just work? or there’s esbuild-like version of webpackdevserver.
I maintain a medium/large hobby project (large for me, at least) that was bootstrapped with create-react-app. I recently got fed up with how slow it was, so I ejected and hacked out the parts I didn’t need. One of the first things I did was replace Babel with esbuild. Building & testing immediately went 40-50% faster. I can finally run the dev server without turning my PC into a space heater!
It’s still using webpack for bundling and the dev server, but it uses esbuild-loader now instead of babel-loader. Similarly, my Jest config uses esbuild-jest to transform JS files.
So far, it’s behaved exactly like it did before, except faster. I haven’t run into any situations where esbuild isn’t adequate.
I will note that the hot reloading hasn’t been reliable, but it was causing issues for me before ejecting too. I just haven’t had the energy or need to try to improve it or figure out what’s wrong yet.
May be interesting to spin this out into a separate issue but I’ve had similar issues.
The most likely reason is that more than a React component is being exported from the compiled (.bs.js) files. Interface (.resi) scripts can help to limit exports to React components. This is still something I have to test in a smaller repo so I can reliably reproduce it.
I know this is an old topic but Vite was recently released which uses esbuild under the hood. I’ve been playing around with it and it’s super nice.
I used this template to startup up and Rescript project:
