Question

通过 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