随着用户对原生APP使用习惯的养成，Web App 提供的用户使用体验也越来越成为了大家关注的焦点。而 App Shell 模型可以帮助我们提供类似原生App的快速启动体验，同时保持 Web 应用的灵活性。
lavas-extension-appshell 是基于 Lavas 构建工具的扩展，采用 App Shell 模型对 Web 应用进行优化，提供更好的启动体验。本篇文章将介绍如何安装和使用这一扩展。
安装
在开始使用 lavas-extension-appshell 之前，需要先在项目目录下启用该扩展。以下是启用扩展的具体步骤：
- 安装
@lavas/cli（如果已安装则略过此步骤）：
npm install -g @lavas/cli
- 在项目根目录下安装
lavas-extension-appshell：
npm install lavas-extension-appshell --save-dev
- 在项目根目录下修改
lavas.config.js。添加以下代码（如果已有build对象，则将以下代码合并进去）：
-- -------------------- ---- -------
------ -
-- ---
---- ------
--------- -
------ ------------------------
------- --------------------------------
--------- --------------------------------
------ -
------- -----
----------- ---
--
---------------- ----
---------------------- ---- - -- - -- - --
-
-在以上配置项中，entry 和 routes 分别对应你的项目的入口文件和路由文件。manifest 指定生成的 manifest.json 文件的路径，cache 配置 App Shell 模型的缓存策略，dynamicStartUrl 指定 App Shell 模型在客户端加载完成后进入的路由，dynamicUpdateInterval 指定 App Shell 模型在客户端使用一段时间后检查更新的时间间隔，单位为毫秒。
使用
启用扩展后，你可以使用 build 命令进行构建。如下：
npm run build
构建完毕后，你可以在设置的 manifest 所指定的路径下找到生成的 manifest.json 文件，同时，Lavas 也为我们生成了一些用于 App Shell 加速的文件，它们会被放置在项目的 assets/appshell 文件夹下。
最后，你需要将 index.html 中的 css 和 js 的引用添加到 manifest.json 文件中，以便 App Shell 加速时正确的加载资源。具体说明请参考 App Shell W3C 规范.
-- -------------------- ---- -------
-
------- ------ -------- ------
-------- -
-
------ -----------------------------------------------
-------- ----------
------- -----------
--
-
------ -----------------------------------------------
-------- ----------
------- -----------
-
--
------------ ----
---------- -------------
------------------- ----------
-------------- ----------
-------------- -----------
----------------------- ---
-------- ----
------------- ---
------- --------
-------------- ---
------------------------------ ------
------ -
------------------------------
--
----- -
----------------------------
-
-示例代码
以下是源码中的一个 entry-appshell.js 文件示例：
-- -------------------- ---- -------
------ - --------- - ---- ---------
----- - ---- ------- ----- - - ------------
-- -------------------------- -
---------------------------------------------
-
----------------- -- -
-------------------
---
-- ------------------------- -
----- ------ - ----------------------
----- --------------- - ---------------------------------------------
---------- ---------
-------- -
--- -----------------------------------------
----------- ----
-------------- - - -- - -- - ---
---
--
---
------------------------------------------- ---- ----- ----- -- -
-- --- -- ------- -- ----------------- -
-----------------
----------------------
-- ------------------------ -- -
-------
----------- -- -
-------
---
- ---- -
-------
-
---
-主要作用是为 router 实例添加了 onReady 事件，以便在路由就绪后渲染应用程序，并添加了一个额外的 if 判断以检测当前是否为 App Shell 模式，并实现了缓存策略来优化使用体验。
总结
以上是一份简单的使用教程及范例，希望可以帮助大家更加深入的了解和使用 lavas-extension-appshell。在 Web App 开发中，App Shell 模型是值得重视的优化方式，它能有效提升应用程序的启动速度和用户体验。
Happy Coding!
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005604a81e8991b448de769