webpackcompressionservice-workerworkbox-webpack-pluginwebpack-5

compression happened before __WB_MANIFEST injection

I put a console.log for filename in compression-webpack-plugin and at the very beginning of the build process, a log will be printed, actually, after the contents of sw.js file copied to a newly created file called service-worker.js, but at this moment there is no information about self.__WB_MANIFEST which must be preached by workbox precacheAndRoute. At the end of the build process, when information arrived, an array ( preached times with their revision) will be replaced with self.__WB_MANIFEST and got injected into service-worker.js, but no compression log will happen. hence there will be an incompatibility with a compressed and original file for service-wroker.js.

webpack plugins

{
  plugins: [
    // ...
    new WorkboxPlugin.InjectManifest({
      swSrc: './src/setup/sw.js',
      swDest: 'service-worker.js',
      exclude: [/\.(gz|br)$/],
      maximumFileSizeToCacheInBytes: 10 * 1024 * 1024,
    }),
    // ...
    new CompressionPlugin({
      filename(pathData) {
        console.log(pathData)
        return '[path][base].gz'
      },
      algorithm: 'gzip',
      minRatio: 0.8,
      test: /\.(js|css|html|svg|wasm)$/,
   })
  ]
}

packges.json

{
  "webpack": "^5.4.0",
  "compression-webpack-plugin": "^6.0.5",
  "workbox-webpack-plugin": "^6.0.0-alpha.3",
}
Solution

  • As mentioned in this comment, this issue is fixed and you should upgrade compression-webpack-plugin to v6.1.1.