question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Incompatibility with compression-webpack-plugin in webpack 5

See original GitHub issue

Library Affected: workbox-webpack-plugin

Browser & Platform:

## System:
 - OS: Linux 4.15 Linux Mint 19.1 (Tessa)
## Binaries:
 - Node: 10.16.0 - /usr/local/bin/node
 - Yarn: 1.22.5 - /usr/bin/yarn
 - npm: 6.9.0 - /usr/local/bin/npm

BUG: Compression happened before __WB_MANIFEST injection We use the InjectManifest module. After migrating to WebPack version 5, we noticed that the generated service-worker.js file is compressed by workbox-webpack-plugin before the injection of self.WB__MANIFETS happens. We guess that in the previous version, this file was delivered to this plugin after the injection phase, but in the current version, it is delivered after the file creation phase and before the injection, hence the compressed file Is incomplete.

webpack plugins

{
  plugins: [
    new WorkboxPlugin.InjectManifest({
      swSrc: './src/setup/sw.js',
      swDest: 'service-worker.js',
      exclude: [/\.(gz|br)$/],
    }),
    new CompressionPlugin({
      algorithm: 'gzip',
      minRatio: 0.8,
      test: /\.(js|css|html|svg)$/,
   })
  ]
}

package.json

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

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:3
  • Comments:8 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
jeffposnickcommented, Nov 12, 2020

This should be fixed by upgrading to compression-webpack-plugin v6.1.1.

2reactions
jeffposnickcommented, Nov 11, 2020

Thanks for pointing this out.

After investigating a bit, changing this line in the compression-webpack-plugin’s source from compiler.hooks.compilation.tap to compiler.hooks.thisCompilation.tap seems to resolve the issue, without having to change any of the ordering of the stages.

When the compression plugin hooks into compilation instead of thisCompilation, I see that it’s compression logic runs twice—once for the child compilation created by InjectManifest (which results in the compression happening prior to the manifest injection), and then again following the manifest injection (which I think is a no-op, since that swDest file was already compressed). If I switch it to thisCompilation, then the compression only happens once, after the manifest injection has taken place.

I’m going to open an issue with the compression-webpack-plugin folks to investigate further, and see if switching to thisCompilation is the right approach for them to take.

Read more comments on GitHub >

github_iconTop Results From Across the Web

CompressionWebpackPlugin | webpack
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable...
Read more >
Use latest terser-webpack-plugin with Webpack5
Hi here is how i resolved the Terserof Webpack 5. Before Webpack 5: minimizer: [ new TerserPlugin({ terserOptions: { mangle: { compress: {} ......
Read more >
terser-webpack-plugin - npm
terser-webpack-plugin. TypeScript icon, indicating that this package has built-in type declarations · Readme · Code Beta · 5 Dependencies · 5,720 ...
Read more >
Migrating to Webpack 5 at smallcase - Medium
HexRGBA plugin: As we have removed postcss-hexrgba due to its incompatibility with postcss8 and it not being actively maintained, currently ...
Read more >
compression-webpack-plugin: Versions - Openbase
default value of the filename option is '[path].gz'; use processAssets hook for webpack@5 compatibility, it can create incompatibility with plugins that do ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found