Workbox预先缓存Angle的延迟加载包

编程问答 2022-08-16

问题描述

我有一个角度应用程序，并使用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

在这里为您提供更好的主意是第一次加载时的网络快照。

enter image description here

捆绑{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 (将#修改为@）

angularservice-workerworkbox