vue-cli3项目npm run build --report生成分析图

vue-cli3下的typescript项目，在build时想要生成分析报告进行性能优化。
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"
  },
...

在依赖中也在新建工程时执行vue create 项目名时就已经加载了webpack-bundle-analyzer，
执行命令如下：

 

npm run build --report

发现此命令和npm run build的结果一样，dist目录页没有生成report.html

问题解析

那问题就出在npm run build --report这个命令上了。
我们知道使用package.json下的script命令，我们可以使用npm run加命令名的方式调用。
比如想要执行vue-cli-service build --mode prod命令，就执行npm run build命令来快速调用。
那么我们来使用echo做一个例子：(echo 可以显示后面跟着的信息）
在script下写一个命令如下：

 

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

执行命令：

 

PS D:\project\typescript_demo> npm run test

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

说明npm run test实际上等于echo hello
然后执行命令

 

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
再执行命令

 

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

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

说明npm run test后附加参数传递给script如果直接加--参数名是不起作用的。
再次执行命令

 

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，在参数前需要加--，这是npm传递参数给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

所以执行命令

 

npm run build -- --report

打开dist目录，上面就是所需要的report.html拉！
当然，直接在script中的build命令中修改，增加--report也是可以的，而且一劳永逸：

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

执行npm run build一样的效果。

 

 

在浏览器打开，开始优化之旅：