Vue路由懒加载-prefetch预加载问题
分类专栏: Javascript&
简介 prefetch预加载使首屏加载变慢,在vue-cli3升级之后,配置了webpack的预加载,这时候除了路由懒加载需要的当前页面资源,其他资源也会被请求,但不会被解析
<h4>通常项目配置router的懒加载,基于webpack4+和ES6,最简单的写法是</h4><p><br></p><pre class="ql-syntax" spellcheck="false">const routers = [{
path: '/xxx',
name: 'xxx',
component: () => import('@/xx/xxx.vue') // import()的动态引入
}]
</pre><p><br></p><p><span style="color:rgb(64, 64, 64);">此时文件加载按页面引入,每个页面跳转进加载该页面需要的资源</span></p><p><br></p><h4>prefetch预加载使首屏加载变慢</h4><p><br></p><p><span style="color:rgb(64, 64, 64);">在vue-cli3升级之后,配置了webpack的预加载,这时候除了路由懒加载需要的当前页面资源,其他资源也会被请求,但不会被解析</span></p><p><br></p><p><span style="color:rgb(64, 64, 64);">由于预加载文件比较多,反而阻塞了实际需要的文件下载,首页渲染速度变慢。</span></p><p><br></p><h4><a href="https://links.jianshu.com/go?to=https%3A%2F%2Fcli.vuejs.org%2Fzh%2Fguide%2Fhtml-and-static-assets.html%23preload" rel="noopener noreferrer" target="_blank" style="background-color:transparent; color:rgb(6, 129, 208);">解决方法</a></h4><p><br></p><pre class="ql-syntax" spellcheck="false">// vue.config.js
module.exports = {
chainWebpack: config => {
// 移除 prefetch 插件
config.plugins.delete('prefetch')
// 或者
// 修改它的选项:
config.plugin('prefetch').tap(options => {
options[0].fileBlacklist = options[0].fileBlacklist || []
options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/)
return options
})
}
}
</pre><p><br></p>
分享到:
转载:
'
喜欢 7
收藏
暂无评论信息
- 相关文章
- 文章推荐
-
半导体短缺即将结束?分析师:如果没有 1 美元芯片会影响更多
德勤咨询(Deloitte Consulting)的芯片分析师认为,随着芯片行业资本支出的增加,需求度较高的工厂已经开工,预示着短缺情况即将结束。
-
乐视官方确认还有 400 多人:消息称员工“没有内卷和 996”,过着“没有老板”的神仙日子
7 月 11 日消息,近期,微博博主 @Fenng 分享了一个冷知识:乐视居然还剩下 400 多人,有不少是五年以上的老员工。这些老员工称“幸福感是很多老乐视人留下来的理由”,没有内卷和 996,没拖欠过留下来的员工的工资,也没停过社保。
-
娱美德旗下MMORPG手游《传奇4》将推出新PVP玩法"比奇掠夺"&
《传奇4》推出新门派PVP玩法!韩国首尔2022年6月29日 /美通社/ -- 《传奇4》(MIR4)的新PVP玩法比奇掠夺(Bicheon Heist)于2022年6月28日推出。
-
HTML 面试知识点总结
本部分主要是笔者在复习 HTML 相关知识和一些相关面试题时所做的笔记,如果出现错误,希望大家指出!
- 点击排行
- 站长推荐
- 猜你喜欢
- 商汤科技高管作出自愿禁售承诺,不会在今年底前进行减持
- 国微思尔芯发布自动原型编译软件Player Pro-7&
- 图片转换canvas压缩上传,减少服务器存储压力
- 英国军方 Twitter 和 YouTube 账号被黑:为 NFT 做起广告,现已恢复
- Vue自定义弹窗组件
- mediaDevices.getUserMedia提示DOMException:Permission denied by
- Promise All 的批量请求的使用方式
- 2022年你需要了解的 13 种 JavaScript 代码技巧
- 国轩高科拟在欧洲投建年产18GWh生产基地
- dayjs 常用的日期配置,相差八小时,月初至月末,本周初至本周末
- 网站信息
- 站内问答:12篇
- 站内文章:213篇
- 建站时间:已运行1255天
- 备案号: 浙ICP备2022018799号
- 语言:
- English(USA)
- French(FR)
- Chinese(ZH)
无数据