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
收藏
暂无评论信息
- 相关文章
- 文章推荐
-
亚马逊推出“无需收银员”的新技术,以此帮助品牌和广告商提高销量
北京时间 6 月 30 日早间消息,据报道,亚马逊发明了一种无需收银员的技术,可以加快人们去杂货店或便利店的速度。现在,该公司希望利用这个跟踪系统来帮助品牌和广告商提高销量。&
-
jQuery 3.0正式发布
jQuery 基金会刚刚发布了该 Java 框架的 3.0 版本,并且首次抛弃了对老旧的 IE 浏览器的支持。jQuery 3.0 的工作始于 2014 年 10 月,其最初目标是在 2.0 版本之上进行完善,并和遥远的 1.0 版代码说再见——因为要兼容 IE 的缘故,其已经臃肿不堪。jQuery 2.0 已经与 1.0 版本完全不兼容,而 3.0 也将继续这一路线。
-
乐视官方确认还有 400 多人:消息称员工“没有内卷和 996”,过着“没有老板”的神仙日子
7 月 11 日消息,近期,微博博主 @Fenng 分享了一个冷知识:乐视居然还剩下 400 多人,有不少是五年以上的老员工。这些老员工称“幸福感是很多老乐视人留下来的理由”,没有内卷和 996,没拖欠过留下来的员工的工资,也没停过社保。
-
HTML 面试知识点总结
本部分主要是笔者在复习 HTML 相关知识和一些相关面试题时所做的笔记,如果出现错误,希望大家指出!
- 点击排行
- 站长推荐
- 猜你喜欢
- Web前端:JavaScript的未来——发展趋势和预测
- linux 安装镜像源,
- 娱美德旗下MMORPG手游《传奇4》将推出新PVP玩法"比奇掠夺"&
- 苹果 CEO 库克、特斯拉 CEO 马斯克、Meta CEO 扎克伯格等科技大佬将参加太阳谷峰会
- Event对象跨浏览器兼容事件&
- 天谋科技 Timecho 完成近亿元人民币天使轮融资 围绕 Apache IoTDB 打造工业物联网原生时序数据库
- H5拖拽文件上传
- 90 后 CTO 如何成为国内首位女性 Apache Member?
- javascript 搜索关键字高亮并不区分大小写
- Twitter 聘请律师天团,欲起诉马斯克放弃 440 亿美元收购违约
- 网站信息
- 站内问答:12篇
- 站内文章:207篇
- 建站时间:已运行917天
- 备案号: 浙ICP备2022018799号
- 语言:
English(USA)
French(FR)
Chinese(ZH)
无数据