首页 > 其他分享 >vue项目打包发现index.js加载了两次?差别在于请求头purpose:prefetch

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

时间:2024-04-03 16:22:35浏览次数:33  
标签:index vue js prefetch config 加载

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

标签:index,vue,js,prefetch,config,加载
From: https://www.cnblogs.com/MrZhous/p/18112988

相关文章

  • 重读vue3
    基础风格指南结构风格vue推荐:先声明,后使用<scriptsetup></script><template></template><stylescoped></style>子组件命名<!--在单文件组件中,推荐为子组件使用PascalCase的标签名,以此来和原生的HTML元素作区分--><!--✅:推荐风格:PascalCase,文件名使用keba......
  • vue3 手机端 手写签字
    <template><div><div><canvasclass="canvas"id="canvas"ref="canvas"></canvas><canvasid="blank"style="display:none"></canvas><p......
  • json字符串重复转义问题
    若后台返回的是一个json字符串格式的值,我们首先做的是先用JSON.parse()转化成json数组,然后再通过点的方式取到里面的值但是在实际使用过程中,会发现有重复转义的问题,第一次操作正常,第二次点击其他按钮后,json字符串前就多了一个\,所以在进行parse之前,要先用replace()去除\ 一、使......
  • Python框架下的qt设计之JSON格式化转换小程序
    JSON转换小程序代码展示:主程序代码:fromPyQt6.QtWidgetsimport(QApplication,QDialog,QMessageBox)importsysimportjsonclassMyJsonFormatter(jsonui.Ui_jsonFormatter,QDialog):#jsonui是我qt界面py文件名def__init__(self):supe......
  • 【C/C++】VsCode调试配置tasks.json和launch.json
    前段时间配大作业环境改了很多配置,发现tasks.json和launch.json经常令自己很迷惑。网上找的配置有时会有各种各样的问题,在此记录一下上学期配好的配置文件,日后有时间再详细研究研究tasks.json:{"version":"2.0.0","tasks":[{"type":"shell",......
  • 如何判断JS类型,快速上手前端开发
    注意1.nulltypeofnull//“object”因为历史遗留的原因。typeofnull尝试返回为null失败了,所以要记住,typeofnull返回的是object。2.NaN特殊值NaN返回的是“number”typeofNaN//“number”3复杂数据类型而复杂数据类型里,除了函数返回了"function"其他均返回......
  • js 模块化
    一、什么是模块化?1.1定义将一个复杂的程序依据一定的规则(规范)封装成几个块(文件),并进行组合在一起块的内部数据/实现是私有的,只是向外部暴露一些接口(方法)与外部其它模块通信 1.2模块化的进化过程 1.2.1全局function模式*全局函数模式:将不同的功能封装......
  • VUE-axios统一增加请求头并根据接口返回的状态码判断用户登录状态并跳转登录页
    背景:后台接口返回code==501表示用户是未登录状态,需要登录才可访问;main.js中通过http拦截做路由跳转importVuefrom‘vue’importAxiosfrom‘axios’Vue.prototype.$axios=Axiosimport{Loading,Message,MessageBox}from‘element-ui’//超时时间Axios.......
  • vue3 快速入门系列 —— 基础
    vue3快速入门系列-基础前面我们已经用vue2和react做过开发了。从vue2升级到vue3成本较大,特别是较大的项目。所以许多公司对旧项目继续使用vue2,新项目则使用vue3。有些UI框架,比如antdesignvue1.x使用的vue2。但现在antdesignvue4.x都是基于vue3,示例默认是......
  • 在静态页中,js和css使用虚拟路径指向网站根目录
    第一步:修改web.config<configuration><system.webServer><handlers><addname="x"verb="GET"path="*.css.ashx"type="FileResolver"/><addname="xx"verb=&quo......