如何利用vue-cli監(jiān)測webpack打包與啟動時長

更新時間：2022年02月22日 11:10:31 作者：Run_youngman

這篇文章主要給大家介紹了關(guān)于如何利用vue-cli監(jiān)測webpack打包與啟動時長的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

說在前面

最近項目同事反饋webpack打包時間過長，修改一次代碼就要編譯好久，所以我針對我們的項目進行了打包優(yōu)化嘗試，但是因為vue-cli啟動的項目不會顯示webpack打包時長，不利于對每次打包時間進行對比分析，所以我們借助vue-cli腳手架實現(xiàn)這一功能。

對于一個項目的打包效率，我認(rèn)為一共分為三個指標(biāo)：

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ù)上述描述，我們可以找到兩個文件與此相關(guān)：

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í)行完成之后打印的內(nèi)容，可以輕松找到標(biāo)志打包結(jié)束的位置。

// 開始時間
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('結(jié)束時間戳：'+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ù)調(diào)用時初始化開始時間，當(dāng)打包完成后定義結(jié)束時間，兩個時間相減就可以得到最終時間。

統(tǒng)計serve時長

同理，根據(jù)serve命令執(zhí)行完成之后打印的內(nèi)容，也可以定位到啟動結(jié)束的位置。

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('結(jié)束時間戳：' + Date.parse(new Date()))
            console.log('花費時間：' + (Date.parse(new Date()) - startTime) / 1000 + '秒')
            ...// other code
        }
    })
}

統(tǒng)計每次重新編譯時長

統(tǒng)計每次編譯的時長是可以借助統(tǒng)計serve時長的，此時我們需要做的，就是在保存代碼，重新編譯時將startTime重置，這樣當(dāng)重新編譯結(jié)束時，得到的時間差正好是重新編譯的時間，重點就是在哪里去重置這個時間。

可以看到對于編譯結(jié)束，vue-cli-service是通過compiler.hooks來定位到編譯結(jié)束的，那我們是不是也可以通過鉤子函數(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('結(jié)束時間戳：' + Date.parse(new Date()))
            console.log('花費時間：' + (Date.parse(new Date()) - startTime) / 1000 + '秒')
            ...// other code
        }
    })
}