spa首屏优化的思考

Jmingzi commented 6 years ago

利用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会更新就不会有问题

那么，我们可以这样做

一张流程图

architecture

webpack插件

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

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

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

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

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

Jmingzi commented 6 years ago

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

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

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

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逻辑、或重绘，这就没有必要了。

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

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

Jmingzi / blog