Workbox：构建项目时无法缓存所有文件答案

【问题标题】：Workbox: cannot cache all files when build projectWorkbox：构建项目时无法缓存所有文件
【发布时间】：2018-02-18 03:57:45
【问题描述】：

我使用Vuejs 和workbox-webpack-plugin 以使我的网站离线，我想缓存一个包含我所有文件（3 个文件）的文件夹，如下图所示，但是当我构建我的项目时（使用@ 987654325@)。 main.js（包含 Vue 的所有内容）无法缓存在 service-woker.js 中。我尝试了一些方法来解决这个问题，但没有奏效。有没有人遇到过这个问题，有解决办法吗，非常感谢！

->>

【问题讨论】：

你能提供完整的 Webpack 配置吗？在 Webpack 生成 main.js 文件之前，听起来 Workbox 插件运行得太早了。

标签： laravel caching vue.js laravel-mix workbox

【解决方案1】：

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

缓存所有静态资产

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

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

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

【讨论】：

【解决方案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'),
  }),
]

【讨论】：

你把maximumFileSizeToCacheInBytes放在哪里（文件名和位置）。