Skip to content

CodeCoupler Webpack Optimize Bundle Size

To use external libraries you have to install them with npm install PACKAGENAME and use them with import or require in your code. Doing this the libraries will be included in your bundle. For web applications, this may be a negligible inconvenience, but for libraries, could it be fatal.

Always analyse your bundle and check if any dependency have been included. You should always consider to exclude them from your bundle.

Externalize with Simple Configuration

CodeCoupler Webpack use for this the Plugin CodeCoupler Webpack Externals Plugin, which makes the whole configuration extremely easy. Just add the necessary entries to the webpack.cc-externals.config in your project root directory for every imported package, to exclude them from your bundle.

The module webpack.externals.js exports an array of objects for each package you want to externalize. Each object need the following properties:

  • module: The name of the package (corresponds to the package name).
  • global: Optional. The global variable name to access the library provided by the package.
  • entries: Optional. String or array of strings. Name of js or css files to copy from the modules folder to the dist folder and inject links to them into your HTML files. Not relevant if you write libraries.
  • 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. Not relevant if you write libraries.

Read more details here: The configuration reference

Automatic Copying Assets and Injection

With this configuration the packages will not be included into your bundle.

For a web application the assets defined in entries and copy will be copied into your dist/vendor folder and your HTML files will be injected with links to these assets. Furthermore you can build a version where the modules will not copied and the injected links will point to a CDN.

For a library you should consider to install these packages as peer dependencies and give the end user instructions on which packages they should install themselves.

Finally, a few important points to consider:

Note: Included Externals Configuration

CodeCoupler Webpack Externals Plugin provides packages for prepared externals configurations. The packages are published in the scope @cc-external. Do not use these packages if you write a libary as dependecies!

Furthermore do not include the webpack.externals.js into your package!

Otherwise this would lead to very strict requirements for the user of the library. They will not be able to use their own versions of the external libraries and resources may be loaded into their application that are not needed.

Note: Using Vue

Pay particular attention to whether you are importing parts of the Vue library. The library is pre-installed with CodeCoupler Webpack and this is easily overlooked (because you do not need to install the package). A statement such as import { toRaw } from "vue" can result in the Vue library being included in the bundle. This leads to complications if the target project use its own version of Vue.

To exclude the Vue library from the build result. Add the following to the file webpack.externals.js:

1
2
3
4
5
module.exports = [{
  module: "vue",
  global: "Vue",
  entries: ["dist/vue.runtime.global.prod.js"]
}];