nuxt 优化项:禁用js的预加载
这里有个nuxt和vue不同的地方,这个地方很有意思,官方的中文文档说得蜜汁自信
-------------------------------
In production, nuxt.js uses the prefetch strategy to pre-fetch the pages bundle that will be required when navigating to the next page. When the user will click on a link, nuxt.js will already have pre-fetched the page and the navigation will feel instant while keeping the code splitted.
在生产模式下,Nuxt.js 使用浏览器的预加载)策略来预加载目标页面的脚本资源。所以当用户点击某个链接时,会有一种秒开的感觉。预加载策略使得 Nuxt.js 既可以保持代码分离又能保证页面访问体验。
prefetch 特性示例 (请查看当前打开页面的 <head> 标签):
<link rel="prefetch" href="/_nuxt/0.nuxt.bundle.61ba3fe4687aed56a098.js">
<link rel="prefetch" href="/_nuxt/1.nuxt.bundle.0e300058ecb654f36fb7.js">
<link rel="prefetch" href="/_nuxt/2.nuxt.bundle.2617656a084bb6760331.js">
-------------------------------
会有一种秒开的感觉,在项目并不是很大的时候,体验确实不错,我说的这个项目不是很大,个人感觉如果路由超过30个页面,基本就算大项目了(一家之言,具体视自己的实际情况而定),首页加载基本也没什么区别,可以加速其他页面的加载速度。
但是作为APP内嵌的网页来说,这种靠预加载资源,加速其他页面的访问速度,意义不是很大。网页页面很多,对用户来说,用户可能访问的页面不足十分之一,预加载所有资源有点浪费。这种情况下,访问哪些页面,加载哪些页面的资源更为实际。
所以,我就需要直接干掉了prefetch
这时候查看官方文档的我又踩了个文档的坑
因为一直看的是中文文档,基本属性设置按照中文文档设置啥的都没什么问题,但是在官方中文文档里,禁用此特性的属性很容易就能找到:

然后配置也很简单:

可是,就是没什么用...
这里省略一万字的找原因,找解决办法的过程....
最后在英文的文档里找到新的属性设置

英文的说明也很对啊
当有很多页面和路由时候,你可能想禁用此特性。

不是可能想禁用,禁用还是很有必要的!
官方应该只更新英文的文档,中文的已经落后了好几个版本了,所以建议大家还是以英文文档为主!
如果以上问题刚好是你一度冥思苦想解决不了的,希望能给你省点做无谓的斗争的时间。
nuxt 优化项:禁用js的预加载的更多相关文章
- js图片预加载
图片预加载有大体有几种方式 1.html标签或css加载图片. 显而易见我们使用img标签或者通过标签的background-image属性都可以实现图片的预加载.但是为了避免初次载入过多图片影响体验 ...
- JS图片预加载插件
在开发H5项目中有时候会遇到要加载大量图片的情况,利用预加载技术可以提高用户浏览时的体验. 1)概念:懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片.预加载:提前加载 ...
- js图片预加载与延迟加载
图片预加载的机制原理:就是提前加载出图片来,给前端的服务器有一定的压力. 图片延迟加载的原理:为了缓解前端服务器的压力,延缓加载图片,符合条件的时候再加载图片,当然不符合的条件就不加载图片. 预加载 ...
- 图片预加载 js css预加载
图片预加载, 效果非常明显, 特别是有多个图, 方法很简单 , 体验提升了不少 <div class="hidden"> <script type= ...
- js图片预加载、有序加载
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...
- js图片预加载后触发操作
为了使得图片加载完,再触发回调函数,需进行图片预加载处理 function loadImage(url, callback) { var img = new Image(); img.src = ur ...
- js图片预加载以及延迟加载
当我们需要做图片轮播的时候,如果让图片提前下载到本地,用浏览器缓存起来,我们可以用Image对象: function preLoadImg(){ var img=new Image(); img.sr ...
- 图片及js的预加载
loadImage : function (url, dataObj, callback, errorCallback) { var self = this; var img = new Image( ...
- js图片预加载实现!
var myImage = (function(){ var imgNode = document.createElement( 'img' ); document.body.appendChild( ...
随机推荐
- JavaScript中的appendChild()方法
appendChild()方法是向节点添加最后一个子节点.也可以使用此方法从一个元素向另一个元素移动元素. 案例一:向节点添加最后一个子节点 <!DOCTYPE html> <htm ...
- Oracle中用户和方案的区别
从定义中我们可以看出方案(Schema)为数据库对象的集合,为了区分各个集合,我们需要给这个集合起个名字,这些名字就是我们在企业管理器的方案下看到的许多类似用户名的节点,这些类似用户名的节点其实就是一 ...
- Java—进程与线程
进程与线程 进程是程序(任务)的执行过程,具有动态性:持有资源(共享内存.共享文件)和线程,是资源和线程的载体. 线程是系统中最小的执行单元,同一进程中有多个线程,线程共享进程的资源. 线程的交互,交 ...
- Oracle IMPDP导入数据案例之注意事项(undo/temp)
针对Oracle数据迁移,我们可能会用到expdp/impdp的方式,有时候需要大表.lob字段等可能会消耗过大的临时表空间和undo表空间,所以一般我们根据导出日志,在导入前适当调整表空间大小.否则 ...
- 关于 Windows 7 语言包
在对IE浏览器进行多语言对应的时候,网页会检测当前系统的语言,来判断网页需要以哪种语言显示.但是,在给系统安装指定语言包时,可能会遇到安装失败的情况,原因就是需要在你的电脑上安装必需的基本语言包.请看 ...
- 马云18年前制止偷井盖视频走红 2013-05-10 11:00:37 来源: 新快报(广州) 有0人参与 分享到 网易微博 新浪微博 腾讯空间 人人网 有道云笔记 在一次访谈中,即将卸任阿里巴巴CEO的马云自曝了他第一次上电视是在1995年。“我刚开始创
马云18年前制止偷井盖视频走红 2013-05-10 11:00:37 来源: 新快报(广州) 有0人参与 分享到 网易微博 新浪微博 腾讯空间 人人网 有道云笔记 在一次访谈中,即将卸任阿里巴巴 ...
- c++ 读取文本问题
c++文本操作有以下三个方法 ifstream,ofstream,fstream 读取文本常用的方法如下 std::ifstream input; input.open(".log" ...
- UVa 12716 - GCD XOR(筛法 + 找规律)
链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...
- Windows与kali双系统安装启动项的选择问题
在安装kali的时候,选择了用linux的grub启动,但是在重启后发现启动项里已经没有Windows系统可以选择了. 网上资料说,进入kali的终端,输入以下命令: $ sudo update-gr ...
- springmvc错误集锦-dubbo包含低版本的spring包,依赖的时候应该排除Caused by: java.lang.reflect.MalformedParameterizedTypeException
dubbo 常见错误 1. Caused by: java.lang.reflect.MalformedParameterizedTypeException 启动时报错,原因是dubbo 依赖 spr ...