预加载和预渲染
优质
小牛编辑
135浏览
2023-12-01
通过 runApp 方法运行的 Web 应用,可通过 rax-pwa 提供的 preload 和 prerender 方法优化用户体验。
$npm i rax-pwa --save
预加载
预加载资源可以帮助页面更快速的渲染。
可通过 preload 来进行预加载。仅对 Web App 有效。
import { createElement } from 'rax';
import { preload } from 'rax-pwa';
function Index(props) {
// preload(options)
preload({path: '/page1'});
// 预加载 app.json 中配置 routes 的 path 为 '/page1' 页面的 js bundle。
// 预加载其他资源
// 注:此方式由浏览器决定预加载和回收的时机,可运行在非 runApp 运行的应用中。
preload({href: '//xxx.com/font.woff', as: 'font', crossorigin: true});
// https://www.w3.org/TR/preload/
// 等同于 <link rel="preload" href="//xxx.com/font.woff" as="font" crossorigin>
return (
<h1>Hello Rax PWA!</h1>
);
}
export default Index;
预渲染
预渲染是一个重量级的选项,它可以让浏览器提前加载指定页面的所有资源、创建 DOM、渲染页面、执行JS等等。这样它的打开速度将会是0秒!
要小心的使用 prerender,因为它将会加载很多资源并且可能造成带宽的浪费,尤其是在移动设备上。
可通过 prerender 来进行预渲染。仅对 Web App 有效。
import { createElement } from 'rax';
import { prerender } from 'rax-pwa';
function Index(props) {
// prerender(options)
// 若 app.json 中目标页面开启了 keepAlive ,目标页将会被渲染入 HTML 中。
// 反之,仅预加载目标页的 js bundle
prerender({path: '/page1'});
// 预渲染 app.json 中配置 routes 的 path 为 '/page1' 的页面。
// 预渲染其他页面
// 注:此方式由浏览器决定预渲染和回收的时机,可运行在非 runApp 运行的应用中。
prerender({href:'https://m.taobao.com'});
// https://www.w3.org/TR/resource-hints/#prerender
// 等同于 <link rel="prerender" href="https://m.taobao.com">
return (
<h1>Hello Rax PWA!</h1>
);
}
export default Index;
您也可直接修改 document/index.jsx