Webpack has the feature of accepting an array of configuration objects instead of one object. Unfortunately, it comes with a performance penalty - in this article, I'll look at how serious the slow-down can get.

Code

I'll have 10 files in the benchmark, src/a.js, src/b.js, etc. Each of the failed contains:

import $ from "jquery";$(".a").html("a");

Where:

• the letter makes sure there is no weird optimization used thanks to all files having the same content
• jquery makes the build size non-trivial

Simple configuration

There are 2 configuration approaches to be compared.

Object configuration

Here there is 1 object, which defines multiple entry points:

module.exports = {  entry: {    a: "./src/a",    b: "./src/b",    ...  },};

The time output for the build is:

real    0m9,507suser    0m29,622ssys     0m0,438s

It tasks about 9.5s to run the build.

Array

In an array configuration, we have multiple configuration objects returned together. It allows for greater flexibility:

module.exports = [  {    entry: {      a: "./src/a",    },  },  {    entry: {      b: "./src/b",    },  },  ...];

The time output:

real    0m14,622suser    0m48,990ssys     0m0,877s

It took 14.5s to build the same files, about 50% longer.

Build with splitting

The difference becomes even starker when we introduce splitting. Splitting allows webpack to optimize & build only once parts that are used in many places. This optimization is done in the context of each configuration object - so if we use a configuration array, we won't see improvements.

Object

b/webpack.object.js:

     i: "./src/i",     j: "./src/j",   },+  optimization: {+    splitChunks: {+      // include all types of chunks+      chunks: "all",+    },+  }, };

Build times:

real    0m3,074suser    0m5,724ssys     0m0,161s

About 3s build time.

Array

If we had more complex cases for each entry point, we could see some speed improvements, but there is no chance for this simplified example.

webpack.array.js

@@ -3,50 +3,110 @@ module.exports = [       entry: {                               a: "./src/a",                        },                +    optimization: {                   +      splitChunks: {  +        // include all types of chunks                                                                                                                                                +        chunks: "all",+      },+    },   },   {     entry: {       b: "./src/b",     },+    optimization: {+      splitChunks: {+        // include all types of chunks+        chunks: "all",+      },+    },   },...

time output:

real    0m14,904suser    0m48,754ssys     0m1,154s

The build took almost 15s, five times slower than with the object configuration.

Links

• documentation
• test repository

Summary

In this article, we have seen a build time benchmark for 2 formats of webpack configuration. One can understand the array configuration as a shortcut to run multiple, unrelated builds - there will not be many optimizations done by wepback.

ps. I'm building webpack course. It's work-in-progress & currently for free. You can register now: you will get updates as I'll adding new sections and you keep access even when the course will become paid.