首屏加载时间很长能优化的点有很多,网上这个文章也很多,如拆包、路由懒加载、图片压缩、各种组件的按需引入、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版本是不一样的,不过具体哪些版本会这样,我也不太清楚,在这儿记录一下,希望大老知道的话可以指点一下