Skip to content

CodeCoupler Webpack Optimize Bundle Size

To use external libraries, install them with npm install PACKAGENAME, then use them with import or require in your code. This will include the libraries in your bundle. For web applications, this may be a negligible inconvenience, but for libraries, it could be fatal.

Always analyze your bundle and check if any dependencies have been included. You should always consider excluding them from your bundle. To analyze your bundle run:

npm run analyze

Externalize with Simple Configuration

CodeCoupler Webpack uses the Plugin CodeCoupler Webpack Externals Plugin for this, which makes the entire configuration process extremely easy. Simply add the necessary entries to the externals configuration option for each imported package to exclude them from your bundle 1.

This configuration option is an array of objects for each package you want to externalize. Each object needs the following properties:

  • module: The name of the package (corresponds to the package name).
  • global: Optional. The name of theglobal variable to access the library provided by the package.
  • entries: Optional. String or an array of strings. Names of js or css files to copy from the modules folder to the dist folder and inject links to them into your HTML files.
  • copy: Optional. String or array of strings. Globs to copy from the modules folder to the dist folder. This can be used to copy assets like fonts.

Example

Here is an example that you can use after installing the packages jquery, bootstrap and @fortawesome/fontawsome-free to copy and inject into all libraries, stylesheets and other assets.

First install the packages:

npm i jquery
npm i bootstrap
npm i @fortawesome/fontawsome-free

Then extend the CodeCoupler Webpack configuration in your webpack.config.js with the property externals:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const ccWebpack = require("@codecoupler/cc-webpack");
module.exports = (env) =>
  ccWebpack(
    {
      externals: [
        {
          module: "jquery",
          global: "jQuery",
          entries: ["dist/jquery.min.js"]
        },
        {
          module: "bootstrap",
          entries: [
            "dist/css/bootstrap.min.css",
            "dist/js/bootstrap.bundle.min.js"
          ]
        },
        {
          module: "@fortawesome/fontawesome-free",
          entries: "css/all.min.css",
          copy: ["webfonts/"]
        }
      ]
    },
    env,
    {}
  );

With this configuration the packages will not be included in your bundle. The assets defined in entries and copy will be copied into your dist/vendor folder, and links to these assets will be injected into your HTML files.

Try this out by running the following command and inspecting the results in the dist directory:

npm run build:dev

You can also build a version where the modules are not copied and the links are injected to point to a CDN. Try this:

npm run build:dev:cdn

Read more details here: The configuration reference

  1. Until version 3, the configuration must be placed in a file called webpack.externals.config in the project's root directory. In this file the array must be exported with module.exports = []. ↩