vue-cli plugin to visualize size of webpack output files
npm install vue-cli-plugin-webpack-bundle-analyzer> vue-cli plugin to visualize size of webpack output files
Uses webpack-bundle-analyzer to create an interactive treemap visualization of the contents of all your bundles.
!webpack bundle analyzer zoomable treemap
Add a webpackBundleAnalyzer object to your pluginOptions in vue.config.js:
``js`
module.exports = {
pluginOptions: {
webpackBundleAnalyzer: {
openAnalyzer: false
}
}
};
You can use any of these settings.
When building your Vue project for production, the analyzerMode will be set to static. By default, the generated web page will be opened in your browser. This can be changed by setting openAnalyzer to false as shown above.
When using the --modern flag to build your app, this plugin will create 2 different reports: one for your legacy build and one for your modern build. Your report filename will be prefixed with legacy- and modern- respectively.
In development, you'll only be able to use the stat size due to webpack-bundle-analyzer requiring physical files to calculate parsed and gzipped sizes.
`sh`
vue add webpack-bundle-analyzer
The following rule is automatically added to your Vue config behind the scenes. All you need to do to activate this plugin is run the above command in your project's directory.
`js
config
.plugin("webpack-bundle-analyzer")
.use(BundleAnalyzerPlugin)
.init(Plugin => new Plugin(options));
``