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

Brian demonstrates how to build the application for production by using the Webpack “-p” flag as well as the Webpack UglifyJs Plugin. After some configuration and debugging, he gets the production bundles to generate and compares the production files size with the original application size. - https://github.com/btholt/complete-intro-to-react/tree/v2-25

Get Unlimited Access Now

Transcript from the "Building for Production" Lesson

[00:00:00]
>> Brian Holt: Any questions?
>> Speaker 2: Can you show again that [INAUDIBLE] environment that you run for [INAUDIBLE]
>> Brian Holt: Yeah, [INAUDIBLE] equals server, nodomanserver,js No damon [INAUDIBLE] use the term like node or the command node, the no damon just drops in and just puts in a file watcher. And there's 10 of these.

[00:00:23] There's N, and I think there's, not N. It might be N. Watchmen, any number of these things they all work. So, [COUGH] just to show you real quick how you might consider building for production. Notice that these bundles are huge, right? But these are developer builds.
>> Brian Holt: So instead, one might consider when you're building for production, you wanna do it with some specific flags.

[00:00:53] So you're gonna do NODE_ENV=production webpack -p. That lets it know build for product. Okay, notice these got slightly smaller. Not that much smaller.
>> Brian Holt: I feel like this still should have gotten smaller than it did. All right, what happens if I just run web pack?
>> Brian Holt: Cuz I'm not running Uglify am I.

[00:01:43]
>> Brian Holt: Well, in any case, what you would run with uglify.
>> Brian Holt: [INAUDIBLE]
>> Brian Holt: [INAUDIBLE] guides.
>> Brian Holt: Building for production, that's what I'm looking for.
>> Brian Holt: That's fine, minification this is all I'm looking for. Yep.
>> Brian Holt: So, what we're gonna do here just real quick just to show you how to build for project, with webpack.

[00:02:38] You're gonna say const webpack = require webpack, this is inside of your webpack config,
>> Brian Holt: And we're gonna just put-
>> Brian Holt: Plugins.
>> Brian Holt: And we're gonna give it this little bit right here, which I just pulled off the webpack docs.
>> Brian Holt: Webpack.optimize.Uglify, right. It's built right into webpack.

[00:03:10] And this is going to all of it and uglify and minify and do all that funny stuff, okay?
>> Speaker 3: Nevermind.
>> Brian Holt: Got it [LAUGH]. So, let's try that again. Unexpected token. I probably didn't need the second one.
>> Brian Holt: Okay.
>> Brian Holt: Turn it that as well It's annoying if I do.

[00:04:08]
>> Brian Holt: I had this working differently, but.
>> Brian Holt: It must be including something in here that's bigger than what I had previously.
>> Brian Holt: But in any case. That's more or less how you start building for production. You define your enviroment to be production. You turn on Uglify In any case, we end up with a pretty big bill because we have things like react.

[00:04:42] We have redux. We have some data that we're pulling in. We have some stuff that web pack is including. We're including way too many poly fills with our babblerc file. That might be part of it too.
>> Speaker 4: Philip suggesting, I think, Dev Tool cheap module source map.
>> Brian Holt: That's what it is.

[00:05:03] Is that what I had? Cheap module source map. Yep, cheap-module-source-map. [BLANK AUDIO]. So that's good.
>> Brian Holt: Just get rid of devtool together, momentarily.
>> Brian Holt: Because you don't want to shut those out to production anyway. If it doesn't work then, screw it, we don't want it anyway.
>> Speaker 4: Craig is also asking if production includes everything in low dash.

[00:06:04]
>> Brian Holt: No, because that's only server side. And you can click everything you want, willy-nilly server side.
>> Brian Holt: Okay, yes, this is more I was looking for. Okay, so our production build ends up being 218K for the main app. 13K For 13-15 K for the smaller bundles this is more aligned with what I was expecting.

[00:06:37] So not horrible, not great but, 218 is not a bad pace to work with that's about all the libraries we are working with that's axis, reaxis and reducts All those additional things that we're pulling as well. Not horrible. Writing another 100K of uglified/sp code is a lot of code.

[00:06:58] And what the web pack team suggested is don't ship anything much more than 300K in a bundle if you can, split that off routes are an easy place to do that. Our friend asked us does it tell you what code is dropped? It looks like it does.