compression-webpack-plugin
compression-webpack-plugin copied to clipboard
webpack-contrib
Bug: `deleteOrigianlAssets: true` breaks the build badly...
Bug report
Created an empty npx create-react-app@latest webpack-compress-test, added this plugin and broke the build.
Looks like CompressionPlugin is racing with HtmlWebpackPlugin and deletes original .js files too early... before HtmlWebpackPlugin gets a chance to process them.
Steps to reproduce:
- Create new react app:
€ npx create-react-app@latest webpack-compress-test
Creating a new React app in /Users/mman/Developer/webpack-compress-test.
Installing packages. This might take a couple of minutes.
...
- Add compression plugin dependency:
€ npm install compression-webpack-plugin --save-dev
added 5 packages, and audited 1561 packages in 2s
...
- Eject config to get access to
webpack.config.js
€ npm run eject
> [email protected] eject
> react-scripts eject
NOTE: Create React App 2+ supports TypeScript, Sass, CSS Modules and more without ejecting: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html
✔ Are you sure you want to eject? This action is permanent. … yes
Ejecting...
...
- Try to build:
€ npm run build
> [email protected] build
> node scripts/build.js
Creating an optimized production build...
Compiled successfully.
...
- Examine output:
€ ls -l build/static/js
total 1064
-rw-r--r-- 1 mman staff 4542 May 22 12:42 453.80dd94dc.chunk.js
-rw-r--r-- 1 mman staff 10597 May 22 12:42 453.80dd94dc.chunk.js.map
-rw-r--r-- 1 mman staff 143827 May 22 12:42 main.2663d1cb.js
-rw-r--r-- 1 mman staff 971 May 22 12:42 main.2663d1cb.js.LICENSE.txt
-rw-r--r-- 1 mman staff 371868 May 22 12:42 main.2663d1cb.js.map
- Enable compression plugin:
Now modify the config/webpack.config.js and enable compression plugin as the last step to compress everything.
+const CompressionPlugin = require("compression-webpack-plugin");
...
+ new CompressionPlugin({
+ threshold: 0,
+ deleteOriginalAssets: true,
+ })
+
- Try to build:
€ npm run build
> [email protected] build
> node scripts/build.js
Creating an optimized production build...
Failed to compile.
Cannot destructure property 'info' of 'compilation.getAsset(...)' as it is undefined.
Actual Behavior
Build fails:
€ npm run build
> [email protected] build
> node scripts/build.js
Creating an optimized production build...
Failed to compile.
Cannot destructure property 'info' of 'compilation.getAsset(...)' as it is undefined.
Expected Behavior
Build should succeed with all files being .gzipped
How Do We Reproduce?
See the detailed steps above.
The repo contains broken code: https://github.com/mman/webpack-compress-test The commit here enables the compression: https://github.com/mman/webpack-compress-test/commit/6ba1e3c9542994a0170747dcb12851e63d801119
I think we will need a fix in html-webpack-plugin too, I will investigate tomorrow deeply and provide fixes for html-webpack-plugin too
You can fix it using test: /\.(js|css)$/,, something wrong in manifest-webpack-plugin (looks like a wrong hook)
Yeah, please use test: /\.(js|css)$/ right now, need debug when manifest-webpack-plugin breaks the build...
This issue occurs because WebpackManifestPlugin generates a new asset asset-manifest.json during the processAssets stage.
Then, Webpack invokes the processAdditionalAssets hook with: newAsset({ "asset-manifest.json": new RawSource(...) }) Both CompressionPlugin and TerserPlugin start processing newAsset concurrently.
CompressionPlugin compresses and deletes asset-manifest.json, then creates asset-manifest.json.gz. At this point, Compilation.assets no longer contains the file, but newAsset remains unchanged.
When TerserPlugin tries to minify the file, it throws an error because asset-manifest.json no longer exists.
I'll submit a PR later to fix this.
