Search code examples
reactjswebpackminifybundling-and-minification

How much does minifying reduce file size?

In a React app, is it possible to find out how much Webpack's minification reduces the project's size excluding all the dependencies and packages not written by the project's developer?

My build/static/ directory is currently bigger than my src directory and I believe it is because code from the dependencies is also minified with the files of interest. Where could I find something to approximately compare my src directory size to?

Solution

  • I built the project with npm run build to find out how large the output is with minimization enabled.

    Then I edited node_modules/react-scripts/config/webpack.config.js and changed line 189 (the line with the minimize property) from:

    ...
    optimization: {
      minimize: isEnvProduction,
      minimizer: [
...

    to:

    ...
    optimization: {
      minimize: false,
      minimizer: [
...

    to disable minimization.

    Then built the project again to find out its size without minimization.

    You can compare the built file sizes manually to find out their difference, but you will also get a nice output to the terminal when building the second time:

    File sizes after gzip:

  613.36 KB (+504.48 KB)  build\static\js\2.0ddf8239.chunk.js
  60.24 KB (+20.01 KB)    build\static\js\main.8e9dd59c.chunk.js
  4.73 KB (+457 B)        build\static\css\main.aaaa4d7d.chunk.css
  1.66 KB (+933 B)        build\static\js\runtime~main.7f8cc4df.js

    Notice the differences stated in parantheses.