{"id":12430,"library":"vue-cli-plugin-webpack-bundle-analyzer","title":"Vue CLI Webpack Bundle Analyzer Plugin","description":"This package provides a Vue CLI plugin that integrates `webpack-bundle-analyzer` into Vue projects, enabling interactive treemap visualizations of webpack output file sizes. It helps developers understand bundle composition and identify large modules efficiently. The current stable version is 4.0.0, which updated the underlying `webpack-bundle-analyzer` dependency to version 4. The plugin primarily operates via `vue.config.js` `pluginOptions` and offers features like separate reports for modern and legacy builds when using Vue CLI's modern mode. It's an essential tool for build optimization in Vue applications, offering a more integrated experience than configuring `webpack-bundle-analyzer` manually. Its release cadence is tied to updates in `webpack-bundle-analyzer` and Vue CLI itself, ensuring compatibility and access to the latest analyzer features.","status":"active","version":"4.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/mrbbot/vue-cli-plugin-webpack-bundle-analyzer","tags":["javascript","vue","cli","webpack","bundle","analyzer"],"install":[{"cmd":"npm install vue-cli-plugin-webpack-bundle-analyzer","lang":"bash","label":"npm"},{"cmd":"yarn add vue-cli-plugin-webpack-bundle-analyzer","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-cli-plugin-webpack-bundle-analyzer","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency for bundle analysis functionality. The plugin wraps and configures this library.","package":"webpack-bundle-analyzer","optional":false}],"imports":[{"note":"Users configure this plugin via the `pluginOptions.webpackBundleAnalyzer` object in `vue.config.js`. Direct JavaScript imports from this package are not typically used by developers.","wrong":"import { WebpackBundleAnalyzerPlugin } from 'vue-cli-plugin-webpack-bundle-analyzer';","symbol":"Configuration options","correct":"module.exports = { pluginOptions: { webpackBundleAnalyzer: { /* options */ } } };"},{"note":"This is an internal webpack-chain rule automatically injected by the plugin when `vue add` is used. Developers do not write this code directly.","symbol":"Webpack chain plugin injection","correct":"config.plugin('webpack-bundle-analyzer').use(BundleAnalyzerPlugin).init(Plugin => new Plugin(options));"},{"note":"For TypeScript users, type inference for `pluginOptions` can be enhanced by using JSDoc type annotations or `tsconfig.json` paths for `@vue/cli-service` types, though the plugin itself doesn't export types for direct import.","symbol":"Type definition (implied)","correct":"/** @type {import('@vue/cli-service').ProjectOptions} */\nmodule.exports = { pluginOptions: { webpackBundleAnalyzer: { /* options */ } } };"}],"quickstart":{"code":"vue add webpack-bundle-analyzer\n\n// Then, in vue.config.js, configure options:\n// vue.config.js\nmodule.exports = {\n  pluginOptions: {\n    webpackBundleAnalyzer: {\n      openAnalyzer: false, // Prevents opening the analyzer report in the browser automatically\n      analyzerMode: 'static', // Generates a static HTML file\n      reportFilename: 'bundle-report.html' // Custom report filename\n    }\n  }\n};\n\n// To generate the report, build your project:\n// npm run build\n// (or yarn build)","lang":"javascript","description":"Installs the plugin and demonstrates basic configuration in `vue.config.js` to disable automatic browser opening and specify output."},"warnings":[{"fix":"Review the `webpack-bundle-analyzer` v4 documentation for changes to plugin options and update your `vue.config.js` configuration accordingly.","message":"Version 4.0.0 updated the underlying `webpack-bundle-analyzer` to version 4. This may introduce breaking changes in the available configuration options for `webpackBundleAnalyzer` in `vue.config.js` or alter report behavior.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Ensure `reportFilename` in your `pluginOptions.webpackBundleAnalyzer` is a full file path if you intend to specify a custom directory or file structure.","message":"In version 2.0.0, the `reportFilename` config option changed how it's handled. It now accepts a full file path rather than just a name. Configurations relying on the older behavior might need adjustment.","severity":"breaking","affected_versions":">=2.0.0 <4.0.0"},{"fix":"Explicitly set `openAnalyzer: false` in your `pluginOptions.webpackBundleAnalyzer` within `vue.config.js` to prevent the browser from opening.","message":"When building for production, `openAnalyzer` defaults to `true`. This can cause a browser window to open automatically after a successful build, potentially disrupting CI/CD pipelines or automated build processes.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"To view `parsed` and `gzipped` sizes, perform a full production build (`npm run build` or `yarn build`).","message":"In development mode, `webpack-bundle-analyzer` can only calculate the `stat` size due to its requirement for physical files to compute `parsed` and `gzipped` sizes. The more accurate `parsed` and `gzipped` sizes are only available after a full production build.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"When using `--modern`, check for both `legacy-your-report.html` and `modern-your-report.html` (or similar, depending on your `reportFilename` setting) in your output directory.","message":"When using Vue CLI's `--modern` flag for builds, the plugin generates two distinct reports, prefixed with `legacy-` and `modern-` respectively. If you're expecting a single report, be aware of this dual output.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure your `vue.config.js` includes `module.exports = { pluginOptions: { webpackBundleAnalyzer: { /* ... */ } } };` and that `webpackBundleAnalyzer` is an object.","cause":"The `pluginOptions` object or `pluginOptions.webpackBundleAnalyzer` is missing or malformed in `vue.config.js`.","error":"Cannot read properties of undefined (reading 'webpackBundleAnalyzer')"},{"fix":"Check `pluginOptions.webpackBundleAnalyzer.openAnalyzer` in `vue.config.js`. Set it to `true` if you want it to open automatically (default for production). Alternatively, manually open the generated HTML report file from your output directory.","cause":"The `openAnalyzer` option is set to `false` or the build environment prevents browser launches.","error":"Analyzer report is not opening in the browser after build."},{"fix":"Verify if you built with `vue-cli-service build --modern`. If not, the report won't be prefixed with `legacy-` or `modern-`. Adjust the filename you are looking for, or ensure your build command includes `--modern` if two reports are desired.","cause":"Attempting to access a report file that wasn't generated, possibly due to not building in modern mode or a mismatch in the `reportFilename` configuration.","error":"Error: ENOENT: no such file or directory, stat 'legacy-report.html'"}],"ecosystem":"npm"}