快捷導(dǎo)航

如何利用vue-cli監(jiān)測(cè)webpack打包與啟動(dòng)時(shí)長(zhǎng)

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

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

說(shuō)在前面

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

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

npm run build打包時(shí)長(zhǎng)
npm run serve啟動(dòng)時(shí)長(zhǎng)
每次對(duì)代碼進(jìn)行修改后的編譯時(shí)長(zhǎng)

對(duì)于npm run serve以及npm run build統(tǒng)計(jì)的方式不太一樣，下面我們會(huì)分別介紹。

在此之前，我們需要知道執(zhí)行build和serve命令是執(zhí)行哪個(gè)文件，查看我們的package.json文件：

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
},

根據(jù)上述描述，我們可以找到兩個(gè)文件與此相關(guān)：

build : {項(xiàng)目地址}\node_modules\@vue\cli-service\lib\commands\build\index.js

serve: {項(xiàng)目地址}\node_modules\@vue\cli-service\lib\commands\serve.js

統(tǒng)計(jì)build時(shí)長(zhǎng)

根據(jù)build命令執(zhí)行完成之后打印的內(nèi)容，可以輕松找到標(biāo)志打包結(jié)束的位置。

// 開始時(shí)間
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é)束時(shí)間戳：'+Date.parse(new Date()))
            console.log('花費(fèi)時(shí)間：'+(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)用時(shí)初始化開始時(shí)間，當(dāng)打包完成后定義結(jié)束時(shí)間，兩個(gè)時(shí)間相減就可以得到最終時(shí)間。

統(tǒng)計(jì)serve時(shí)長(zhǎng)

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

let startTime = '';
async function serve(args) {
	//開始時(shí)間
    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é)束時(shí)間戳：' + Date.parse(new Date()))
            console.log('花費(fèi)時(shí)間：' + (Date.parse(new Date()) - startTime) / 1000 + '秒')
            ...// other code
        }
    })
}

統(tǒng)計(jì)每次重新編譯時(shí)長(zhǎng)

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

可以看到對(duì)于編譯結(jié)束，vue-cli-service是通過compiler.hooks來(lái)定位到編譯結(jié)束的，那我們是不是也可以通過鉤子函數(shù)來(lái)定位到重新編譯開始呢？

答案是肯定的，有興趣的可以參考：compiler.hooks網(wǎng)站

let startTime = '';
async function serve(args) {
	//開始時(shí)間
    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é)束時(shí)間戳：' + Date.parse(new Date()))
            console.log('花費(fèi)時(shí)間：' + (Date.parse(new Date()) - startTime) / 1000 + '秒')
            ...// other code
        }
    })
}

值得注意的是，在重置開始時(shí)間時(shí)，我判斷了是否為第一次編譯，保證不會(huì)影響到初始啟動(dòng)的時(shí)間。

總結(jié)

到此這篇關(guān)于如何利用vue-cli監(jiān)測(cè)webpack打包與啟動(dòng)時(shí)長(zhǎng)的文章就介紹到這了,更多相關(guān)vue-cli監(jiān)測(cè)webpack打包時(shí)長(zhǎng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: