Parallelize Webpack Builds

The webpack build in one of my larger projects takes over 5 minutes to complete. I found an easy way to cut the build-time: running multiple builds in parallel!

Disclaimer: This works because my webpack config has several independent entry points. My webpack config looks like this:

The top-level JS entry points are contained in the folder src/init:

src/ └── init/ ├── entry1.js ├── entry2.js └── entry3.js

The entryPoints object would be:

{ entry1: "src/init/entry1.js", entry2: "src/init/entry2.js", entry3: "src/init/entry3.js" }

Webpack generates a bundle out of each of these files and dumps them into the dist folder, appending min.js to each bundle name.

src/ ├── init/ │ ├── entry1.js │ ├── entry2.js │ └── entry3.js dist/ ├── entry1.min.js ├── entry2.min.js └── entry3.min.js

The secret sauce

Instead of each bundle making the others wait for it to finish compiling, I split up the workload and fire off multiple webpack processes in parallel. I set the number of splits to 4. Increasing it further didn't appear to improve build times much.

Please note that my npm script and the webpack config use ES6. They will need babel_node to run:

Results

My build time came down from 5m 2.364s to 2m 13.105s. Nearly 50% improvement is pretty impressive for a 10 minute hack, eh?