Author: Stefano Frasca
In Madisoft it’s been a long time since we use Webpack to manage the project bundling and organize the bundles of our static resources.
Going to migrate the Webpack versions up to the current 4.20.2 it was necessary to have a tool that would allow us to:
- Analyze the real dependencies that were included in our bundles
- Check expensive dependencies in terms of space or unnecessary dependencies
This tool has been identified in the Webpack Bundle Analyzer that scans the files of the build and, through a convenient interactive treemap interface, shows the dependencies inside each bundle.
The dimensions of each bundle, as well as of each dependency, are shown in terms of parsed kb: for better and more adequate representation in the production environment it is better to use the gzip’s dimensions. (see options.defaultSize)
How can we use it in our project? Simple: we can use it in CLI configuration (if we have a Webpack json stats file), or add it in our webpack plugin’s section. I will show you the second chance.
Add it in your dev dependencies (using npm, yarn or what you want)
|
1 2 |
npm install --save-dev webpack-bundle-analyzer yarn add webpack-bundle-analyzer -D |
Add in your Webpack plugin’s section
|
1 2 3 4 |
... const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); const opt = {}; plugins.push(new BundleAnalyzerPlugin(opt)); |
It is possible to customize the output, the options of the views, the generation of the stats files through the options. You can check them thoroughly here: among the most important options for our workflow i can mention analyzerMode, through which you choose the analyzer output mode, and defaultSize with which you control the module size to show.
From version 3 of the plugin has been added the possibility to search through the dependencies to find more easily in the treeview and in the result list the deps that interest us.
WebpackBundleAnalizer helped us to optimize our bundles: thanks to the intuitive interface and the domain knowledge it was possible to use, for many wasteful and infrequent dependencies, the lazy loading mechanism offered by Webpack… we will talk about this maybe in the next episodes!
