如何解决Workbox预先缓存Angle的延迟加载包
我有一个角度应用程序,并使用Workbox Service Worker(SW)获得PWA兼容性。我的角度应用程序有几个延迟加载的包,除了仅在需要时才加载。在开发模式下一切正常,因为我的软件仅在生产中启用。
问题在于,每当我加载应用程序时,原本应该延迟加载的包也会加载。这不是首选。
工作箱预缓存配置会缓存所有js
文件。我认为这是引起问题的一个原因。这是配置workbox-config.js
module.exports = {
globDirectory: 'dist/myapp/',globPatterns: ['**/*.{css,scss,eot,html,ico,jpg,jpeg,js,json,png,svg,ttf,txt,webmanifest,woff,woff2,webm,xml}'],globFollow: true,globStrict: true,globIgnores: [
`**/*-es5.*.js`,'**/assets/tinymce/**','**/assets/icons/icon-*.png'
],dontCacheBustURLsMatching: new RegExp('.+.[a-f0-9]{20}..+'),maximumFileSizeToCacheInBytes: 4 * 1024 * 1024,swSrc: 'dist/myapp/service-worker.js',swDest: 'dist/myapp/service-worker.js'
};
然后在使用此版本进行生产构建后将其注入到我的软件中
workbox injectManifest ./src/sw/workbox-config.js
在这里为您提供更好的主意是第一次加载时的网络快照。
捆绑{6,7,8,9}-es2015.*.js
预计将被延迟加载。但是我认为由于我的Workbox配置,它会在启动时自行加载。我不希望发生这种情况,因为初始负载的总下载大小会超出可接受范围。
因此,我想出的解决方案是改为使用运行时缓存,方法是在SW文件中这样做。
const appChunksMatcher = ({ url,request,event }) => {
const href: string = url.href;
const start = href.lastIndexOf('.') + 1;
const end = href.length - 1;
const isJSFile = href.substring(start,end) === 'js';
return ~href.indexOf('-es2015.') || isJSFile;
};
registerRoute(
appChunksMatcher,new CacheFirst({
cacheName: 'app-chunks'
})
);
但是,我不确定这是正确的方法。我尝试在工作区配置globIgnores
数组中添加正则表达式检查,以排除main-es2015
块以外的哈希块。
globIgnores: [
...
...
// This is to exclude precaching of lazy loaded angular chunks
// They are of format 5-es2015.sbcd123e34fd.js
'**/*-es2015.*.js'
`[0-9]+\-es2015.*.js$`
]
但是那也不起作用。这就是为什么我使用了运行时缓存选项。谁能告诉我我在做什么错,还是可以为我提供更好的解决方案。当然,我不想在启动时加载我的延迟加载模块。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。