webpack-bundle-analyzer 's direct dependencies. Data on all dependencies, including transitive ones, is available via CSV download.| Name | Version | Size | License | Type | Vulnerabilities |
|---|---|---|---|---|---|
| @discoveryjs/json-ext | 0.5.7 | 17.96 kB | MIT | prod | |
| acorn-walk | 8.3.2 | 9.29 kB | MIT | prod | |
| acorn | 8.11.3 | 122.89 kB | MIT | prod | |
| commander | 7.2.0 | 37.27 kB | MIT | prod | |
| debounce | 1.2.1 | 4.11 kB | MIT | prod | |
| escape-string-regexp | 4.0.0 | 1.97 kB | MIT | prod | |
| gzip-size | 6.0.0 | 2.96 kB | MIT | prod | |
| html-escaper | 2.0.2 | 4.18 kB | MIT | prod | |
| is-plain-object | 5.0.0 | 3.33 kB | MIT | prod | |
| opener | 1.5.2 | 3 kB | (WTFPL OR MIT) | prod | |
| picocolors | 1.0.1 | 5.03 kB | ISC | prod | |
| sirv | 2.0.4 | 6.06 kB | MIT | prod | |
| ws | 7.5.9 | 28.37 kB | MIT | prod |
The Webpack Bundle Analyzer is a plugin and Command Line Interface (CLI) utility for Webpack. It provides a visual, interactive, zoomable treemap that represents the content of your bundled web packs. This gives users the chance to better understand and optimize their code by offering insights into what modules make up most of the bundle, which ones might be included by mistake, and, of course, the real size of bundled modules even in minified versions.
To use the Webpack Bundle Analyzer, you first need to install the package in your project. If you are using npm, you can install it by running npm install --save-dev webpack-bundle-analyzer. Yarn users can install by running yarn add -D webpack-bundle-analyzer. Once you've installed the package, you incorpoarte it as a plugin by adding the code snippet below in your webpack config file.
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin()
]
}
This tells Webpack to activate the analyzer during the bundle generation. Once the process is completed, an interactive treemap visualization of your bundle content will be generated.
The official documentation for the Webpack Bundle Analyzer can be found directly in the README file on the plugin's GitHub repository at https://github.com/webpack-contrib/webpack-bundle-analyzer. You'll find there detailed instructions on how to install and use this tool both as a plugin and a CLI utility, as well as a comprehensive description of the available options and size definitions. The repository not only provides insightful examples but also troubleshooting tips and other useful resources for further learning.
