Open Jmingzi opened 6 years ago
page-skeleton-webpack-plugin
基于它webpack插件
preload 是声明式的 fetch,可以强制浏览器请求资源,同时不阻塞文档 onload 事件
prefetch 提示浏览器这个资源将来可能需要,但是把决定是否和什么时间加载这个资源的决定权交给浏览器
对于当前页面很有必要的资源使用 preload,对于可能在将来的页面中使用的资源使用 prefetch
preload 使用 “as” 属性加载的资源将会获得与资源 “type” 属性所拥有的相同的优先级。比如说,preload as="style" 将会获得比 as=“script” 更高的优先级。这些资源同样会受内容安全策略的影响(比如说,脚本会受到其 “src” 属性的影响)。
第一种,相对已有项目去改动是合适的
workbox-webpack-plugin
和sw-register-webpack-plugin
在编译时注入生成sw.js
和manifest.json
vue-skeleton-webpack-plugin
生成单页或多页面app shell当然,也可以自己手动写sw.js
和manifest
。
延伸阅读:
第二种,使用类似lavas
或workbox
构建工具去构建项目,这样的话就是使用一整套了,要学习它们各自的风格规范及使用。
82M
的chromium
,公司网络下载不了,改用4G后成功下载。vue.config.js
里增加plugin即可。在打包后,会将html和style注入到模版html中的根元素div中,它使用的vue ssr的createServerRender
渲染得到的html。用后,瞬间觉得索然无味~它和loading的作用一致的,好处在于提供了了一个骨架页面,但如果结合工具将其自动化后还是可以一用的。
如果加了js逻辑、或重绘,这就没有必要了。
serviceWorker
属性preload
和页面可能依赖的其它资源添加prefetch
。我看了下iOS微信的webview也是不支持的,似乎很多应用的webview都是采用的WKWebView,那在实际的业务应用中,场景就很小了。
利用ssr结合pwa,将
app shell
缓存在本地由于做了
code-spliting
,需要收集路由依赖,将对应的jspreload
或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中,是否显示需要根据当前路由来判断app shell
的依赖及其它不常更新的文件一张流程图
延伸阅读: