如不需要则删除,配置为
chainWebpack: config => {
// console.log(config, 'chainWebpack')
// 移除 prefetch 插件
config.plugins.delete('prefetch')
// 删除文件预加载
config.plugins.delete('preload');
}
prefetch 加载其他页面资源,空闲时加载,不一定会加载
preload 加载当前页面的资源,一定会加载,在渲染前加载
prefetch,preload 使用的必要性
prefetch 预加载是不会影响当前页面的加载性能的,因此预加载是可以被保留的,什么情况下我们需要禁用预加载呢?对流量损耗敏感(移动端)的应用场景,在首页对子页面进行全面的预加载,而用户可能只需要跳转其中的一两个子页面甚至停留在首页,造成大量的流量浪费。需要做到控制特定的路由预加载。首先,先移除prefetch插件,然后按需添加预加载。
import(/* webpackPrefetch: true */ './componentA.vue')
preload 用于提高资源加载的优先级,当页面开始加载时,我们总是想核心的代码或资源得到优先处理,因此可以通过preloading提高优先级。
import(/* webpackPreload: true */ 'lbrary');
错误的使用webpackPreload实际上会影响性能,因此要谨慎使用。
如果把一个体积巨大的资源放在最高优先级加载,页面可能会长时间空白,用户体验体验非常差,因此,慎用。
网友评论