Nitrate Processed Mincemeat

    vue-cli-plugin-webpack-bundle-analyzer

    4.0.0 • Public • Published

    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

    Configuration

    Add a webpackBundleAnalyzer object to your pluginOptions in vue.config.js:

    module.exports = {
      pluginOptions: {
        webpackBundleAnalyzer: {
          openAnalyzer: false
        }
      }
    };

    You can use any of these settings.

    Production

    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.

    Modern Mode

    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.

    Known Caveats

    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.

    Installing in an Already Created Project

    vue add webpack-bundle-analyzer

    Injected webpack-chain Rule

    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.

    config
      .plugin("webpack-bundle-analyzer")
      .use(BundleAnalyzerPlugin)
      .init(Plugin => new Plugin(options));

    Install

    npm i vue-cli-plugin-webpack-bundle-analyzer

    DownloadsWeekly Downloads

    22,691

    Version

    4.0.0

    License

    MIT

    Unpacked Size

    3.67 kB

    Total Files

    4

    Last publish

    Collaborators

    • mrbbot