背景

vue-cli3下的typescript項(xiàng)目奕锌，在build時(shí)想要生成分析報(bào)告進(jìn)行性能優(yōu)化。
package.json命令如下：

"scripts": {
    "dev": "vue-cli-service serve --mode dev",
    "serve": "vue-cli-service serve --mode dev",
    "build": "vue-cli-service build --mode prod",
    "lint": "vue-cli-service lint --fix",
    "test:unit": "vue-cli-service test:unit",
    "analyz": "vue-cli-service build --mode analyz",
    "dll": "webpack -p --progress --config ./dll.config.js"
  },
...

在依賴中也在新建工程時(shí)執(zhí)行vue create 項(xiàng)目名時(shí)就已經(jīng)加載了webpack-bundle-analyzer，
執(zhí)行命令如下：

npm run build --report

發(fā)現(xiàn)此命令和npm run build的結(jié)果一樣，dist目錄頁(yè)沒有生成report.html

問題解析

那問題就出在npm run build --report這個(gè)命令上了。
我們知道使用package.json下的script命令蔫巩，我們可以使用npm run加命令名的方式調(diào)用。
比如想要執(zhí)行vue-cli-service build --mode prod命令，就執(zhí)行npm run build命令來快速調(diào)用圆仔。
那么我們來使用echo做一個(gè)例子：(echo 可以顯示后面跟著的信息）
在script下寫一個(gè)命令如下：

"scripts": {
    "test": "echo hello"
  },

執(zhí)行命令：

PS D:\project\typescript_demo> npm run test

> typescript_demo1@0.1.0 test D:\project\typescript_demo
> hello

說明npm run test實(shí)際上等于echo hello
然后執(zhí)行命令

PS D:\project\typescript_demo> npm run test Jake

> typescript_demo1@0.1.0 test D:\project\typescript_demo
> hello "Jake"

說明npm run test Jake垃瞧，等于echo hello Jake
再執(zhí)行命令

PS D:\project\typescript_demo> npm run test --Jack

> typescript_demo1@0.1.0 test D:\project\typescript_demo
> hello

說明npm run test后附加參數(shù)傳遞給script如果直接加--參數(shù)名是不起作用的。
再次執(zhí)行命令

PS D:\project\typescript_demo> npm run test -- Jake

> typescript_demo1@0.1.0 test D:\project\typescript_demo
> hello "Jake"

說明npm run test -- --Jake荧缘，等于echo hello --Jake皆警，在參數(shù)前需要加--，這是npm傳遞參數(shù)給script的方法截粗。
輸入npm help run查詢具體信息如下：
As of npm@2.0.0, you can use custom arguments when executing scripts. The special option -- is used by getopt to delimit the end of the options. npm will pass all the arguments after the -- directly to your script:

npm run test -- --grep="pattern"

The arguments will only be passed to the script specified after npm run and not to any pre or post script.

同理：
說明npm run build -- --report信姓，等于echo hello --report

所以執(zhí)行命令

npm run build -- --report

打開dist目錄，上面就是所需要的report.html拉绸罗！
當(dāng)然意推，直接在script中的build命令中修改，增加--report也是可以的珊蟀，而且一勞永逸：

  "scripts": {
    "build": "vue-cli-service build --mode prod --report"
  },

執(zhí)行npm run build一樣的效果菊值。

image.png

在瀏覽器打開，開始優(yōu)化之旅：

image.png