React - Build too big

Question

I am developing a website in React with Typescript. It happens that before when doing npm run build, the briefcase build generated had an acceptable size 4mb, and eventually, after having moved from classes to Hooks, now the build has 30mb, and the folder build/static/js has more than 10000 files .chunk and .chunk.map unlike before I only had 4! What could have happened? I don’t understand why.

Answer 1

Often when you don’t do the optimization itself, the size of the build can grow quite large once all the files you are importing are placed in the same output, including its dependencies.

There are, however, techniques to circumvent this problem. The most common of these is the code-splitting, that is to divide your code into multiple parts. The React documentation has a section on this.

You can still use services such as Bundlephobia, which checks the size of a given dependency, or Packages like the webpack-bundle-analyzer to check the size of your Bundle.

---

Finally, it is important to note that the size of the folder build rarely matters. What you should take into account when developing a performance application is the size of the Bundle of Javascript of each page, and not the whole. Remember that in the directory build live all the files and dependencies of your application. That way, if you have done the proper code-splitting, your application will probably not suffer from performance problems caused by the weight of Javascript files.