Workbox: cannot cache all files when build project

问题

I use Vuejs and I use workbox-webpack-plugin in order to make my site offline, I want to cache a folder which contains all my files (3 files) like picture below, but when I build my project(using Laravel-mix). The main.js (which contains everything of Vue) cannot be cached in service-woker.js. I tried some ways to fix that but those didn't work. Does anybody face this issue, do you have any solution, many thanks!

->>

回答1:

Why are you dealing it manually? Even though you can cache all static asset using

workbox.precaching.precacheAndRoute(self.__precacheManifest || []);

and for dynamic request please use routing with strategy:-

workbox.routing.registerRoute('end point url', workbox.strategies.networkFirst({
cacheName: 'cache-name'
}));

回答2:

EDIT: After a longtime haven't looked back this issue, there's a guy on github helped me find out why.

It's because there's a property in the library call maximumFileSizeToCacheInBytes is set default to 2MB, that means it will only cache files which in smaller or equal 2MB, while some of my built files are larger than that. So you just need to increase maximumFileSizeToCacheInBytes do solve this issue.

来源：https://stackoverflow.com/questions/46129776/workbox-cannot-cache-all-files-when-build-project