Solomon Ayoola

In many projects that uses React, starting up a project might take 20–30 seconds and that is a pretty large window to get distracted and do something else.

In this guide, we will be talking about how to How to Use One Vendor Chunk File (Webpack) for Multiple React Projects using DLL. This article assumes some level of familiarity with Webpack and React.

What is DLL?

DLL(Dynamic-Link Library) original introduced by Microsoft is a library that contains code and data that can be used by more than one program at the same time.

The following are some of the benefits of using DLL:

Increased ncremental build speed
Promotes Code Reuse
Efficient Memory Usage

Webpack provides plugins such as DllPlugin and DllReferencePlugin that allow us to extract the libraries that rarely change and reference them in our project instead of building them every time.

The Following steps will walk us through how to use DLL with Webpack.

Steps

Create the Dll bundle

To get started, we create a file called vendor.js that points to all our commonly used libraries in our project:

require("react");
require("react-dom");
require("react-redux");
require("react-router");
require("react-router-redux");
require("redux");
require("redux-thunk");
require("lodash");
require("moment");

Build the Dll Libraries

To build the Dll libraries, we create a new webpack.config.dll.js file with the following configuration:

const webpack = require("webpack");
const path = require("path");

module.exports = {
  context: __dirname,
  entry: {
    vendor: [path.join(__dirname, "vendor.js")],
  },
  devtool: "#source-map",
  mode: "development",
  output: {
    path: path.join(__dirname, "build"),
    filename: "[name].js",
    library: "[name]",
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, "vendor", "[name]-manifest.json"),
      name: "[name]",
    }),
  ],
};

The configuration above looks fairly straight forward except the DllPlugin which is used in a separate webpack configuration exclusively to create a dll-only-bundle.

DllPlugin creates a manifest.json file, which is then used by DllReferencePlugin to map dependencies.

Running the following command:

webpack --config webpack.config.dll.js

creates creates two files, which are going to be used in the next steps

build/vendor.js
vendor/vendor-manifest.json

Build the project

After creating the dll bundle, we then need to reference it in our webpack.config.js using DllReferencePlugin as shown below:

const path = require("path");
const webpack = require("webpack");

module.exports = {
  // other config...
  plugins: [
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require("./vendor/vendor-manifest.json"),
    }),
  ],
};

The DllReferencePlugin loads the libraries in the manifest file from DllPlugin and references them in our source code.

This also works if we have multiple project, we just need to reference the generated manifest.json file in the webapck.config.js of the respective projects

Vendor file in HTML

We can manually add vendor/vendor.js to our html file, but this does not work well with dynamical filenames.

To combat guessing of filenames and other assets that needs to be included in out html file, we employ the usage of webpack plugins such as html-webpack-plugin and add-asset-html-webpack-plugin.

An updated webpack.config.js will look like:

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const AddAssetHtmlPlugin = require("add-asset-html-webpack-plugin");

module.exports = {
  context: __dirname,
  entry: path.join(__dirname, "app.js"),
  devtool: "#source-map",
  mode: "development",
  output: {
    path: path.join(__dirname, "build"),
    filename: "[name].js",
    chunkFilename: "[name].js",
  },
  plugins: [
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require("./vendor/vendor-manifest.json"),
    }),
    new HtmlWebpackPlugin(),
    new AddAssetHtmlPlugin({
      filepath: path.resolve(__dirname, "./build/vendor.js"),
    }),
  ],
};

While the DllPlugin has many advantages, it's main drawback is that it requires a lot of boilerplate. You can check out autodll-webpack-plugin which serves as a high-level plugin for both the DllPlugin and the DllReferencePlugin, and hides away most of their complexity.

Conclusion

This guide has provided with a walkthrough on we can reuse One Vendor Chunk file in multiple React projects.

Here are some useful links: