1.移除 preload(预载) 与 prefetch (预取) vue 脚手架默认开启了 preload 与 prefetch,当我们项目很大时,这个就成了首屏加载的最大元凶了。 先简单了解一下 preload 与 prefetch。 preload 与 prefetch 都是一种资源预加载机制; preload 是预先加载资源,但并不执行,只有需要时才执行它; prefetch 是意图预获取一...
上线后打开f12,开启禁用缓存 =>发现index.js加载了两次;6.6M直接双倍流量; 一番研究得知: vue-cli打包时,会将一些文件preload和prefetch; (1)preload(预先加载文件) app.js vendor.js (2)prefetch(闲时加载) index.js / router懒加载独立打包的文件【就是那串注释标明打包在xx模块用的】 再者:启用缓存后,第...
以下是一张执行了npm run build之后的index.html的源码。可以看到,除了最后一个rel是preload,其余的都是prefetch。可以看出Vuecli使用preload和prefetch来改善性能。 preload 通常在页面中我们需要加载脚本和样式,preload可以对当前页面所需要的脚本、样式等资源进行预加载,而无需等到解析到script和link标签时才进行加载。
一、 实现vue-router懒加载功能 使用初衷是为了减少首页http请求过多,默认预加载了全部的js文件 官网文档提出Preload与Prefetch,vue-cli3默认使用俩大功能 vue.config.js增加如下配置,取消prefetch和preload,这样就是实现加载当前所需 chainWebpack(config){config.plugins.delete('preload')config.plugins.delete('prefet...
在使用Vue Cli生成的项目里,当我们配置了路由懒加载后,默认情况下webpack在构建时会对所有的懒加载资源进行prefetch和preload,所以当你打开首页时,会看到大量的prefetch和preload请求,如下图: 虽说prefetch会在浏览器空闲时,下载相应文件,但这是一个很笼统的定义,这些大量的预加载资源会占用浏览器的资源,可能会导致一...
1、移除 preload 与 prefetch vue 脚手架默认开启了 preload 与 prefetch,当我们项目很大时,这个就成了首屏加载的最大元凶了。先简单了解一下 preload 与 prefetch。 1、preload 与 prefetch 都是一种资源预加载机制; 2、preload 是预先加载资源,但并不执行,只有需要时才执行它; ...
打包发布访问页面,首屏秒开,直接访问about依旧秒开。可是查看网络请求时候发现访问首页时请求了about和web Excel的资源。经过排查发现vue-cli在页面中使用了preload和prefetch预加载机制,在不影响当前页面加载的情况下预加载后续页面需要的资源提升用户体验,这里为了演示清晰注释掉prefetch的资源。
打包发布访问页面,首屏秒开,直接访问 about 依旧秒开。可是查看网络请求时候发现访问首页时请求了 about 和 web Excel 的资源。经过排查发现 vue-cli 在页面中使用了 preload 和 prefetch 预加载机制,在不影响当前页面加载的情况下预加载后续页面需要的资源提升用户体验,这里为了演示清晰注释掉 prefetch 的资源。
打包发布访问页面,首屏秒开,直接访问about依旧秒开。可是查看网络请求时候发现访问首页时请求了about和web Excel的资源。经过排查发现vue-cli在页面中使用了preload和prefetch预加载机制,在不影响当前页面加载的情况下预加载后续页面需要的资源提升用户体验,这里为了演示清晰注释掉prefetch的资源。
prefetch,preload 使用的必要性 prefetch 预加载是不会影响当前页面的加载性能的,因此预加载是可以被保留的,什么情况下我们需要禁用预加载呢?对流量损耗敏感(移动端)的应用场景,在首页对子页面进行全面的预加载,而用户可能只需要跳转其中的一两个子页面甚至停留在首页,造成大量的流量浪费。需要做到控制特定的路由预加载...