Make Webpack faster

[AwesomestCode]

We're at this point again. Somehow, webpack is again being extremely slow. This is hampering development; I can't iterate quickly/test stuff if I need to wait a minute every time I make a change, no matter how small.

[Saiv46]

What speed-measure-webpack-plugin gives to me

 SMP  ⏱  
General output time took 3 mins, 18.8 secs   

 SMP  ⏱  Plugins
CopyPlugin took 1 min, 7.67 secs
GenerateSW took 9.23 secs
NormalModuleReplacementPlugin took 0.898 secs
HtmlWebpackPlugin took 0.067 secs
ProvidePlugin took 0.001 secs

 SMP  ⏱  Loaders
modules with no loaders took 25.062 secs     
  module count = 1061
html-webpack-plugin took 0.13 secs
  module count = 1

Looks like much time are wasted on I/O, copying files every time.

[Karang]

Indeed, it looks likes it's copying a bunch of useless stuff too. https://github.com/PrismarineJS/prismarine-web-client/blob/master/webpack.common.js#L72 also copy sub-directories while we are only interested in the .png at the root (and maybe some entities and gui textures, but we clearly don't need the many many individual files of the blocks).

[AwesomestCode]

Does it copy the files for dev builds though? I thought those were incremental

[Saiv46]

So, I wrote a little plugin for symlinking directories, now dev builds are faster

 SMP  ⏱
General output time took 57.3 secs

 SMP  ⏱  Plugins
GenerateSW took 14.13 secs
NormalModuleReplacementPlugin took 0.388 secs
HtmlWebpackPlugin took 0.097 secs
SymlinkPlugin took 0.088 secs
CopyPlugin took 0.078 secs
ProvidePlugin took 0.001 secs

 SMP  ⏱  Loaders
modules with no loaders took 15.38 secs
  module count = 703
html-webpack-plugin took 0.043 secs
  module count = 1

[AwesomestCode]

227 was reverted so we're back at square 1

[rom1504]

yep, I reverted because it broke npm start

[zardoy]

Hi all! I investigated new ways to improve build times. Here's what I found:

• CopyPlugin is indeed quite inefficient when copying a large number of files. It can also lead to EMFILE issues on Windows. So I just moved this step to standalone script which skips copying when possible (overall was ~17s on my end).

• Then, by switching minimizer to EsbuildPlugin I could get prod build in 15s.

• After I while I encountered some webpack misconfiguration issues, instead of resolving them I decided to switch to using only esbuild build pipeline. This resulted in a bundle time of 3s (13s with Workbox). I know that esbuild isn't commonly used as a webpack replacement (it doesnt have HMR, incremental build, and chunks support), but I really enjoy fast & stable rebuilds now. I added logging to the browser console to see how fast it takes for full page reload (in my case it takes 3-5s, which is still faster than webpack watch mode). Also, it works well with pnpm. Will look at how it is possible to optimize assets copying...

[rom1504]

switching to esbuild seems good

I think it'd be pretty helpful to first switch to that here

[zardoy]

Hi all! I investigated new ways to improve build times. Here's what I found:

Now, one year later I have investigated new ways to improve build times once again and have completely moved to Rsbuild! After a month of usage, I got feedback from different devs and everyone is really happy as it is performing well on any platform and by almost 2x faster than Vite. Unlike esbuild it supports HMR, code splitting, Webpack plugins, and fast incremental builds.

So in my case compared to esbuild it was:

• initial startup & full build time is almost the same
• rebuild 3-5s -> 0.2-0.5s
• page reload after rebuild 3s -> 0.5s (so in total ~6s -> 1s)
• React components & CSS updated instantly without page reload
• It has a cool overlay UI like Webpack has

I bet Rsbuild will stay the fastest bundler for a few more years. Can't think anymore of something better...