这里有个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的预加载的更多相关文章

  1. js图片预加载

    图片预加载有大体有几种方式 1.html标签或css加载图片. 显而易见我们使用img标签或者通过标签的background-image属性都可以实现图片的预加载.但是为了避免初次载入过多图片影响体验 ...

  2. JS图片预加载插件

    在开发H5项目中有时候会遇到要加载大量图片的情况,利用预加载技术可以提高用户浏览时的体验. 1)概念:懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片.预加载:提前加载 ...

  3. js图片预加载与延迟加载

    图片预加载的机制原理:就是提前加载出图片来,给前端的服务器有一定的压力. 图片延迟加载的原理:为了缓解前端服务器的压力,延缓加载图片,符合条件的时候再加载图片,当然不符合的条件就不加载图片.​ 预加载 ...

  4. 图片预加载 js css预加载

    图片预加载, 效果非常明显, 特别是有多个图, 方法很简单 , 体验提升了不少 <div class="hidden">        <script type= ...

  5. js图片预加载、有序加载

    <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...

  6. js图片预加载后触发操作

    为了使得图片加载完,再触发回调函数,需进行图片预加载处理 function loadImage(url, callback) { var img = new Image(); img.src = ur ...

  7. js图片预加载以及延迟加载

    当我们需要做图片轮播的时候,如果让图片提前下载到本地,用浏览器缓存起来,我们可以用Image对象: function preLoadImg(){ var img=new Image(); img.sr ...

  8. 图片及js的预加载

    loadImage : function (url, dataObj, callback, errorCallback) { var self = this; var img = new Image( ...

  9. js图片预加载实现!

    var myImage = (function(){ var imgNode = document.createElement( 'img' ); document.body.appendChild( ...

随机推荐

  1. Python爬虫教程-27-Selenium Chrome版本与chromedriver兼容版本对照表

    我们使用Selenium+Chrome时,版本不一样, 会导致 chromedriver 停止运行 chromedriver 所有版本下载链接:http://npm.taobao.org/mirror ...

  2. 电脑护眼小软件f.lux

    f.lux这软件用了能不能保护好视力不好说,反正我是用了以后这么多年一直都在用,狠不下心删去.至少安装后能让心里多一些安全感! 以前老控制不住长期坐在电脑前不动,太需要有这类软件来养护.用了没太明显的 ...

  3. SQLServer 2008 新增T-SQL 简写语法

    1.定义变量时可以直接赋值 DECLARE @Id int = 5 2.Insert 语句可以一次插入多行数据 INSERT INTO StateList VALUES(@Id, 'WA'), (@I ...

  4. SQL Server ->> T-SQL查询面试题之实例版

    1 - 3 题: 数据表结构: OrderID ProductID OrderDate  SaleAmount 1 1 2015-01-01 100 2 6  2015-02-01 900 3 1   ...

  5. leetcode-surrounded regions-ZZ

    Problem Statement (link): Given a 2D board containing 'X' and 'O', capture all regions surrounded by ...

  6. ssh_exchange_identification: Connection closed by remote host

    用服务器内网ip连接同子网服务器的时候显示ssh_exchange_identification: Connection closed by remote host 防火墙什么都关闭了,还是显示这个问 ...

  7. Mysql学习---视图/触发器/存储过程/函数/执行计划/sql优化 180101

    视图 视图: 视图是一个虚拟表(非真实存在),动态获取数据,仅仅能做查询操作 本质:[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,并可以将其当作表来使用.由 ...

  8. WebExtensions小例

    一:简述 扩展是修改Web浏览器功能的代码位.它们使用标准的Web技术(JavaScript,HTML和CSS)以及一些专用的JavaScript API编写.其中,扩展程序可以向浏览器添加新功能或更 ...

  9. Future Research Directions in Social Recommendation

    From the tutorial published by Martin Ester in RecSys 2013 Future Research Directions --Recommendati ...

  10. SAP R/3系统的R和3分别代表什么含义,负载均衡的实现原理

    1972年,SAP诞生,推出了RF系统(实时财务会计系统), 后来命名为R1. R指Real time.3既指第三代系统,又代表3层架构. 三层架构分别为下图的Presentation server ...