App Shell

优质

小牛编辑

128浏览

2023-12-01

App Shell 是支持用户界面所需的最小的 HTML、CSS 和 JavaScript。它提供一个最基本的页面结构，便于用户打开应用时迅速看到 Web App 的基本界面，通常包括应用的头部、底部、菜单栏等结构。
App Shell 非常适合用于在弱网网络的情况下将一些初始 HTML 快速加载到屏幕上。

在 app.json 文件中增加 shell 配置，并开启 hydrate，通过 source 配置的文件可以快速生成 App Shell。

{
  "shell": {
    "source": "shell/index"
  },
  "hydrate": true
}

AppShell 示例代码如下：

// /src/shell/index.jsx
import { createElement } from 'rax';

function Shell(props) {
  return (
    <div>
      <div>header</div>
      {props.children}
      <div>footer</div>
    </div>
  );
}
export default Shell;

props.children 是必须的，值为页面内容。

如果您关注过构建后的 index.html 页面，应该发现 App Shell 的内容已被直接注入到页面中，使其可快速加载到用户屏幕。

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>WebApp</title>
</head>
<body>
  <div id="root">
    <div>
      <div>header</div>
      <!-- _ -->
      <div>footer</div>
    </div>
  </div>
  <script src="/web/index.js"></script>
</body>
</html>

开发建议：

App Shell 目前仅能在 Web 环境中生效。

推荐使用内联样式。异步加载的 css 文件，可能不能保证用户更快速的看到页面结构。

在开启 SPA 的项目中可以通过 App Shell 的全局特性，监听路由变化，进行埋点。

import { createElement } from 'rax';

export default function Shell(props) {
  // App Shell 会独立构建，构建时可能没有 history
  if (props.routerConfig) {
    props.routerConfig.history.listen((location, action) => {
      // 埋点
      console.log(`The current URL is ${location.pathname}${location.search}${location.hash}`);
    });
  }

  return (
    <div>
      <div>header</div>
      {props.children}
      <div>footer</div>
    </div>
  );
}

您也可直接修改 document/index.jsx