Skip to content

Instantly share code, notes, and snippets.

@didi0613
Last active November 14, 2018 02:06
Show Gist options
  • Save didi0613/680e6c320b6ac4ba966274011d7a0cc2 to your computer and use it in GitHub Desktop.
Save didi0613/680e6c320b6ac4ba966274011d7a0cc2 to your computer and use it in GitHub Desktop.
Component Archetype Webpack 3 & 4 Performance Comparison

Webpack 3 & 4 Performance Comparison

Home App

webpack 3

Hash: 8cd9886d070e82aa564e
Version: webpack 3.12.0
Time: 29991ms
                                                          Asset       Size  Chunks                    Chunk Names
                 homepage_styles.style.8cd9886d070e82aa564e.css     180 kB       2  [emitted]         homepage_styles
                           e65c4899e2d1578eea956e2e7b302ee1.eot    59.7 kB          [emitted]
                          01ac5762282c8384a0930f8cdcf23c12.woff    63.3 kB          [emitted]
                           058bebf24e1fe40ad554212df5b2fa1a.ttf     124 kB          [emitted]
                              hp.bundle.8cd9886d070e82aa564e.js     923 kB       0  [emitted]  [big]  hp
                              ad.bundle.8cd9886d070e82aa564e.js     730 kB       1  [emitted]  [big]  ad
                 homepage_styles.bundle.8cd9886d070e82aa564e.js  601 bytes       2  [emitted]         homepage_styles
           alldepartments_styles.bundle.8cd9886d070e82aa564e.js  607 bytes       3  [emitted]         alldepartments_styles
                         d1f7670b2074b3609c0baf7ec9e39d4f.woff2    54.3 kB          [emitted]
           alldepartments_styles.style.8cd9886d070e82aa564e.css     135 kB       3  [emitted]         alldepartments_styles
                   ../map/hp.bundle.8cd9886d070e82aa564e.js.map    6.35 MB       0  [emitted]         hp
                   ../map/ad.bundle.8cd9886d070e82aa564e.js.map    5.01 MB       1  [emitted]         ad
      ../map/homepage_styles.bundle.8cd9886d070e82aa564e.js.map    5.92 kB       2  [emitted]         homepage_styles
../map/alldepartments_styles.bundle.8cd9886d070e82aa564e.js.map    5.94 kB       3  [emitted]         alldepartments_styles
                                           ../server/stats.json    3.14 kB          [emitted]
                                      ../isomorphic-assets.json    1.22 kB          [emitted]

webpack 4

Version: webpack 4.25.1
Time: 28536ms
Built at: 2018-11-13 18:01:35
                                                          Asset      Size  Chunks                    Chunk Names
                                      ../isomorphic-assets.json  1.19 KiB          [emitted]
                   ../map/ad.bundle.6bbdabd433fe9b523184.js.map  2.67 MiB       0  [emitted]         ad
../map/alldepartments_styles.bundle.6bbdabd433fe9b523184.js.map  4.47 KiB       1  [emitted]         alldepartments_styles
      ../map/homepage_styles.bundle.6bbdabd433fe9b523184.js.map  4.46 KiB       2  [emitted]         homepage_styles
                   ../map/hp.bundle.6bbdabd433fe9b523184.js.map  3.41 MiB       3  [emitted]         hp
                                           ../server/stats.json  3.07 KiB          [emitted]
                          01ac5762282c8384a0930f8cdcf23c12.woff  61.8 KiB          [emitted]
                           058bebf24e1fe40ad554212df5b2fa1a.ttf   121 KiB          [emitted]
                              ad.bundle.6bbdabd433fe9b523184.js   698 KiB       0  [emitted]  [big]  ad
           alldepartments_styles.bundle.6bbdabd433fe9b523184.js  1.03 KiB       1  [emitted]         alldepartments_styles
           alldepartments_styles.style.6bbdabd433fe9b523184.css   147 KiB       1  [emitted]         alldepartments_styles
                         d1f7670b2074b3609c0baf7ec9e39d4f.woff2    53 KiB          [emitted]
                           e65c4899e2d1578eea956e2e7b302ee1.eot  58.3 KiB          [emitted]
                 homepage_styles.bundle.6bbdabd433fe9b523184.js  1.03 KiB       2  [emitted]         homepage_styles
                 homepage_styles.style.6bbdabd433fe9b523184.css   192 KiB       2  [emitted]         homepage_styles
                              hp.bundle.6bbdabd433fe9b523184.js   882 KiB       3  [emitted]  [big]  hp

Electrode Component

webpack 3

clap build

Result:

Hash: e4710dab8fe7fcc692ec
Version: webpack 3.12.0
Time: 2057ms
            Asset     Size  Chunks             Chunk Names
    bundle.min.js  34.9 kB       0  [emitted]  main
bundle.min.js.map   237 kB       0  [emitted]  main
  [46] ./src/index.js 374 bytes {0} [built]
  [88] ./src/styles/wysiwyg-component.css 1.46 kB {0} [built]
  [89] ./node_modules/css-loader?modules&localIdentName=[name]__[local]___[hash:base64:5]&-autoprefixer!./node_modules/postcss-loader!./src/styles/wysiwyg-component.css 627 bytes {0} [built]
  [92] ./src/styles/accordion.css 1.44 kB {0} [built]
  [93] ./node_modules/css-loader?modules&localIdentName=[name]__[local]___[hash:base64:5]&-autoprefixer!./node_modules/postcss-loader!./src/styles/accordion.css 1.01 kB {0} [built]
    + 89 hidden modules
[15:36:08] >>Done Execute electrode/build-dist-min webpack --config CWD/~/electrode-archetype-react-component-dev/config/webpack/webpack.config.js --colors (2.71 sec)
[15:36:08] ..Execute electrode/build-lib:clean-tmp as function
[15:36:08] >>Done Execute electrode/build-lib:clean-tmp as function (0 ms)
[15:36:08] >Done Process electrode/build-dist serial array ["build-dist-min","build-lib:clean-tmp"] (2.72 sec)
[15:36:08] Done Process electrode/build serial array ["clean-dist","build-lib","build-dist"] (3.44 sec)

webpack 4

clap build
Hash: 5a36962fa842852807d7
Version: webpack 4.25.1
Time: 2184ms
Built at: 2018-11-13 09:59:05
                                  Asset        Size  Chunks             Chunk Names
                          bundle.min.js    27.3 KiB       0  [emitted]  main
                      bundle.min.js.map     100 KiB       0  [emitted]  main
    main.style.5a36962fa842852807d7.css  1020 bytes       0  [emitted]  main
main.style.5a36962fa842852807d7.css.map   112 bytes       0  [emitted]  main
                         main.style.css   996 bytes       0  [emitted]  main
                     main.style.css.map    91 bytes       0  [emitted]  main
Entrypoint main = bundle.min.js main.style.css main.style.5a36962fa842852807d7.css bundle.min.js.map main.style.css.map main.style.5a36962fa842852807d7.css.map
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment