Workbox-build не добавляет к работнику службы ** некоторые ** URL-адреса предварительного кэширования (но добавляет другие) - PullRequest
Новая
       43

Workbox-build не добавляет к работнику службы ** некоторые ** URL-адреса предварительного кэширования (но добавляет другие)

0 голосов
/ 10 января 2020

У меня есть проект 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 для кэширования комплектов на клиенте сторона, использующая сервисный работник (AppShell).

Я использую пакет workbox-build , чтобы сервисный работник знал, какие имена файлов (и, в конечном счете, URL) он должен предварительно кэшировать.

Workbox-build дополняет данный файл рабочего сервиса фактическими именами файлов, когда я вызываю npm run build (псевдоним для ng build --prod && node workbox-build-inject. js, где workbox-build-inject. js содержит инструкции для дополнения файла рабочего сервиса по умолчанию).

My 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 несмотря на то, что они соответствуют правилу "*. js" из workbox-build-inject. js.

Итак что может быть не так с моим процессом сборки или конфигурацией рабочей коробки?

1 Ответ

0 голосов
/ 10 января 2020

Оказывается, причина того, что два файла не включены в сервис-работника. js - это размер файлов (оба более 2 МБ).

Согласно workbox-build docs есть maximumFileSizeToCacheInBytes параметр:

maximumFileSizeToCacheInBytes : необязательный номер, по умолчанию 2097152

Это значение можно использовать для определения максимального размер файлов, которые будут кешированы. Это предотвращает непреднамеренное предварительное кэширование очень больших файлов, которые могли случайно соответствовать одному из ваших шаблонов.

Пример: 

// Increase the limit to 4mb:
maximumFileSizeToCacheInBytes: 4 * 1024 * 1024

, поэтому здесь исправлено 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',
        // Custom size limit
        maximumFileSizeToCacheInBytes: 4 * 1024 * 1024
    }

    injectManifest(workboxConfig)
    .then(({
        count,
        size
    }) => {
        console.log(`Generated ${workboxConfig.swDest}, which will precache ${count} files, totaling ${size} bytes.`)
    })
...