How we reduced our webpack build time by 50%?

Saravanan Ramupillai's photo
Saravanan Ramupillai
·Sep 11, 2021·

1 min read

We at Kissflow running 10+ frontend micro services. Each services has its own CI/CD pipe line. As the each services grows in functionality the build time also increases side by side.

When we started measuring using speed measure webpack plugin we found that babel is taking some time.

babel-loader took 1 min, 7.27 secs
  module count = 629

It is quite reasonable since our service has more modules. But we started to look for any ways to optimise it further. At that time we came across the alternative for Babel and found https://swc.rs/.

A super fast Trans-compiler that claims alternative for babel with almost all the feature babel has. we wanted to check it out by simply switching babel-loader ----> swc-loader in our webpack config.

{
  test: /\.(js|jsx|mjs)$/,
  include: [paths.appSrc],
  loader: "swc-loader"
},

And here is the magic,

swc-loader took 24.78 secs
  module count = 629

This is the huge cut. From 1min 7sec to 27sec.

But unfortunately we could not take it production since we relay on the babel-macros, that SWC does not have. But had a fun playing with SWC.

 
Share this