Workbox-build不会预缓存某些文件（但是会缓存其他文件）

Question

我有一个Angular 8项目，在使用angular-cli输出到多个捆绑文件后进行构建：

chunk {0} 0.86bbf5c9edb63f626a71.js () 45.4 kB  [rendered]
chunk {1} runtime.b7f5cba16f3e526a1461.js (runtime) 2.44 kB [entry] [rendered]
chunk {2} 2.2ecd18f83cbcdc2f41b1.js () 30.8 kB  [rendered]
chunk {3} 3.3c6f6cac43c897221001.js () 66.7 kB  [rendered]
chunk {4} common.47e8c0f35a6b18d38d74.js (common) 3.78 kB  [rendered]
chunk {5} 5.a2ada2def205b6dd2266.js () 2.1 MB  [rendered]
chunk {6} main.7eef8fe96731a01550cd.js (main) 416 kB [initial] [rendered]
chunk {7} polyfills.ad9a67987ca4da80a52a.js (polyfills) 36.4 kB [initial] [rendered]
chunk {8} styles.8727807d7b65fa51a4c7.css (styles) 598 kB [initial] [rendered]
chunk {9} vendor.17d6b0cb2434f0d8397d.js (vendor) 2.87 MB [initial] [rendered]
chunk {10} 10.f7fd6c136990dd6fca53.js () 571 kB  [rendered]
chunk {11} 11.6d02f073f8b0d383d045.js () 19.9 kB  [rendered]
chunk {12} 12.84e1a02b9b9f7f159775.js () 9.92 kB  [rendered]
chunk {13} 13.d7ede168008c6b29a08c.js () 8.71 kB  [rendered]
chunk {14} 14.e8d9110fbb4072ef19df.js () 3.67 kB  [rendered]
chunk {15} 15.f6088492832d55965c5f.js () 29.9 kB  [rendered]

我使用Workbox 4使用Service Worker（AppShell）在客户端缓存包。

我使用workbox-build包让服务工作者知道必须预先缓存哪些文件名（最终是URL）。>>当我调用

npm run build

时，Workbox-build用实际的文件名对给定的服务工作者文件进行补充（ng build --prod && node workbox-build-inject.js的别名，其中workbox-build-inject.js包含补充默认服务工作者文件的说明。

我的workbox-build-inject.js

：

    const { injectManifest } = require('workbox-build')

    let workboxConfig = {
        globDirectory: 'dist',
        globPatterns: [
            '*.js',
            '*.css',
            'favicon.ico',
            'index.html',
        ],
        swSrc: 'src/service-worker.js',
        swDest: 'dist/service-worker.js'
    }

    injectManifest(workboxConfig)
    .then(({
        count,
        size
    }) => {
        console.log(`Generated ${workboxConfig.swDest}, which will precache ${count} files, totaling ${size} bytes.`)
    })
构建了补充项目后，service-worker.js

出现在我的dist /文件夹中。

// We inject manifest here using "workbox-build" in workbox-build-inject.js
workbox.precaching.precacheAndRoute([
  {
    "url": "0.86bbf5c9edb63f626a71.js",
    "revision": "c57834e89d94af468bc665e4040137ba"
  },
  {
    "url": "10.f7fd6c136990dd6fca53.js",
    "revision": "f26476084572d2c5252d97ffdde9e24a"
  },
  ...
此文件包含所有包，但vendor.17d6b0cb2434f0d8397d.js

和5.a2ada2def205b6dd2266.js尽管它们与workbox-build -inject.js。那么我的构建过程或工作箱配置有什么问题？

[我有一个Angular 8项目，在使用angular-cli输出到几个捆绑文件后生成：块{0} 0.86bbf5c9edb63f626a71.js（）45.4 kB [渲染]块{1} runtime.b7f5cba16f3e526a1461.js ...

Answer 1

事实证明，两个文件未包含在service-worker.js中的原因是文件大小（均超过2Mb）。

根据workbox-build docs，有

maximumFileSizeToCacheInBytes