工作箱：构建项目时无法缓存所有文件

Question

我使用 Vuejs 并使用 workbox-webpack-plugin 以使我的网站脱机，我想缓存一个包含我所有文件（3 个文件）的文件夹，如下图所示，但是当我构建我的项目（使用 Laravel-mix）。 main.js（包含 Vue 的所有内容）不能缓存在 service-woker.js 中。我尝试了一些方法来解决这个问题，但这些都不起作用。有没有人遇到这个问题，有什么解决办法吗，万分感谢！

->>

Answer 1

为什么要手动处理？即使您可以使用

缓存所有静态资产

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

对于动态请求，请使用带有策略的路由：-

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

Answer 2

编辑：前段时间，GitHub 上的一个人帮我解决了这个问题。

这是因为有一个名为 maximumFileSizeToCacheInBytes 的 Workbox 配置属性。默认情况下它设置为 2MB，这意味着它只会缓存小于（或等于）2MB 的文件。我构建的一些文件比那个大。我只需要增加 maximumFileSizeToCacheInBytes 来解决问题，并将那些较大的文件包含在生成的服务工作者中。

我更新的 Workbox 配置如下所示：

plugins: [
  new workboxPlugin({
    globDirectory: DIST_DIR,
    globPatterns: ['js/*.{html,js,css}'],
    maximumFileSizeToCacheInBytes: 5000000, // <-- Added (5 MB)
    swDest: path.join(DIST_DIR, 'sw.js'),
  }),
]

工作箱：构建项目时无法缓存所有文件

Workbox: cannot cache all files when build project

caching

laravel

vue.js

laravel-mix

workbox