feat: polish build output

Author: yyx990803

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

@@ -0,0 +1,67 @@
+module.exports = function formatStats (stats, dir, api) {
+  const fs = require('fs')
+  const zlib = require('zlib')
+  const chalk = require('chalk')
+  const ui = require('cliui')({ width: 60 })
+
+  const json = stats.toJson({
+    hash: false,
+    modules: false,
+    chunks: false
+  })
+
+  let assets = json.assets
+    ? json.assets
+    : json.children.reduce((acc, child) => acc.concat(child.assets), [])
+
+  const seenNames = new Map()
+  const isJS = val => /\.js$/.test(val)
+  const isCSS = val => /\.css$/.test(val)
+  const isMinJS = val => /\.min\.js$/.test(val)
+  assets = assets
+    .filter(a => {
+      if (seenNames.has(a.name)) {
+        return false
+      }
+      seenNames.set(a.name, true)
+      return isJS(a.name) || isCSS(a.name)
+    })
+    .sort((a, b) => {
+      if (isJS(a.name) && isCSS(b.name)) return -1
+      if (isCSS(a.name) && isJS(b.name)) return 1
+      if (isMinJS(a.name) && !isMinJS(b.name)) return -1
+      if (!isMinJS(a.name) && isMinJS(b.name)) return 1
+      return b.size - a.size
+    })
+
+  function formatSize (size) {
+    return (size / 1024).toFixed(2) + ' kb'
+  }
+
+  function getGzippedSize (asset) {
+    const filepath = api.resolve(`dist/${asset.name}`)
+    const buffer = fs.readFileSync(filepath)
+    return formatSize(zlib.gzipSync(buffer).length)
+  }
+
+  function makeRow (a, b, c) {
+    return `  ${a}\t    ${b}\t ${c}`
+  }
+
+  ui.div(
+    makeRow(
+      chalk.cyan.bold(`File`),
+      chalk.cyan.bold(`Size`),
+      chalk.cyan.bold(`Gzipped`)
+    ) + `\n\n` +
+    assets.map(a => makeRow(
+      /js$/.test(a.name)
+        ? chalk.green(`${dir}/${a.name}`)
+        : chalk.blue(`${dir}/${a.name}`),
+      formatSize(a.size),
+      getGzippedSize(a)
+    )).join(`\n`)
+  )
+
+  return `${ui.toString()}\n\n  ${chalk.gray(`Images and other types of assets omitted.`)}\n`
+}

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

@@ -33,9 +33,11 @@ module.exports = (api, options) => {
 
     api.setMode(args.mode)
 
+    const fs = require('fs')
     const chalk = require('chalk')
     const rimraf = require('rimraf')
     const webpack = require('webpack')
+    const formatStats = require('./formatStats')
     const {
       log,
       done,
@@ -79,31 +81,24 @@ module.exports = (api, options) => {
             return reject(err)
           }
 
-          if (!args.silent) {
-            // TODO polish output
-            process.stdout.write(stats.toString({
-              hash: false,
-              timings: false,
-              colors: true,
-              modules: false,
-              children: api.hasPlugin('typescript') || args.target !== 'app',
-              chunks: false,
-              chunkModules: false
-            }) + '\n\n')
-          }
-
           if (stats.hasErrors()) {
             return reject(`Build failed with errors.`)
           }
 
-          if (!args.silent && args.target === 'app') {
-            done(`Build complete. The ${chalk.cyan(options.outputDir)} directory is ready to be deployed.\n`)
-            if (options.baseUrl === '/') {
-              info(`The app is built assuming that it will be deployed at the root of a domain.`)
-              info(`If you intend to deploy it under a subpath, update the ${chalk.green('base')} option`)
-              info(`in your project config (${chalk.cyan(`vue.config.js`)} or ${chalk.green('"vue"')} field in ${chalk.cyan(`package.json`)}).\n`)
+          if (!args.silent) {
+            log(formatStats(stats, options.outputDir, api))
+            if (args.target === 'app') {
+              done(`Build complete. The ${chalk.cyan(options.outputDir)} directory is ready to be deployed.\n`)
+              if (
+                options.baseUrl === '/' &&
+                // only log the tips if this is the first build
+                !fs.existsSync(api.resolve('node_modules/.cache'))
+              ) {
+                info(`The app is built assuming that it will be deployed at the root of a domain.`)
+                info(`If you intend to deploy it under a subpath, update the ${chalk.green('baseUrl')} option`)
+                info(`in your project config (${chalk.cyan(`vue.config.js`)} or ${chalk.green('"vue"')} field in ${chalk.cyan(`package.json`)}).\n`)
+              }
             }
-            // TODO info(`You can view more deployment tips at ???`)
           }
 
           // test-only signal

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

@@ -30,6 +30,7 @@
     "cache-loader": "^1.2.0",
     "case-sensitive-paths-webpack-plugin": "^2.1.1",
     "chalk": "^2.3.0",
+    "cliui": "^4.0.0",
     "copy-webpack-plugin": "^4.3.1",
     "css-loader": "^0.28.9",
     "escape-string-regexp": "^1.0.5",