Meteor + Webpack integration - Tree-shaking, Secured code and more

I have upgraded the simpletasks-webpack app to Meteor version 3.0.1.

Additionally, I added esbuild-loader as a replacement for babel, providing significant build performance improvements. Similar results using swc-loader.

On my machine, using the latest simpletasks-webpack, I observed a 50%-80% gain with a simple change to the webpack configuration. This change doesn’t affect the meteor build and server start times, as it only impacts the app build process, on which is responsible webpack.

Before (babel)

Client

Cold start: 620ms
Incremental change #1: 97ms
Incremental change #2: 33ms

Server

Cold start: 535ms
Incremental change #1: 366ms
Incremental change #2: 59ms

After (esbuild)

Client

Cold start: 154ms (75% faster)
Incremental change #1: 44ms (54% faster)
Incremental change #2: 17ms (48% faster)

Server

Cold start: 95ms (82% faster)
Incremental change #1: 75ms (79% faster)
Incremental change #2: 20ms (66% faster)


If you’re using a modern bundler to build your app code while having Meteor inject logic from atmosphere packages, consider replacing babel with esbuild or SWC. The project I am working on has seen impressive benefits from this change.

This is just an alternative approach and won’t be integrated into Meteor core due to its incompatibility with specific Meteor bundle capabilities. This consensus was discussed in other thread, where you can also understand more the approach discussed here. As a core solution for reducing build times, we will still explore various approaches. However, this approach explained here may be sufficient for many users.

6 Likes