Vue-cli: update webpack-bundle-analyzer to ^4.1.0

[genie-youn]

What problem does this feature solve?

Hi teams 😄
Thanks for making awesome tool.

Into the subject..

webpack-bundle-analyzer 4.1.0 was released a few days ago: https://github.com/webpack-contrib/webpack-bundle-analyzer/compare/v3.8.0...v4.1.0

In this update, the bfj module was replaced by a custom json writer, which resulted in many performance improvements.
(ref PR)

In my case, I use a large scale Vue Application in vue-cli, and when I changed the version, the performance was greatly improved as follows.

before

after

I've seen that there is no break change between versions, so what do you think of upgrading the version of webpack-bundle-analyzer to 4.1.0?

I prepared a pull request.

Thanks you 😄

What does the proposed API look like?

Update webpack-bundle-analyzer to ^4.1.0

[IndexXuan]

@genie-youn Hi Bro，how to use smp(speed-measure-plugin) with vue-cli ?

[genie-youn]

@IndexXuan
Hi, I tried these things.

1. in configureWebpack

vue.config.js

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();

module.exports = {
  configureWebpack: smp.wrap({
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }),
  //...
}

2. in chainWebpack

You must delete preload plugin. speed-measure-webpack-plugin crash with PreloadPlugin. It seems bug in speed-measure-webpack-plugin

vue.config.js

\module.exports = {
  //...
  chainWebpack: config => {
    // *Must delete these plugins*
    config.plugins.delete('preload');
    config.plugins.delete('prefetch');
    // GraphQL Loader
    config.module
      .rule('graphql')
      .test(/\.graphql$/)
      .use('graphql-tag/loader')
        .loader('graphql-tag/loader')
        .end()
      // Add another loader
      .use('other-loader')
        .loader('other-loader')
        .end()

    config
      .plugin('html')
      .tap(args => {
          return [/* new args to pass to html-webpack-plugin's constructor */]
      })

    const wrappedConfig = smp.wrap(config.toConfig());
    config.toConfig = () => wrappedConfig;
  }
}

3. Modify vue-cli source in your project's node_modules

Some plugins that appended by vue-cli, (e.g. webpack-bundle-analyzer) speed-measure-webpack-plugin can't collect metric. becuase these plugins append after adopt speed-measure-webpack-plugin.

So to measure the speed of these plugins, we directly modify code of vue-cli.

Similarly, should delete preload plugin.

this point at node_modules/@vue/cli-service/libs/commands/build/index.js

if (args.clean) {
  await fs.remove(targetDir)
}

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();

webpackConfig = smp.wrap(webpackConfig);

return new Promise((resolve, reject) => {
  webpack(webpackConfig, (err, stats) => {

It would be great if vue-cli support option. (like vue-cli-service build --measure-speed).
But the first thing to do is fix the speed-measure-webpack-plugin bug, so I'm looking at that part.

[IndexXuan]

@genie-youn Thanks a lot. long time to find the solution.

so @sodatea , will smp be the built in function in Vue CLI, like https://umijs.org/zh-CN/docs/env-variables#speed_measure
e.g. SPEED_MEASURE=1 yarn build or yarn build --speed-measure