Check out a free preview of the full Complete Intro to React, v7 course:
The "Building for Production" Lesson is part of the full, Complete Intro to React, v7 course featured in this preview video. Here's what you'd learn in this lesson:

Brian demonstrates building the application for production with Parcel to greatly reduce the bundle size and increase performance.

Get Unlimited Access Now

Transcript from the "Building for Production" Lesson

[00:00:00]
>> So let's talk about some, just like some development tools that node gives you, or sorry, that react gives you. We'll go down here to this one. The first one is setting your node down. Typically, your browser tools are gonna do this for you. Parcel for example, will.

[00:00:19] If you run parcel in dev mode, it's gonna run NODE_ENV=development, which is what you see here. And then if you just say, parcel build, it'll automatically switch the NODE_ENV to be production, right? So you actually end up with a smaller bundle size. It'll strip out all of the developer tools.

[00:00:37] I wonder if I can show you that. Yeah, I think I can. Hold on. So let's first look at this. For example, let's leave off this key thing. You don't have to follow me for it now. This warning only comes in development mode, right? It has a nice error message and does a bunch of nice things for you.

[00:01:07] But the bundle size of the development build of react is, I think, four times bigger cuz it has a lot of error strings and helpful helpers and things like that. It's also significantly slower like a factor of five or something. I don't know what it is now but it used to be ten x slower.

[00:01:24] So in other words, don't ship the development mode to production. Slack famously did that for like five years, right? Someone opened up their dev tools on electron and was like, this is still in development mode, no wonder this is so slow. [LAUGH] And then they fixed it and they got a significant performance boost.

[00:01:44] But if we do this, we'll talk about building react later in intermediate react, but I think I can just do npx parcel build source index or HTML. Parcel gonna be annoying, that's fine, whatever. Okay, so now I think I've built this for production. All right, and so now I can open it with a dot and dist and index.html.

[00:02:36] Our second, let me do course, okay? How much recommended a bit we're committing? Let's do it, okay, npx serve dist. Okay, so now notice that warning is gone, right? And now if we compare our network here, our build size is 102 kilobytes. You know we never did, I think that's kind of funny.

[00:03:13] I don't think we ever deleted this. We didn't set. So talking about naming and shaming people for not doing performance things, let's name and shame me for not having you delete this unpackaged stuff right here. So go ahead and do that, 12 and 13 lines, 12 and 13 in your index.html.

[00:03:31] We haven't needed that since we started using parcel, right? How funny, okay. So let's actually rebuild parcel. Yeah, if you ever pulled out of my repos, well, I did that very early on in the repo. So yes, beautiful cocktails, cockatoos rather. So this is 131 kilobytes now, and I think if we go look at our, let's say npm run dev here and look at one, two, three, four, and look at the network here.

[00:04:20] Yeah, you can see this is 1.13 megabytes worth of JavaScript, right? So it's actually enormous. So you can see the, it is ten times bigger, right? That's huge. That it also saw minifying is not doing it like so, it's doing inline source maps is doing a bunch of stuff that it wouldn't do otherwise.

[00:04:42] So this is a whole roundabout ways like it's extremely important that you build react in the right way or it's gonna be very slow and very big. And it's also gonna give away more information than about your app and you probably want to give away, so, yeah. Hopefully, that's demonstrative of why it's important for you to think about that.

[00:05:03] Many tools today just will think about it for you. They automatically, when you do production builds, it'll just stick it into production mode. But that's how you do the switch here is when when you build React, they basically say if node MV equals development, do all of this.

[00:05:22] Otherwise, don't do it.