2.2 KiB

Raw Blame History

Omi Snap - 做Prerender的Snap模版

像 Omi，React 之类的 JavaScript 框架在 JavaScript 下载之前没有显示任何内容，所有的内容都是 JS 生成（HTML、CSS，以及延迟加载或者预加载的 chunk 都是 JS 在操纵）。因此，用户会在一段时间内看到空白页面，获得糟糕的用户体验。 Omi Snap解决了这个问题，在构建中加入了标记（HTML / CSS），因此用户可以在下载 JavaScript 文件时就能看到 UI 内容，从而获得更好的用户体验。

Usage

$ npm i -g omi-cli    # 安装omi-cli
$ omi init-snap myapp # 用omi-cli生成omi-snap模版
$ cd myapp
$ npm start           # 开发   
$ npm run build       # 建立模版 - 自动加入标记

什么是Snap(Prerender)？

omi-cli创建一个默认的omi模板，HTML是一个空白，因为所有都是由JavaScript呈现的。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="./manifest.json">
    <link rel="shortcut icon" href="./favicon.ico">
    <title>Omi</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script src="./static/js/index.bb813127.js"></script>
  </body>
</html>