如何利用vue-cli監(jiān)測webpack打包與啟動時長
說在前面
最近項目同事反饋webpack打包時間過長,修改一次代碼就要編譯好久,所以我針對我們的項目進行了打包優(yōu)化嘗試,但是因為vue-cli啟動的項目不會顯示webpack打包時長,不利于對每次打包時間進行對比分析,所以我們借助vue-cli腳手架實現(xiàn)這一功能。
對于一個項目的打包效率,我認為一共分為三個指標:
- npm run build打包時長
- npm run serve啟動時長
- 每次對代碼進行修改后的編譯時長
對于npm run serve以及npm run build統(tǒng)計的方式不太一樣,下面我們會分別介紹。
在此之前,我們需要知道執(zhí)行build和serve命令是執(zhí)行哪個文件,查看我們的package.json文件:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
根據(jù)上述描述,我們可以找到兩個文件與此相關:
build : {項目地址}\node_modules\@vue\cli-service\lib\commands\build\index.js
serve: {項目地址}\node_modules\@vue\cli-service\lib\commands\serve.js
統(tǒng)計build時長
根據(jù)build命令執(zhí)行完成之后打印的內容,可以輕松找到標志打包結束的位置。
// 開始時間
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函數(shù)調用時初始化開始時間,當打包完成后定義結束時間,兩個時間相減就可以得到最終時間。

統(tǒng)計serve時長
同理,根據(jù)serve命令執(zhí)行完成之后打印的內容,也可以定位到啟動結束的位置。
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
}
})
}

統(tǒng)計每次重新編譯時長
統(tǒng)計每次編譯的時長是可以借助統(tǒng)計serve時長的,此時我們需要做的,就是在保存代碼,重新編譯時將startTime重置,這樣當重新編譯結束時,得到的時間差正好是重新編譯的時間,重點就是在哪里去重置這個時間。
可以看到對于編譯結束,vue-cli-service是通過compiler.hooks來定位到編譯結束的,那我們是不是也可以通過鉤子函數(shù)來定位到重新編譯開始呢?
答案是肯定的,有興趣的可以參考:compiler.hooks網(wǎng)站
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
}
})
}

值得注意的是,在重置開始時間時,我判斷了是否為第一次編譯,保證不會影響到初始啟動的時間。
總結
到此這篇關于如何利用vue-cli監(jiān)測webpack打包與啟動時長的文章就介紹到這了,更多相關vue-cli監(jiān)測webpack打包時長內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue.js中使用微信掃一掃解決invalid signature問題(完美解決)
這篇文章主要介紹了vue.js中使用微信掃一掃解決invalid signature問題(推薦),本文通過實例代碼給出解決方法,代碼簡單易懂非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04
vue3簡單封裝input組件和統(tǒng)一表單數(shù)據(jù)詳解
最近有一個需求是很多個表單添加,編輯等操作,會用到很多input輸入框,所以就想把input進行簡單封裝,這篇文章主要給大家介紹了關于vue3簡單封裝input組件和統(tǒng)一表單數(shù)據(jù)的相關資料,需要的朋友可以參考下2022-05-05
解決el-select數(shù)據(jù)量過大的3種方案
最近做完一個小的后臺管理系統(tǒng),快上線了,發(fā)現(xiàn)一個問題,有2個select的選項框線上的數(shù)據(jù)量是1w+,而測試環(huán)境都是幾百的,所以導致頁面直接卡住了,本文給大家總結了3種方法,需要的朋友可以參考下2023-09-09
如何使用vue slot創(chuàng)建一個模態(tài)框的實例代碼
這篇文章主要介紹了如何使用vue slot創(chuàng)建一個模態(tài)框,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
ElementUI+命名視圖實現(xiàn)復雜頂部和左側導航欄
本文主要介紹了ElementUI+命名視圖實現(xiàn)復雜頂部和左側導航欄,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2022-04-04

