How to Use One Vendor Chunk File (Webpack) for Multiple React Projects

Apr 2, 2020 • 5 Minute Read

Introduction

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

In this guide, we will be talking about how to use one vendor chunk file for multiple react projects using DLL. This article assumes some level of familiarity with Webpack and React. Here is a link to get you started.

What is DLL?

DLL (Dynamic-Link Library), originally 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 incremental build speed
Promotes code reuse
Efficient memory usage

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

The following steps will walk you through how to use DLL with webpack.

Steps

Create the DLL bundle

To get started, create a file called vendor.js that points to all commonly used libraries in a 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, 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, you'll need to reference it in the 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 the source code.

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

Vendor file in HTML

You can manually add vendor/vendor.js to the HTML file, but this does not work well with dynamical filenames.

To combat guessing of filenames and other assets that need to be included in the HTML file, you can employ webpack plugins such as html-webpack-plugin and add-asset-html-webpack-plugin.

An updated webpack.config.js will look like this:

          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, its 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 a walkthrough of how you can reuse one vendor chunk file in multiple React projects.

Here are some useful links: