How To Use The Dll Plugin to Speed Up Your Webpack Build

Lighten the load

I started using Webpack for small personal projects, and absolutely loved it. However, when I used it for the first time on a major ongoing project, I came across some issues that I hadn’t seen in small projects, without clear solutions easily found on Google.

I call this experience the uncanny valley of new tool adoption, where the internet is flooded with “Getting started” guides, and a couple testimonies by the major software company that released the tool about how powerful it is, but a dearth of examples on how to use it effectively in your midsize practical projects, i.e. your job. So, a hopefully practical example of how to not wait 30 seconds and counting every time you recompile your build.

The Dll plugin for Webpack is the major option in performance improvement, compared to the more minor changes you can make to your config to shave off seconds. It lets you split your code into two or more sections, ones you don’t change during development, like node modules and libraries, and ones you are actively working on. This allows you to compile the unchanging bits once, then only recompile the stuff you’re working on as you go.

The Actual Example

To demo the Dll plugin, I have forked a simple React starter project and added some large dependencies, like Highcharts, and additional bundles.

Time to compile one bundle before plugin: 235ms

Time to compile ten bundles before plugin: 1409ms

To add the Dll plugin, add a new webpack config for your unchanging bundles (I’ve called mine library.webpack.config.js) and configure it to have as many entries as you like, the same as any other webpack config. You can split your dependencies however makes sense for your project, for this example I’m putting them all in one “library” bundle. Set the output destination to a separate folder in your build directory.

// library.webpack.config.js
const path = require('path');
const webpack = require('webpack');

module.exports = {
   context: process.cwd(),
   resolve: {
      extensions: ['.js', '.jsx', '.json', '.less', '.css'],
      modules: [__dirname, 'node_modules']
   },

   entry: {
      library: [
         'react',
         'redux',
         'jquery',
         'd3',
         'highcharts',
         'bootstrap',
         'angular'
      ]
   },
   output: {
      filename: '[name].dll.js',
      path: path.resolve(__dirname, './build/library'),
      library: '[name]'
   }
};

Then, add the Dll plugin to the config:

// library.webpack.config.js
plugins: [
   new webpack.DllPlugin({
      name: '[name]',
      path: './build/library/[name].json'
   })
]

This creates a json config file at build/library/library.json that will tell your main webpack config where to find the precompiled library code bundle. Run weback — config library.webpack.config.js to compile the library bundle. This should generate a library.dll.js file and a library.json file in your build directory.

Next, use the precompiled bundle in your main webpack bundle, by including a plugin like so:

// webpack.config.js
plugins: [
  new webpack.DllReferencePlugin({
    context: __dirname,
    manifest: require('./build/library/library.json')
  })
]

To put it all together, add a script to create the library bundle once at the beginning of each development session, then just recompile your code when you make changes:

// package.json
"prestart": "webpack --config library.webpack.config.js",
"start": "node server.js"

Then, to actually utilize your library bundle in the browser, add a script tag to your html to load it before your other proprietary bundles, something like this (Exact path depends on your other webpack settings):

<!--index.html-->
<script src='/build/library/library.dll.js'></script>

Time to compile one bundle with plugin: 149ms

Time to compile ten bundles with plugin: 714ms

That’s it! All changes to add Dll plugin in this commit.