2018年在+PWA+中使用+App+Shell+模型提升性能和用户感知体验.pdf

1、在 PWA 中使用 App Shell 模型提升性能和用户感知体验App Shell 模型SPA 中的应用SSR 中的应用App Shell 性能Skeleton 方案Native App快速加载运行基础 UI离线可用App Shell 模型HTML+CSS+JS快速加载运行可缓存动态加载后续路由不同架构下如何应用这一模型？Server-side vs Client-side首屏加载速度快后续页面跳转迅速同构应用&App Shell 模型SPA 中的应用SSR 中的应用App Shell 性能Skeleton 方案SPAPRPL 模式&PRPL 模式Push 推送关键资源 Render 渲染初

2、始路由Precache 预缓存剩余路由Lazyload 延迟加载并按需创建剩余路由https:/ CSSJS entry chunkPushRenderwebpack manifestroutervendorPrecacheJS async chunkJS async chunk后续路由按需加载LazyloadPRPL 相关技术构建工具支持Service Worker 缓存前端路由HTTP/2大量成熟框架&构建工具 PRPL 相关技术构建工具支持Service Worker 缓存前端路由HTTP/2代码分割Polymer 中的代码分割 entrypoint:index.html,shell:s

3、rc/my-app.html,fragments:src/list-view.html,src/detail-view.html,src/404.html Dynamic importimport(/*webpackChunkName:my-view1*/./my-view1).then(myView1)=/.);CommonsChunkPluginjs app.js my-view1.js+PRPL 相关技术构建工具支持Service Worker 缓存前端路由HTTP/2推送静态资源PRPL 相关技术构建工具支持Service Worker 缓存前端路由HTTP/2路由支持var reso

4、lvedPageUrl=this.resolveUrl(my-view1.html);this.importHref(resolvedPageUrl,null,this._importFailedCallback,true);APIconst MyView1=()=import(./MyView1.vue);const router=new VueRouter(routes:path:/my-view1,component:MyView1 );异步组件PRPL 相关技术构建工具支持Service Worker 缓存前端路由HTTP/2资源预取 https:/www.w3.org/TR/reso

5、urce-hints/#prefetchService Worker 预缓存var cacheName=app-shell;var filesToCache=/index.html,/js/main.js,/css/main.css,/js/my-view1.js;self.addEventListener(install,function(e)e.waitUntil(caches.open(cacheName).then(function(cache)return cache.addAll(filesToCache);););App Shell后续重要路由构建时生成预缓存列表Workboxi

6、mportScripts(./workbox-sw.prod.js);importScripts(./precache-manifest.js);workbox.skipWaiting();workbox.clientsClaim();workbox.precaching.precacheAndRoute(self._precacheManifest);构建时生成预缓存列表缓存更新动态缓存SPA PRPL 模式Push HTTP/2 preloadRender RouterPrecache Service Worker+WorkboxLazyload 构建工具+Routerhttps:/ Sh