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
orcss
files to copy from the modules folder to thedist
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 |
|