spa首屏优化的思考

[Jmingzi]

利用ssr结合pwa，将app shell缓存在本地

由于做了code-spliting，需要收集路由依赖，将对应的js preload或prefetch

app-shell为webpack打包时，将依赖的js收集起来，生成新的service-worker.js，cache到本地，另外在需要显示的页面，利用组件的空状态先将app-shell渲染出来，再在下个eventloop的时候new Vue

关于本地缓存的更新，由于生成了新的service-worker.js，里面cachelist的文件也是由webpack打包带hash的，所以delete掉不在cachelist的文件即可

以上处理完带hash的js，都会在打包时插入到html中

另外，如果非ssr怎么办？

首先，app shell不可能手动开发，它可能只存在与首页路由里

html是可以被cache的，因为只要service-worker.js会更新就不会有问题

那么，我们可以这样做

• app shell可以用工具生成，然后插入到html中，是否显示需要根据当前路由来判断
• 利用pwa缓存html、app shell的依赖及其它不常更新的文件

一张流程图

延伸阅读：

• 饿了么的 PWA 升级实践
• 在 PWA 中使用 App Shell 模型

[Jmingzi]

App shell生成相关

• 基于vue-cli实现自动生成Skeleton Page，多页skeleton
• 自动化生成 H5 骨架页面
• puppeteer node中操作chrome的库，page-skeleton-webpack-plugin基于它
• skeleton 一个很简单的响应式模板与此无关

webpack插件

• page-skeleton-webpack-plugin 只能生成唯一的骨架页面
• vue-skeleton-webpack-plugin 为不同的页面配置不同的骨架屏

pwa应用构建工具

• 百度的lavas
• workbox
• 使用 Workbox 构建 PWA

preload和prefetch

[译]Preload，Prefetch 和它们在 Chrome 之中的优先级

preload 是声明式的 fetch，可以强制浏览器请求资源，同时不阻塞文档 onload 事件

prefetch 提示浏览器这个资源将来可能需要，但是把决定是否和什么时间加载这个资源的决定权交给浏览器

对于当前页面很有必要的资源使用 preload，对于可能在将来的页面中使用的资源使用 prefetch

preload 使用 “as” 属性加载的资源将会获得与资源 “type” 属性所拥有的相同的优先级。比如说，preload as="style" 将会获得比 as=“script” 更高的优先级。这些资源同样会受内容安全策略的影响（比如说，脚本会受到其 “src” 属性的影响）。

延伸阅读
prefetch, preload, dns-prefetch，defer和async

[Jmingzi]

目前有2种实现方案

第一种，相对已有项目去改动是合适的

• 利用workbox-webpack-plugin和sw-register-webpack-plugin在编译时注入生成sw.js和manifest.json
• 结合vue-skeleton-webpack-plugin生成单页或多页面app shell

当然，也可以自己手动写sw.js和manifest。

延伸阅读:

• 给Vue集成Skeleton骨架屏，并加持PWA

第二种，使用类似lavas或workbox构建工具去构建项目，这样的话就是使用一整套了，要学习它们各自的风格规范及使用。

[Jmingzi]

app shell实践结果

• page-skeleton-webpack-plugin还是很强大，由于它是基于puppeteer的，安装依赖的时候会去下载82M的chromium，公司网络下载不了，改用4G后成功下载。
• vue-skeleton-webpack-plugin支持vue-cli 3，在vue.config.js里增加plugin即可。在打包后，会将html和style注入到模版html中的根元素div中，它使用的vue ssr的createServerRender渲染得到的html。

用后，瞬间觉得索然无味～它和loading的作用一致的，好处在于提供了了一个骨架页面，但如果结合工具将其自动化后还是可以一用的。

如果加了js逻辑、或重绘，这就没有必要了。

pwa实践结果

• 蛋疼的是：WKWebView目前不支持serviceWorker属性
• 在安卓5.1上，效果不明显，依然会出现加载的进度条，将近1s的时间。原因可能有，没有将当前页面资源添加preload和页面可能依赖的其它资源添加prefetch。

我看了下iOS微信的webview也是不支持的，似乎很多应用的webview都是采用的WKWebView，那在实际的业务应用中，场景就很小了。