vue-cli实现监测webpack打包与启动时长
说在前面最近项目同事反馈webpack打包时间过长,修改一次代码就要编译好久,所以我针对我们的项目进行了打包优化尝试,但是因为vue-cli启动的项目不会显示webpack打包时长,不利于对每次打包时间进行对比分析,所以我们借助vue-cli脚手架实现这一功能。对于一个项目的打包效率,我认为一共分为三个指标:npm run build打包时长npm run serve启动时长每次对代码进行修改后的
说在前面
最近项目同事反馈webpack打包时间过长,修改一次代码就要编译好久,所以我针对我们的项目进行了打包优化尝试,但是因为vue-cli启动的项目不会显示webpack打包时长,不利于对每次打包时间进行对比分析,所以我们借助vue-cli
脚手架实现这一功能。
对于一个项目的打包效率,我认为一共分为三个指标:
npm run build
打包时长npm run serve
启动时长- 每次对代码进行修改后的编译时长
对于npm run serve
以及npm run build
统计的方式不太一样,下面我们会分别介绍。
在此之前,我们需要知道执行build
和serve
命令是执行哪个文件,查看我们的package.json
文件:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
根据上述描述,我们可以找到两个文件与此相关:
build
: {项目地址}\node_modules\@vue\cli-service\lib\commands\build\index.js
serve
: {项目地址}\node_modules\@vue\cli-service\lib\commands\serve.js
统计build时长
根据build
命令执行完成之后打印的内容,可以轻松找到标志打包结束的位置。
// 开始时间
let startTime = '';
async function build(args, api, options) {
startTime = Date.parse(new Date())
...// other code
return new Promise((resolve, reject) => {
...// other code
if (args.target === 'app' && !isLegacyBuild) {
if (!args.watch) {
console.log('结束时间戳:'+Date.parse(new Date()))
console.log('花费时间:'+(Date.parse(new Date())-startTime)/1000+'秒')
done(`Build complete. The ${chalk.cyan(targetDirShort)} directory is ready to be deployed.`)
info(`Check out deployment instructions at ${chalk.cyan(`https://cli.vuejs.org/guide/deployment.html`)}\n`)
} else {
done(`Build complete. Watching for changes...`)
}
}
...// other code
})
}
build函数调用时初始化开始时间,当打包完成后定义结束时间,两个时间相减就可以得到最终时间。
统计serve时长
同理,根据serve
命令执行完成之后打印的内容,也可以定位到启动结束的位置。
let startTime = '';
async function serve(args) {
//开始时间
startTime = Date.parse(new Date());
...// other code
return new Promise((resolve, reject) => {
// log instructions & open browser on first compilation complete
let isFirstCompile = true
compiler.hooks.done.tap('vue-cli-service serve', stats => {
...// other code
console.log(` App running at:`)
console.log(` - Local: ${chalk.cyan(urls.localUrlForTerminal)} ${copied}`)
console.log('结束时间戳:' + Date.parse(new Date()))
console.log('花费时间:' + (Date.parse(new Date()) - startTime) / 1000 + '秒')
...// other code
}
})
}
统计每次重新编译时长
统计每次编译的时长是可以借助统计serve
时长的,此时我们需要做的,就是在保存代码,重新编译时将startTime
重置,这样当重新编译结束时,得到的时间差正好是重新编译的时间,重点就是在哪里去重置这个时间。
可以看到对于编译结束,vue-cli-service
是通过compiler.hooks
来定位到编译结束的,那我们是不是也可以通过钩子函数来定位到重新编译开始呢?
答案是肯定的,有兴趣的可以参考:compiler.hooks网站
let startTime = '';
async function serve(args) {
//开始时间
startTime = Date.parse(new Date());
...// other code
return new Promise((resolve, reject) => {
// log instructions & open browser on first compilation complete
let isFirstCompile = true
compiler.hooks.watchRun.tap('vue-cli-service serve', compiler => {
if (!isFirstCompile) {
console.log('...starting..................')
startTime = Date.parse(new Date());
}
})
compiler.hooks.done.tap('vue-cli-service serve', stats => {
...// other code
console.log(` App running at:`)
console.log(` - Local: ${chalk.cyan(urls.localUrlForTerminal)} ${copied}`)
console.log('结束时间戳:' + Date.parse(new Date()))
console.log('花费时间:' + (Date.parse(new Date()) - startTime) / 1000 + '秒')
...// other code
}
})
}
值得注意的是,在重置开始时间时,我判断了是否为第一次编译,保证不会影响到初始启动的时间。
说到最后
以上。
更多推荐
所有评论(0)