vue cli3 打包时如何显示打包时间？

Question

打包的时候如何在终端显示打包所花费的时间？

貌似是需要stats配置，但是vue.config.js，如何配置？

Answer 1

题外话， 一个有意思的答案 ： https://stackoverflow.com/que...

个人环境是 Vue-cli3 + Webpack4 @4.28.4 使用 --progress 或者 --profile 时， 控制台并不显示打包时间或进度条等。

倒是使用 vue-cli-service build --profile --json > compilation-stats.json 时， 可以把打包信息保存为一个 compilation-stats.json 文件， 使用这个命令还可以让控制台保持简洁。见官方文档 包含统计数据的文件 。

---

最后使用了 progress-bar-webpack-plugin ， 效果不错。

安装&使用 ：

npm i progress-bar-webpack-plugin chalk -D

const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const chalk = require('chalk');
// ...  
plugins: [  
  new ProgressBarPlugin({
    format: ' build [:bar] ' + chalk.green.bold(':percent') + ' (:elapsed seconds)',
    clear: false
  }),
]  

Answer 2

好吧，自问自答。。。

在packjson script配置里添加 --progress，

比如之前的：

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode online",
    "lint": "vue-cli-service lint",
    "test": "vue-cli-service build --mode testing"
  },
  

修改后：

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode --progress online",
    "lint": "vue-cli-service lint",
    "test": "vue-cli-service build --mode --progress testing"
  },

Answer 3

请用speed-measure-webpack-plugin

Answer 4

补充下：@vue/cli4.5.4

npx vue-cli-service build --report-json

相当于webpack命令加了--progress参数，会在生成的dist文件夹下生成report.json统计报告。