self.__WB_MANIFEST不會被InjectManifest生成的url替換，以便使用serviceworker進行預快取

這是我的 webpack 配置

    new InjectManifest({
      swSrc: './app/service-worker.js',
      swDest: 'sw.js',
      maximumFileSizeToCacheInBytes: 5000000,
    }),

這是我的 service-worker.js

import { skipWaiting, clientsClaim } from 'workbox-core';
import { cleanupOutdatedCaches, precacheAndRoute } from 'workbox-precaching';

skipWaiting();
clientsClaim();
cleanupOutdatedCaches();
precacheAndRoute(self.__WB_MANIFEST || []);

這就是我注冊服務人員的方式

import { Workbox } from 'workbox-window';

const register = () => {
  // service worker should be installed only in prod env.
  if (process.env.NODE_ENV !== 'production') {
    return;
  }
  // check if browser supports SW before register.
  if ('serviceWorker' in navigator) {
    const wb = new Workbox('/company/sw.js');

    wb.register().then((registration) => {
      console.log('Registration success', registration.scope);
    }).catch((err) => {
      console.log('Registration failed', err);
    });
  }
};

register();

這是 webpack bundler 使用 InjectManifest 生成的 sw.js 代碼，它通過替換 self.__WB_MANIFEST 來注入路由

    f81121bb716d06db5a3c: function (e, t, r) {
        "use strict";
        var n = r("ee2c850f71b22ec627d9"),
            a = r("71160463eb5f8808d43e");
        (0, n.skipWaiting)(), (0, n.clientsClaim)(), (0, a.cleanupOutdatedCaches)(), (0, a.precacheAndRoute)([{
            'revision': 'd6d49a7c4da3232a63313d0296cb697c',
            'url': '/company/index.html'
        },  {
            'revision': null,
            'url': '/company/static/js/main.eecf38c8e0bdeb9edfd0.chunk.js'
        }, {
            'revision': 'd77aa54cfc47caccf631a032dccdd1a4',
            'url': '/company/static/js/main.eecf38c8e0bdeb9edfd0.chunk.js.br'
        }, {
            'revision': 'f583ac2ae2e839d40f7390f44de0d09e',
            'url': '/company/static/js/main.eecf38c8e0bdeb9edfd0.chunk.js.gz'
        }, {
            'revision': null,
            'url': '/company/static/js/node_vendors.dfc2f2b312f9103e4f57.chunk.js'
        }, {
            'revision': 'cc71224b8f04e2722f7fd8e934625d99',
            'url': '/company/static/js/node_vendors.dfc2f2b312f9103e4f57.chunk.js.br'
        }, {
            'revision': 'a66582b83e005784db6aa640e3075f67',
            'url': '/company/static/js/node_vendors.dfc2f2b312f9103e4f57.chunk.js.gz'
        }, {
            'revision': null,
            'url': '/company/static/js/runtime~main.67d1bc90b93c84b2daf6.js'
        }, {
            'revision': 'e0a95983d322b621a7fd3b16888aaa8b',
            'url': '/company/sw.js.br'
        }, {
            'revision': 'e1ab2a71f411919e92a90675915af0ef',
            'url': '/company/sw.js.gz'
        }] || [])
    },

下面是從 localhost 提供時來自 devtools 的 sw.js 代碼的螢屏截圖

正如我們在 localhost 中提供的 sw.js 檔案中清楚地看到的那樣，self.__WB_MANIFEST 沒有被 InjectManifest 生成的 url 替換。在這里，我的問題是 sw.js 檔案為何與捆綁程式生成的代碼不同。我嘗試注銷服務作業者并嘗試清空快取，但 sw.js 與我在構建中所擁有的內容與所服務的內容之間仍然存在差異。請在這里提出一些想法。下面是我使用的版本

    "workbox-core": "^6.4.2",
    "workbox-precaching": "^6.4.2",
    "workbox-window": "^6.4.2",
    "workbox-webpack-plugin": "^6.4.2"

uj5u.com熱心網友回復：

經過一天的努力，我弄清楚了哪里出錯了。以前我的 webpack 配置是這樣的

    new CompressionPlugin({
      filename: '[path].gz[query]',
      algorithm: 'gzip',
      test: /\.js$|\.css$|\.html$/,
      threshold: 10240,
      minRatio: 0.7,
    }),

    new BrotliPlugin({
      asset: '[path].br[query]',
      test: /\.js$|\.css$|\.html$/,
      threshold: 10240,
      minRatio: 0.7,
    }),
        new InjectManifest({
      // exclude: [/\.map$/, /asset-manifest\.json$/],
      // importWorkboxFrom: 'cdn',
      swSrc: './app/service-worker.js',
      swDest: 'sw.js',
      maximumFileSizeToCacheInBytes: 5000000,
    }),

現在我將 InjectManifest 插件移到了最終解決問題的壓縮插件之前

    new InjectManifest({
      // exclude: [/\.map$/, /asset-manifest\.json$/],
      // importWorkboxFrom: 'cdn',
      swSrc: './app/service-worker.js',
      swDest: 'sw.js',
      maximumFileSizeToCacheInBytes: 5000000,
    }),

    new CompressionPlugin({
      filename: '[path].gz[query]',
      algorithm: 'gzip',
      test: /\.js$|\.css$|\.html$/,
      threshold: 10240,
      minRatio: 0.7,
    }),

    new BrotliPlugin({
      asset: '[path].br[query]',
      test: /\.js$|\.css$|\.html$/,
      threshold: 10240,
      minRatio: 0.7,
    }),

任何人都知道 webpack 在制作捆綁包時如何處理這個問題

標籤：

上一篇：NG_PERSISTENT_BUILD_CACHE=1ng服務不作業

下一篇：webpack：在公共檔案夾中轉譯網路作業者