vue项目浏览器首屏加载太久原因之一——加载文件太多

首屏加载时间很长能优化的点有很多,网上这个文章也很多,如拆包、路由懒加载、图片压缩、各种组件的按需引入、moment.js等插件删除用不到的部分,具体方式我不列举,只提一下我遇到的某种特殊情况。

我按照网上的方法将上述大部分操作实行了一遍,首页加载如下图所示
在这里插入图片描述左下角,首页就497个请求,我点进去一个文件里,看了下内容是别的页面或者组件的相关内容,从initiator这一列点击去看看来源从哪引入的,一看是index.html,文件上一大批带着rel="prefetch"的link,几个带着rel="preload"的link,然后再看下项目里打包出来的dist里的index.html,确实是那么多link。
在这里插入图片描述在这里插入图片描述后面就是查这两者的含义,我目前不需要预先加载别的页面的和可能用到的文件,保证首屏速度,所以就找到了在vue.config.js里删除的方法

chainWebpack:config=>{
  config.plugins.delete("prefetch").delete('preload');
}

重新打包给后端
在这里插入图片描述请求数少了几百,资源也少了很多。
我另一个依赖/插件类似的项目一样的配置却没有打出那么多的prefetch和preload,搜索了下,猜测是webpack版本问题,我两个项目的webpack版本是不一样的,不过具体哪些版本会这样,我也不太清楚,在这儿记录一下,希望大老知道的话可以指点一下

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值