寫在前面
在上次的分包實(shí)戰(zhàn)后，我在服務(wù)器上測(cè)試了分包后的項(xiàng)目效果很好，但是還不夠理想，因?yàn)樵谖业腖ogin頁(yè)面我使用的動(dòng)態(tài)組件，其中包含注冊(cè)組件register、忘記密碼組件renew,我們知道vite的打包機(jī)制是由各個(gè)分入口匯總到一個(gè)總文件，那么我們?cè)撛趺醋瞿兀?/p>
回顧往期
vite打包實(shí)戰(zhàn),在這篇文章里我們學(xué)習(xí)了創(chuàng)建自定義用戶片段，就是在分包，那么片段的創(chuàng)建規(guī)則呢就是依賴rollupOptions.output.manualChunks的自定義用戶片段，通過(guò)返回規(guī)則來(lái)告訴該函數(shù)依靠什么區(qū)分片段，從而創(chuàng)建片段；
實(shí)戰(zhàn)演練
在沒(méi)有分包前，通過(guò)幾張截圖我們一起來(lái)關(guān)注下效率情況；
上面這幅圖，首先為了更好的調(diào)試，停用緩存，其次我的組件區(qū)塊被默認(rèn)打包成了一個(gè)Login.js，加載時(shí)長(zhǎng)4秒，頁(yè)面正常運(yùn)轉(zhuǎn)得到10時(shí)間才行；那我們就來(lái)根據(jù)需求來(lái)配置函數(shù)，首先manualChunks的參數(shù)id是一個(gè)文件的目錄，所以需要先從結(jié)構(gòu)上尋找細(xì)節(jié)：
上圖可以看出，我的三個(gè)組件放在了這樣一個(gè)結(jié)構(gòu)了，那么我們就需要傳遞分離規(guī)則，從此處分離，代碼如下：
manualChunks(id) { //靜態(tài)資源分拆打包
if (id.includes('element-plus') || id.includes('bootstrap')) {
return; //不打入這倆個(gè)文件相關(guān)的東西
}
if(id.includes('Login/')){ //利用文件目錄判斷
console.log(id.toString().split('Login/')[1].split('.')[0].toString());
return id.toString().split('Login/')[1].split('.')[0].toString();
}
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
}
我們看下log函數(shù)的結(jié)果：
這就是我們拆出來(lái)的規(guī)則，manualChunks會(huì)把這幾個(gè)返回值單獨(dú)形成文件，如下圖
分離出來(lái)的這幾個(gè)文件，就會(huì)在加載時(shí)同時(shí)刻加載，分離了單文件加載的壓力，同理你復(fù)雜的區(qū)塊都可以用此方法來(lái)化解，最后我們部署測(cè)驗(yàn)：
這里依舊是停用緩存，可以看到我們的文件在同時(shí)刻加載；我們的需求達(dá)到，并且頁(yè)面功能在7秒時(shí)已經(jīng)加載完畢，但問(wèn)題是最終完成加載時(shí)間居然變成了29s(藍(lán)色問(wèn)號(hào)),這里我暫時(shí)沒(méi)有找到問(wèn)題，希望指教。
最后
?? vite專欄
?? 個(gè)人簡(jiǎn)介：一個(gè)喜愛(ài)技術(shù)的人。
?? 勵(lì)志格言: 腳踏實(shí)地，虛心學(xué)習(xí)。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-422849.html
?如果文章還可以，記得用你可愛(ài)的小手點(diǎn)贊??關(guān)注?，我會(huì)在第一時(shí)間回關(guān)、回訪，歡迎進(jìn)一步交流。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-422849.html
到了這里，關(guān)于vite3、vue 項(xiàng)目打包分包進(jìn)階-組件分包的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
