This tutorial shows you how to improve build times when working with Webpack as a dependency for build tools using the DLL plugin.

As a JavaScript developer, you’ve probably had ample opportunity to come across Webpack, whether it be while bundling frontend assets with React or transpiling some TypeScript Node.js code.

Most of the time you never have to interact with Webpack directly. Rather, you interact with Webpack indirectly as a dependency for build tools. But if you develop these build tools, or manage your own Webpack configuration, this tutorial will help you improve build times.

We’ll be using the DLL plugin, which Webpack promises “to drastically improve load times” in its documentation.

How does it work?

The DLL plugin creates two things:

• A manifest.json file
• A bundle of modules that are not frequently changed

Without the DLL plugin enabled, Webpack compiles all the files in your code base regardless of whether it’s been modified. This has the effect of making compilation times longer than necessary.

But there is a way to tell Webpack not to bother recompiling libraries that hardly change: for example, libraries in your node_modules folder.

This is where the DLL plugin comes in. It bundles code you specify as rarely changing (e.g., vendor libraries), and never compiles them again, drastically improving build times.

The DLL plugin does this by creating a manifest.json file. This file is used to map import requests to the bundled module. When an import request is made to a module from other bundles, Webpack checks if there is an entry in the manifest.json file to that module. If so, it skips building that module.

Overview

The DLL plugin should be used for bundles of code that hardly get changed, like your vendor bundles. As such, you’ll need a separate Webpack configuration file.

For this tutorial, we’ll use two Webpack configurations. These will be named webpack.config.js and webpack.vendor.config.js.

webpack.config.js will be your primary configuration for non-vendor code; i.e., code that is modified often.

webpack.vendor.config.js will be used for your unchanging bundles, like libraries in node_modules.

To use the DLL Plugin, two plugins must be installed in the appropriate Webpack config:

DllReferencePlugin → webpack.config.js

DllPlugin → webpack.vendor.config.js

We’ll be using Webpack version 4.x, as 5.x is still in beta. However, they both share similar configurations.

Configure the DLL plugin (webpack.vendor.config.js)

The DLL plugin has the following compulsory options:

name:

This is the name of the DLL function. It can be called anything. We will call this vendor_lib.

path:

this is the path of the outputed manifest json file. It must be an absolute path. We will store this in a folder called “build” in the root directory. The file will be called vendor-manifest.json.

To specify the path, we shall use path.join like so:

path.join(__dirname, 'build', 'vendor-manifest.json')

In the webpack.vendor.config.js file, make sure output.library is the same as the DLL plugin name option.

Include as many entry points as you want. In this example, I’ve included some really heavy-weight libraries. Your output folder doesn’t matter while using this plugin.

So here’s how webpack.vendor.config.js looks now:

var webpack = require('webpack')
const path = require('path');
module.exports = {
    mode: 'development',
    entry: {
        vendor: ['lodash', 'react', 'angular', 'bootstrap', 'd3', 'jquery', 'highcharts', 'vue']
    },
    output: {
        filename: 'vendor.bundle.js',
        path: path.join(__dirname, 'build'),
        library: 'vendor_lib'
    },
    plugins: [
        new webpack.DllPlugin({
            name: 'vendor_lib',
            path: path.join(__dirname, 'build', 'vendor-manifest.json')
        })
    ]
}

Configure the DllReferencePlugin (webpack.config.js)

#webpack #javascript #web-development #programming #developer