compression-webpack-plugin
compression-webpack-plugin copied to clipboard
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