vue-cli-service build --report

[chrisvfritz]

What problem does this feature solve?

There doesn't currently seem to be a way to generate a detailed build report, e.g. with webpack-bundle-analyzer.

What does the proposed API look like?

I think it'd be ideal if vue-cli-service build --report did that.

[chrisvfritz]

@Akryum I think this feature is still probably necessary for CI artifacts, but I also wonder if it might be something that could be built into the UI. 😻

[Akryum]

The plan for the first release of cli-ui is to have a custom view for serve and build with respectively the equivalent of webpack dashboard and webpack analyzer.

[pranavjindal999]

For the time being, we can customize webpack config in vue.config.js and use webpack-bundle-analyzer

Make following changes to your vue.config.js (make one parallel to package.json if not already there)

// ...other requires here
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

module.exports = {
   // ...your other settings here

  chainWebpack: config => {
      // ...your other webpack config overrides here

    if (process.env.NODE_ENV === "production")
        config.plugin("webpack-report")
            .use(BundleAnalyzerPlugin, [{
                // ...webpack-bundle-analyzer options here
            }]);
  }
};

Options for webpack-bundle-analyzer

[manico]

@pranavjindal999 This gives address in use on all ports. Probably bacause of webpack configuration that interferes somehow.

I can only use it like this:

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  configureWebpack: {
    plugins: [
      new BundleAnalyzerPlugin(),
    ],
  },
};

[pranavjindal999]

@manico you can use different port by configuring options of webpack-bundle-analyzer

.use(BundleAnalyzerPlugin, [{
      analyzerPort : 98989
}]);

or simply go for static file instead of server

.use(BundleAnalyzerPlugin, [{
      analyzerMode: 'static'
}]);

Options for webpack-bundle-analyzer

[manico]

No, I tried different ports. It seems that with mutating it does not work. My build command is for lib:

vue-cli-service build --target lib --name vizceral-vue src/index.js

[pranavjindal999]

Try the static mode

[manico]

It works, but it runs three times which is problem for server mode too because it tries listen three times (output for common, umd and umd.min). :D

Anyone knows how to use webpack-bundle-analyzer in this case? Repository: https://github.com/manico/vizceral-vue Command: npm run build

[yyx990803]

Closed via 272ef5e2

[zzlw]

"build": "vue-cli-service build  --report"

✘ andy@andydeMacBook-Pro  ~/Desktop/lenovo_rubiks_cube   master ●  yarn build
yarn run v1.7.0
$ vue-cli-service build  --report

 ERROR  Build failed with errors.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

 configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
       config.plugins= [
              new BundleAnalyzerPlugin()
        ]
    } else {

    }
  }

[rhymes]

@zzlw did you upgrade the packages :D ? Also, you have to comment out that configureWebpack with the bundle analyzer plugin.

I just tried it and it works