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
收藏
暂无评论信息
- 相关文章
- 文章推荐
-
群辉nas docker容器 配置svn仓库,并实现外网访问
2022-08-11的这一天, 群辉nas到手了, 实现svn仓库外网的访问,折腾了好久。记录一下。
-
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 也将继续这一路线。
-
Docker 常用命令
docker目前代替虚拟机使用的一个容器,灵活好用。
-
淘宝 NPM 镜像站喊你切换新域名啦
淘宝 NPM 镜像站(npm.taobao.org)自 2014 年 正式对外服务,一开始只是想简单地做 NPM 的中国镜像站点,回馈国内前端社区,不知不觉竟然一直运行到现在。当年参考 Ruby Gems 淘宝镜像 的方式,跟阿里开源组织申请了 taobao.org 的二级域名,镜像站点名称也自然而然地取名为 淘宝 NPM 镜像站 (下称 CNPM)。
- 点击排行
- 站长推荐
- 猜你喜欢
- 网站信息
- 站内问答:12篇
- 站内文章:212篇
- 建站时间:已运行1107天
- 备案号: 浙ICP备2022018799号
- 语言:
English(USA)
French(FR)
Chinese(ZH)
无数据