上线后打开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;
});
}
};