浅析Nuxt.js的智能预读取及预加载规则和如何设置预加载
2023-09-11 14:19:54 时间
一、nuxt 的智能预读取
Nuxt 2.4中发布了Nuxt.js的一个新特性,称为智能预读取,它与universal mode相结合,提供了更好的用户体验。
使用此功能(默认情况下已启用),当 nuxt-link 路由在视口中可见时(即页面滚动到路由入口元素时),Nuxt.js将自动下载链接目标页面所需要的 javascript。当单击路由跳转时,JavaScript已经将目标组件准备好了,目标页几乎立刻渲染呈现,而不是等待组件下载。
如上图所示,起初未加载 js,当滚动到在 视口 中时,加载了 js。再如下面一图:
如上图的视频中,在点击 create
之前,已经预加载 9acb22e.js
(create.js)。现在进入 /create
可立即执行JavaScript,而不必等待网络请求。
二、预加载规则
官网信息可查看这里:https://nuxtjs.org/docs/features/nuxt-components/#the-nuxtlink-component
1、预加载规则:
Nuxt.js仅在浏览器不忙时加载资源,如果连接处于脱机状态或只有2g连接,则跳过预取。
2、手动控制
(1)禁用特定链接的预加载
<NuxtLink to="/about" no-prefetch>About page not pre-fetched</NuxtLink>
<NuxtLink to="/about" :prefetch="false">About page not pre-fetched</NuxtLink>
(2)全局禁用预加载
export default {
router: {
prefetchLinks: false
}
}
(3)指定某个为预加载,则添加prefetch
即可
<NuxtLink to="/about" prefetch>About page pre-fetched</NuxtLink>
相关文章
- js 生成4位随机数及Js知识汇总
- [转]passport.js学习笔记
- Html Table用JS导出excel格式问题 导出EXCEL后单元格里的000412341234会变成412341234 7-14 会变成 2018-7-14(7月14) 自定义格式 web利用table表格生成excel格式问题 js导出excel增加表头、mso-number-format定义数据格式 数字输出格式转换 mso-number-format:"@"
- js,jq滚动监听,切换等常用JS代码
- JS监听不到被操作后dom的事件,js动态生成的DOM绑定事件失效,解决方案
- 【Vue/js】Js中执行变量中的命令语句,也就是所谓的宏替换(很实用的例子)
- 05Vue - Vue.js 入门(与自定义元素的关系)
- 使用 mock.js 让前端开发与后端独立
- JS中this的4种绑定规则
- Node.js文件系统、路径的操作函数
- android js 互相调用
- js加强小结
- base.js,通用js方法,Js方法封装
- js打开新窗口,js打开居中窗口,js打开自定义窗口
- JS教程之使用 ElectronJS、VueJS、SQLite 和 Sequelize ORM 从 A 到 Z 创建多对多 CRUD 应用程序
- 聊聊JS动画库:Velocity.js
- JS 工具函数 方法(其中js的crc32和php的crc32区别)
- Selenium web driver 使用JS修改input属性
- Node.js官方文档:到底什么是阻塞(Blocking)与非阻塞(Non-Blocking)?
- Node.js Express RESTful 简单例子
- 关于Cocos Creator用js脚本代码播放骨骼动画的步骤和注意事项
- js中数组操作
- node js实战:带数据库,加密的注册登录表单
- JQuery/JS插件 linq.js 获取所有选中行的Id
- 浅析js中隐式类型转换的规则(巨坑)
- Three.js Example 注解 —— webgl_morphtargets.html