vue项目打包发现index.js加载了两次?差别在于请求头purpose:prefetch

上线后打开f12,开启禁用缓存 =>发现index.js加载了两次;6.6M直接双倍流量;

一番研究得知:
vue-cli打包时,会将一些文件preload和prefetch;
(1)preload(预先加载文件)
app.js vendor.js
(2)prefetch(闲时加载)
index.js / router懒加载独立打包的文件【就是那串注释标明打包在xx模块用的】
再者:启用缓存后,第二遍index.js加载会走diskcache
AI回答:
在Vue项目中,如果你发现index.js被加载了两次,这通常是因为Vue的预加载机制(prefetch)导致的。预加载是为了提高页面加载性能,在后台预先加载可能会在将来某个时刻需要的资源。
解决这个问题的方法通常是优化预加载策略。你可以通过以下步骤来减少或避免这种情况:
检查你的路由定义和vue.config.js配置文件,确保没有重复的路由或预加载配置。
如果你使用的是Vue Router的预加载功能,确保你没有不必要地指定了全局预加载。
使用webpack的BundleAnalyzerPlugin分析打包后的文件,查看index.js被加载的具体原因。
如果index.js是一个非常大的入口文件,考虑将你的应用拆分成更小的chunk,以减少首屏加载的时间。
如果你不需要预加载,可以在Vue Router的路由定义中移除prefetch选项。
下面是一个简化的vue.config.js配置示例,用于控制预加载行为:
module.exports = {
chainWebpack: config => {
config.plugins.delete('prefetch');
// 或者自定义预加载规则
config.plugin('prefetch').tap(options => {
// 修改预加载策略
return options;
});
}
};

  • 7
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值