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
收藏
暂无评论信息
- 文章推荐
-
娱美德旗下MMORPG手游《传奇4》将推出新PVP玩法"比奇掠夺"&
《传奇4》推出新门派PVP玩法!韩国首尔2022年6月29日 /美通社/ -- 《传奇4》(MIR4)的新PVP玩法比奇掠夺(Bicheon Heist)于2022年6月28日推出。
-
乐视官方确认还有 400 多人:消息称员工“没有内卷和 996”,过着“没有老板”的神仙日子
7 月 11 日消息,近期,微博博主 @Fenng 分享了一个冷知识:乐视居然还剩下 400 多人,有不少是五年以上的老员工。这些老员工称“幸福感是很多老乐视人留下来的理由”,没有内卷和 996,没拖欠过留下来的员工的工资,也没停过社保。
-
淘宝 NPM 镜像站喊你切换新域名啦
淘宝 NPM 镜像站(npm.taobao.org)自 2014 年 正式对外服务,一开始只是想简单地做 NPM 的中国镜像站点,回馈国内前端社区,不知不觉竟然一直运行到现在。当年参考 Ruby Gems 淘宝镜像 的方式,跟阿里开源组织申请了 taobao.org 的二级域名,镜像站点名称也自然而然地取名为 淘宝 NPM 镜像站 (下称 CNPM)。
-
HTML 面试知识点总结
本部分主要是笔者在复习 HTML 相关知识和一些相关面试题时所做的笔记,如果出现错误,希望大家指出!
- 点击排行
- 站长推荐
- 猜你喜欢
- css自定义滚动条样式
- 娱美德旗下MMORPG手游《传奇4》将推出新PVP玩法"比奇掠夺"&
- 原生js创建XMLhttpRequest对象
- 亚马逊推出“无需收银员”的新技术,以此帮助品牌和广告商提高销量
- 马斯克在推特回应推特起诉:真讽刺,我笑了
- 英国军方 Twitter 和 YouTube 账号被黑:为 NFT 做起广告,现已恢复
- 乐视官方确认还有 400 多人:消息称员工“没有内卷和 996”,过着“没有老板”的神仙日子
- javascript 时钟翻牌效果
- javascript 搜索关键字高亮并不区分大小写
- 'MongoDB: Failed to parse objectId ' in $convert with no onError value: Invalid string length for parsing to OID, expected 24 but found 0'
- 网站信息
- 站内问答:12篇
- 站内文章:213篇
- 建站时间:已运行1237天
- 备案号: 浙ICP备2022018799号
- 语言:
- English(USA)
- French(FR)
- Chinese(ZH)
无数据