背景
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一样的效果。
在浏览器打开，开始优化之旅：
