Chapter 3
Create a Production Build

Many applications that rely on sophisticated JavaScript components fail to live up to their potential because they load slowly. Here, you’ll learn how to spare your own creations from this fate.

Let’s look at the word counter we’ve built in the previous two chapters. We need four network requests: one to download React, one to download ReactDOM, one to download Babel, and one for the word counter itself. Loading speed is critical for user satisfaction,^[8] but people can’t start using the app until the last file downloads.

As an application grows, it’s tempting to split the code across multiple files so we can navigate the project more easily as we modify things. For example, we might place the SaveManager component in its own file. But if we did that, we would increase the loading time even more; if we had a separate file for every component, we would need to download even more separate files, and we’d also struggle to remember how to include them in the right order in the HTMl page.

We’ll solve this dilemma with a module bundler called webpack.^[9] Modules let you divide an application into multiple files, each with a specific function, and define the dependencies between the files. Then the module bundler aggregates the source files into as many or as little files as you want. It automatically assembles the modules in the right order, so you end up with a single file to serve.

webpack can also transform the source code before assembling the modules, so use Babel to turn JSX into React.createElement calls in advance. In this way, we’ll get rid of the in-browser Babel transform that’s too slow for production.

This means you can optimize for performance in production while keeping the source files in a structure that’s optimal for ease of development. Let’s get started.