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一样的效果。

 

 

在浏览器打开,开始优化之旅:

 

 

Logo

前往低代码交流专区

更多推荐