如不需要則刪除,配置為
chainWebpack: config => {
// console.log(config, 'chainWebpack')
// 移除 prefetch 插件
config.plugins.delete('prefetch')
// 刪除文件預(yù)加載
config.plugins.delete('preload');
}
prefetch 加載其他頁面資源,空閑時(shí)加載奠涌,不一定會加載
preload 加載當(dāng)前頁面的資源,一定會加載磷杏,在渲染前加載
prefetch溜畅,preload 使用的必要性
prefetch 預(yù)加載是不會影響當(dāng)前頁面的加載性能的,因此預(yù)加載是可以被保留的茴丰,什么情況下我們需要禁用預(yù)加載呢达皿?對流量損耗敏感(移動端)的應(yīng)用場景,在首頁對子頁面進(jìn)行全面的預(yù)加載贿肩,而用戶可能只需要跳轉(zhuǎn)其中的一兩個(gè)子頁面甚至停留在首頁峦椰,造成大量的流量浪費(fèi)。需要做到控制特定的路由預(yù)加載汰规。首先汤功,先移除prefetch插件,然后按需添加預(yù)加載溜哮。
import(/* webpackPrefetch: true */ './componentA.vue')
preload 用于提高資源加載的優(yōu)先級滔金,當(dāng)頁面開始加載時(shí)色解,我們總是想核心的代碼或資源得到優(yōu)先處理,因此可以通過preloading提高優(yōu)先級餐茵。
import(/* webpackPreload: true */ 'lbrary');
錯誤的使用webpackPreload實(shí)際上會影響性能科阎,因此要謹(jǐn)慎使用。
如果把一個(gè)體積巨大的資源放在最高優(yōu)先級加載忿族,頁面可能會長時(shí)間空白锣笨,用戶體驗(yàn)體驗(yàn)非常差,因此道批,慎用错英。