How to stop vue cli building the "report.html"?

2
votes

Vue CLI v3 always creating "dist/report.html" when building for production. It's a webpack bundle analyzer report.

I can't find a way to stop building that file.

How to avoid creating "report.html" when building Vue CLI 3 app for production?

Here is my package.json scripts:

"scripts": {
    "dev": "npm run serve",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:e2e": "vue-cli-service test:e2e",
    "test:unit": "vue-cli-service test:unit"
  },
3
vue.jsvue-clivue-cli-3
I can't reproduce this. I generated a project and built with vue create tmp1, (choose default options), cd tmp1 && yarn build. What are the steps to create your project and run the build? - tony19
@tony19 I did the same couple of weeks ago - vue create tmp1. The report was always there. Not sure what the hell is going on. - Vasyl Boroviak

3 Answers

9
votes

So far the only way I found to disable it is via vue.config.js:

pluginOptions: {
    webpackBundleAnalyzer: {
        analyzerMode: "disabled"
    }
},

Would be good to know why this thing is always on in Vue CLI 3.

4
votes

I'd like to share some updates as of Vue CLI 3.8.4:

Vue CLI

  • webpack-bundle-analyzer is a dependency of @vue/cli-service@^3.9.0
  • By the default, vue-cli-service build does not generate dist/report.html nor dist/report.json
  • According to Vue CLI documentation:
    • --report generates the dist/report.html
    • --report-json generates the dist/report.json. By the way, this JSON file can quickly become huge
    • Both argument can be cumulated (both report.html and report.json are generated). When I tested, cumulating both arguments make the build time significantly longer

Webpack bundle analyser

The Vue CLI does not automatically run a web server to preview the report files. If you want to the webpack-bundle-analyzer in the standard way, the webpack configuration has to be updated:

// in {root folder}/vue.config.js
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin;

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

Even without the --report nor --report-json, the report.html will always be generated and the 8888 port should be available as http://localhost:8888 will be prompted

0
votes

Make sure that your build npm script does not contain the --report parameter.

"scripts": {
    "serve": "vue-cli-service serve",
    "lint": "vue-cli-service lint",
    "build": "vue-cli-service build",
    "report": "vue-cli-service build --report",
}