如不需要則刪除,配置為
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)先級加載,頁面可能會長時間空白,用戶體驗體驗非常差,因此,慎用。