App Shell
优质
小牛编辑
132浏览
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