Aboud preload/prefetch optimization - 关于资源预加载优化 #72
sanyuan0704
started this conversation in
Ideas
Replies: 1 comment
-
当然还要考虑 Search 组件,由于 Search 组件需要拿到所有的页面 JS,比较消耗性能,因此 Island.js 默认进行按需加载,即点击了搜索框之后才开始加载所有的 JS 文件,那么加上 prefetch 逻辑之后,需要避免请求重复发送的问题。可以考虑做一个全局 Fetcher 单例,管理所有页面的请求 promise |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
目前 Island.js 中没有添加任何资源预加载优化的逻辑,显然有很大的优化空间。资源预加载主要分为两方面来理解:
加载手段
包含两种:preload
和prefetch
,前者在浏览器解析资源之前,后者在浏览器渲染完成之后的闲暇时间完成。具体可以通过 link 标签来实现,加上rel="preload"
、rel="prefetch"
属性,也可以通过在 JS 中手动请求的方式来实现,不过需要注意设置 HTTP 缓存。静态资源比如图片、css 采用
<link rel="preload">
,兼容性比较好;JS 文件使用<link rel="modulepreload">
,由于兼容性问题,需要加上对应 polyfill,通过 vite 的配置可以自动开启:接下来是
加载对象
,也就是预加载哪些资源。对于当前页面所需要的 css、图片、js,可以采用 preload 方案;对于其他页面,采用 prefetch 方案。由于文档站的页面一般比较多,prefetch 也不适合采取全量 prefetch,将上一页/下一页或者当前 sidebar 的资源进行 prefetch 即可。有想法欢迎在讨论区交流~
English Version:
At present, Island.js has not added any resource preloading optimization logic, obviously there is a lot of room for optimization. Resource preloading is mainly divided into two aspects to understand:
Loading means
includes two types:preload
andprefetch
, the former is completed before the browser parses the resource, and the latter is completed in the idle time after the browser rendering is completed. Specifically, it can be achieved through the link tag, plusrel="preload"
,rel="prefetch"
attributes, or it can be achieved by manual request in JS, but you need to pay attention to setting the HTTP cache.Static resources such as pictures and css use
<link rel="preload">
, which has better compatibility; JS files use<link rel="modulepreload">
, due to compatibility issues, you need to add corresponding polyfills, and pass vite The configuration can be automatically turned on:Next is the
load object
, that is, which resources to preload. For the css, images, and js required by the current page, the preload scheme can be used; for other pages, the prefetch scheme can be used. Since there are generally many pages on the document site, prefetch is not suitable for taking full prefetch, just prefetch the resources of the previous page/next page or the current sidebar.If you have ideas, welcome to exchange in the discussion area~
Beta Was this translation helpful? Give feedback.
All reactions