https://github.com/meskill/webpack5-performance-issue
Reproduction repo for issue https://github.com/webpack/webpack/issues/12102
https://github.com/meskill/webpack5-performance-issue
Last synced: 7 months ago
JSON representation
Reproduction repo for issue https://github.com/webpack/webpack/issues/12102
- Host: GitHub
- URL: https://github.com/meskill/webpack5-performance-issue
- Owner: meskill
- Created: 2020-12-04T08:06:32.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-07-02T13:43:35.000Z (almost 5 years ago)
- Last Synced: 2025-03-22T02:01:41.571Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 483 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Webpack 5 test repo
This repo shows performance degradation of rebuild for webpack5 comparing to webpack4
source code is based on https://github.com/Yog9/SnapShot to simulate some real world example
## How to reproduce
1. Clone this repo
2. Run `npm ci`
3. Run `cd webpack4 && npm ci && npm run start` webpack will start in watch mode with node's inspect flag to allow profiling
4. Make some changes to src to trigger bundle rebuild (for example change 'root' string inside ./src/index.js)
This will show time to rebuild for webpack4:
```
[webpack-cli] Compilation finished
Hash: ba2b207d6c77ce2c4d86
Version: webpack 4.44.2
Time: 30ms
Built at: 12/04/2020 8:38:32 AM
Asset Size Chunks Chunk Names
main.js 1.12 MiB main [emitted] main
styles.d938c1a8dd4406a5b9a5.css 3.53 KiB main [emitted] [immutable] main
Entrypoint main = styles.d938c1a8dd4406a5b9a5.css main.js
[0] css ../node_modules/css-loader/dist/cjs.js??ref--5-1!../src/index.css 3.53 KiB {main}
[../node_modules/react-dom/cjs/react-dom.development.js] 708 KiB {main}
[../node_modules/react-dom/index.js] 1.32 KiB {main}
[../node_modules/react-router-dom/esm/react-router-dom.js] 10.1 KiB {main}
[../node_modules/react/cjs/react.development.js] 65.9 KiB {main}
[../node_modules/react/index.js] 189 bytes {main}
[../src/App.js] 6.2 KiB {main}
[../src/components copy 2 sync recursive ^\.\/.*$] ../src/components copy 2 sync ^\.\/.*$ 493 bytes {main}
[../src/components copy 2/Container.js] 761 bytes {main}
[../src/components copy 3 sync recursive ^\.\/.*$] ../src/components copy 3 sync ^\.\/.*$ 493 bytes {main}
[../src/components copy sync recursive ^\.\/.*$] ../src/components copy sync ^\.\/.*$ 493 bytes {main}
[../src/components sync recursive ^\.\/.*$] ../src/components sync ^\.\/.*$ 493 bytes {main}
[../src/index.css] 50 bytes {main}
[../src/index.js] 735 bytes {main} [built]
[../src/serviceWorker.js] 4.6 KiB {main}
+ 97 hidden modules
```
5. Close current running command at terminal and run `cd ../webpack5 && npm ci && npm run start`
6. Make some changes to src to trigger bundle rebuild (for example change 'root' string inside ./src/index.js)
```
[webpack-cli] Compilation finished
assets by status 3.53 KiB [cached] 1 asset
asset main.js 1.16 MiB [emitted] (name: main)
Entrypoint main 1.16 MiB = styles.679973daa17585e38272.css 3.53 KiB main.js 1.16 MiB
cached modules 1020 KiB (javascript) 3.53 KiB (css/mini-extract) [cached] 109 modules
runtime modules 1.19 KiB 5 modules
../src/index.js 735 bytes [built] [code generated]
webpack 5.9.0 compiled successfully in 90 ms
```
7. Rebuild time for webpack5 shows more than 2 times slowness compare to webpack4