vue-cli3 默認預加載

如不需要則刪除,配置為

chainWebpack: config => {
    // console.log(config, 'chainWebpack')
    // 移除 prefetch 插件
    config.plugins.delete('prefetch')
    // 刪除文件預加載
    config.plugins.delete('preload');
  }

prefetch 加載其他頁面資源,空閑時加載,不一定會加載
preload 加載當前頁面的資源,一定會加載,在渲染前加載

prefetch,preload 使用的必要性

prefetch 預加載是不會影響當前頁面的加載性能的,因此預加載是可以被保留的,什么情況下我們需要禁用預加載呢?對流量損耗敏感(移動端)的應用場景,在首頁對子頁面進行全面的預加載,而用戶可能只需要跳轉(zhuǎn)其中的一兩個子頁面甚至停留在首頁,造成大量的流量浪費。需要做到控制特定的路由預加載。首先,先移除prefetch插件,然后按需添加預加載。

import(/* webpackPrefetch: true */ './componentA.vue')

preload 用于提高資源加載的優(yōu)先級,當頁面開始加載時,我們總是想核心的代碼或資源得到優(yōu)先處理,因此可以通過preloading提高優(yōu)先級。

import(/* webpackPreload: true */ 'lbrary');

錯誤的使用webpackPreload實際上會影響性能,因此要謹慎使用。
如果把一個體積巨大的資源放在最高優(yōu)先級加載,頁面可能會長時間空白,用戶體驗體驗非常差,因此,慎用。

優(yōu)化點:懶加載優(yōu)化了首屏加載的速率,prefetch預加載優(yōu)化了子頁面加載的速率

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容