feat: vue-cli-service build --report/--report-json

Author: yyx990803

packages/@vue/cli-service/lib/commands/build/index.js

@@ -9,6 +9,14 @@ const buildModes = {
   'wc-async': 'web component (async)'
 }
 
+const modifyConfig = (config, fn) => {
+  if (Array.isArray(config)) {
+    config.forEach(c => fn(c))
+  } else {
+    fn(config)
+  }
+}
+
 module.exports = (api, options) => {
   api.registerCommand('build', {
     description: 'build for production',
@@ -19,6 +27,8 @@ module.exports = (api, options) => {
       '--target': `app | lib | wc | wc-async (default: ${defaults.target})`,
       '--name': `name for lib or web-component mode (default: "name" in package.json or entry filename)`,
       '--no-clean': `do not remove the dist directory before building the project`,
+      '--report': `generate report.html to help analyze bundle content`,
+      '--report-json': 'generate report.json to help analyze bundle content',
       '--watch': `watch for changes`
     }
   }, async (args) => {
@@ -43,8 +53,8 @@ module.exports = (api, options) => {
         modern: true,
         clean: false
       }), api, options)
-    } else {
       delete process.env.VUE_CLI_MODERN_BUILD
+    } else {
       return build(args, api, options)
     }
   })
@@ -83,6 +93,7 @@ async function build (args, api, options) {
   }
 
   const targetDir = api.resolve(args.dest || options.outputDir)
+  const isLegacyBuild = args.target === 'app' && options.modernMode && !args.modern
 
   // resolve raw webpack config
   process.env.VUE_CLI_BUILD_TARGET = args.target
@@ -101,14 +112,9 @@ async function build (args, api, options) {
   // apply inline dest path after user configureWebpack hooks
   // so it takes higher priority
   if (args.dest) {
-    const applyDest = config => {
+    modifyConfig(webpackConfig, config => {
       config.output.path = targetDir
-    }
-    if (Array.isArray(webpackConfig)) {
-      webpackConfig.forEach(applyDest)
-    } else {
-      applyDest(webpackConfig)
-    }
+    })
   }
 
   // grab the actual output path and check for common mis-configuration
@@ -118,40 +124,59 @@ async function build (args, api, options) {
       : webpackConfig
   ).output.path
 
-  if (args.watch) {
-    webpackConfig.watch = true
-  }
-
   if (!args.dest && actualTargetDir !== api.resolve(options.outputDir)) {
     // user directly modifies output.path in configureWebpack or chainWebpack.
     // this is not supported because there's no way for us to give copy
     // plugin the correct value this way.
-    console.error(chalk.red(
+    throw new Error(
       `\n\nConfiguration Error: ` +
       `Avoid modifying webpack output.path directly. ` +
       `Use the "outputDir" option instead.\n`
-    ))
-    process.exit(1)
+    )
   }
 
   if (actualTargetDir === api.service.context) {
-    console.error(chalk.red(
+    throw new Error(
       `\n\nConfiguration Error: ` +
       `Do not set output directory to project root.\n`
-    ))
-    process.exit(1)
+    )
   }
 
-  if (args.clean) {
-    await fs.remove(targetDir)
+  if (args.watch) {
+    modifyConfig(webpackConfig, config => {
+      config.watch = true
+    })
   }
 
   // Expose advanced stats
   if (args.dashboard) {
     const DashboardPlugin = require('../../webpack/DashboardPlugin')
-    ;(webpackConfig.plugins = webpackConfig.plugins || []).push(new DashboardPlugin({
-      type: 'build'
-    }))
+    modifyConfig(webpackConfig, config => {
+      config.plugins.push(new DashboardPlugin({
+        type: 'build'
+      }))
+    })
+  }
+
+  if (args.report || args['report-json']) {
+    const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
+    modifyConfig(webpackConfig, config => {
+      const bundleName = args.target !== 'app'
+        ? config.output.filename.replace(/\.js$/, '-')
+        : isLegacyBuild ? 'legacy-' : ''
+      config.plugins.push(new BundleAnalyzerPlugin({
+        logLevel: 'warn',
+        openAnalyzer: false,
+        analyzerMode: args.report ? 'static' : 'disabled',
+        reportFilename: `${bundleName}report.html`,
+        statsFilename: `${bundleName}report.json`,
+        generateStatsFile: !!args['report-json']
+      }))
+    })
+  }
+
+  if (args.clean) {
+    await fs.remove(targetDir)
   }
 
   return new Promise((resolve, reject) => {
@@ -171,7 +196,7 @@ async function build (args, api, options) {
           targetDir
         )
         log(formatStats(stats, targetDirShort, api))
-        if (args.target === 'app' && !(options.modernMode && !args.modern)) {
+        if (args.target === 'app' && !isLegacyBuild) {
           if (!args.watch) {
             done(`Build complete. The ${chalk.cyan(targetDirShort)} directory is ready to be deployed.\n`)
           } else {

packages/@vue/cli-service/lib/webpack/DashboardPlugin.js

@@ -9,7 +9,7 @@ const webpack = require('webpack')
 const { IpcMessenger } = require('@vue/cli-shared-utils')
 const { analyzeBundle } = require('./analyzeBundle')
 
-const ID = 'DashboardPlugin'
+const ID = 'vue-cli-dashboard-plugin'
 const ONE_SECOND = 1000
 const FILENAME_QUERY_REGEXP = /\?.*$/
 

packages/@vue/cli-service/package.json

@@ -65,6 +65,7 @@
     "vue-loader": "^15.2.0",
     "vue-template-compiler": "^2.5.16",
     "webpack": "^4.8.2",
+    "webpack-bundle-analyzer": "^2.13.1",
     "webpack-chain": "^4.8.0",
     "webpack-dev-server": "^3.1.4",
     "webpack-merge": "^4.1.2",

yarn.lock

@@ -2071,6 +2071,14 @@ bcrypt-pbkdf@^1.0.0:
   dependencies:
     tweetnacl "^0.14.3"
 
+bfj-node4@^5.2.0:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/bfj-node4/-/bfj-node4-5.3.1.tgz#e23d8b27057f1d0214fc561142ad9db998f26830"
+  dependencies:
+    bluebird "^3.5.1"
+    check-types "^7.3.0"
+    tryer "^1.0.0"
+
 big.js@^3.1.3:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
@@ -2561,6 +2569,10 @@ [email protected]:
   version "2.24.0"
   resolved "https://registry.yarnpkg.com/check-more-types/-/check-more-types-2.24.0.tgz#1420ffb10fd444dcfc79b43891bbfffd32a84600"
 
+check-types@^7.3.0:
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/check-types/-/check-types-7.4.0.tgz#0378ec1b9616ec71f774931a3c6516fad8c152f4"
+
 chokidar@^1.6.0, chokidar@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
@@ -2859,7 +2871,7 @@ [email protected]:
   version "2.11.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
 
-[email protected], [email protected], commander@^2.11.0, commander@^2.12.1, commander@^2.12.2, commander@^2.15.1, commander@^2.6.0, commander@^2.9.0, commander@~2.15.0:
+[email protected], [email protected], commander@^2.11.0, commander@^2.12.1, commander@^2.12.2, commander@^2.13.0, commander@^2.15.1, commander@^2.6.0, commander@^2.9.0, commander@~2.15.0:
   version "2.15.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.15.1.tgz#df46e867d0fc2aec66a34662b406a9ccafff5b0f"
 
@@ -4880,6 +4892,10 @@ fileset@^2.0.2:
     glob "^7.0.3"
     minimatch "^3.0.3"
 
+filesize@^3.5.11:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.6.1.tgz#090bb3ee01b6f801a8a8be99d31710b3422bb317"
+
 fill-range@^2.1.0:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.4.tgz#eb1e773abb056dcd8df2bfdf6af59b8b3a936565"
@@ -5578,6 +5594,13 @@ growly@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
 
+gzip-size@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-4.1.0.tgz#8ae096257eabe7d69c45be2b67c448124ffb517c"
+  dependencies:
+    duplexer "^0.1.1"
+    pify "^3.0.0"
+
 handle-thing@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-1.2.5.tgz#fd7aad726bf1a5fd16dfc29b2f7a6601d27139c4"
@@ -8926,7 +8949,7 @@ [email protected]:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/only/-/only-0.0.2.tgz#2afde84d03e50b9a8edc444e30610a70295edfb4"
 
-opener@~1.4.0:
+opener@^1.4.3, opener@~1.4.0:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/opener/-/opener-1.4.3.tgz#5c6da2c5d7e5831e8ffa3964950f8d6674ac90b8"
 
@@ -11516,6 +11539,10 @@ trim-right@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
 
+tryer@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.0.tgz#027b69fa823225e551cace3ef03b11f6ab37c1d7"
+
 ts-jest@^22.4.6:
   version "22.4.6"
   resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-22.4.6.tgz#a5d7f5e8b809626d1f4143209d301287472ec344"
@@ -12294,6 +12321,23 @@ webidl-conversions@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
 
+webpack-bundle-analyzer@^2.13.1:
+  version "2.13.1"
+  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-2.13.1.tgz#07d2176c6e86c3cdce4c23e56fae2a7b6b4ad526"
+  dependencies:
+    acorn "^5.3.0"
+    bfj-node4 "^5.2.0"
+    chalk "^2.3.0"
+    commander "^2.13.0"
+    ejs "^2.5.7"
+    express "^4.16.2"
+    filesize "^3.5.11"
+    gzip-size "^4.1.0"
+    lodash "^4.17.4"
+    mkdirp "^0.5.1"
+    opener "^1.4.3"
+    ws "^4.0.0"
+
 webpack-chain@^4.6.0, webpack-chain@^4.8.0:
   version "4.8.0"
   resolved "https://registry.yarnpkg.com/webpack-chain/-/webpack-chain-4.8.0.tgz#06fc3dbb9f2707d4c9e899fc6250fbcf2afe6fd1"