Lavas 的技术原理主要有自动生成路由规则、Skeleton、App Shell。
Vue Router 需要四个步骤做整件事情：第一步定义和引用组件，第二步把组件和路由联系起来，第三步是把刚刚联系起来的数据放到 Router 函数创建实例，第四是把 Router 放到 VUE 创建实例，结束 Vue 实例挂载就。
经过改进， Router 不用自己定义页面级组件，可以认定只要在 Pages 目录中，那组件都是页面级的，从而可以实现自动化 Import，不需要每次写一大堆的代码。另外，绝大多数情况路由规则和组件名称是有对应关系的。自动生成路由规则映射，省去了列出映射关系的麻烦，也避免后期组件改名带来的维护成本。
Skeleton 叫骨架屏，就是实际内容展现之前，有个大概内容给用户看，这样用户提前看到一些东西。这是 Loading 升级版，因为每个组件可以自定义样式、切换时机、列表等。
Lavas 的 Skeleton 都可以用，实现思路是 Vue 的挂载点一般是个空的 DIV，在构建时将 Skeleton 的内容添加到挂载点中，Vue 挂载前清空 DIV 内的占位内容，挂载后渲染为实际内容，使用 SW 预缓存 HTML，访问时直接从缓存中获取 HTML，这样可以让用户看到占位的东西。
App Shell，就是把一个 APP 分两部分，有外壳和内容，把外壳缓存起来，每打开页面先把外壳拿出来，然后再是内容渲染。App Shell 实现有两个步骤，第一是划分，告诉程序哪部分是外壳、哪部分是内容；第二是程序把外壳缓存起来。这需要实现两方面，第一是 SPA，首次请求服务器返回 Index.HTML，所有页面的渲染均由 JS 完成，只在挂载点内重新渲染，单页 Index.html 就是 Shell，使用 SW 预缓存 Index.html 即可。第二是 SSR，首次请求服务器返回给全部内容，后续页面的渲染由 JS 完成。
Web 生态的发展就是互联网的发展，新技术的不断涌现和新场景的不断实现也让这个开放的生态得以持续繁荣。王轶盛表示，百度希望国内的开发者与站长能够多多参与到 PWA 项目中，共同建设和改善国内的 Web App 生态。 |
|
收藏
淘帖
踩
