Check out a free preview of the full Complete Intro to React, v3 (feat. Redux, Router & Flow) course:
The "Preact" Lesson is part of the full, Complete Intro to React, v3 (feat. Redux, Router & Flow) course featured in this preview video. Here's what you'd learn in this lesson:

Brian introduces Preact, which is a near-drop-in replacement for React with a much smaller footprint. Preact can achieve this smaller size by eliminating some legacy browser support and turning over more work to the browser native APIs. Brian refactors the application to use Preact and compares the size of production to the version that used React. - https://github.com/btholt/complete-intro-to-react/tree/v3-31

Get Unlimited Access Now

Transcript from the "Preact" Lesson

[00:00:00]
>> Brian Holt: One more thing, 76 kilobytes for a pretty simple app like this still kind of sucks, right? We didn't build a giant, sprawling app and it's kind of unfortunate that we still are loading upwards of 70 kilobytes. So how can we push on this a little bit harder?

[00:00:17] Well, really it's library code at this point. We're doing the best we can with what we have. So, wouldn't it be smaller if instead of being 45 kilobytes if React was only 3 kilobytes.
>> Brian Holt: 3, yeah, that would be really nice, righ So, what you can do is instead of importing react, you can import something called preact.

[00:00:39] So Preact is a React compatible library that does everything that React does in the sense that it uses the same API to achieve the same results, except it does it with 3 kilobytes instead of 45.
>> Brian Holt: Now you might ask yourself, that doesn't really seem to make sense.

[00:00:58] One, the guy that writes it, Jason Miller is actually a wizard, so I'm told. And secondly, it actually tends to be a little bit faster, because he's not doing the kind of debugging checks that React is doing for you. Some of that stuff is not present. It doesn't have a synthetic event system.

[00:01:17] It just uses the dom event system, which most of the time is usually enough. So there's trade offs to be made here of whether or not you wanna include Preact. It's really cool, it's something you should consider. It's something you should try, but I'm not saying that it's a must.

[00:01:32] But let's go see how it works. We're going to not change any of our code and it's just gonna work, it's just magical. Okay, so inside of Resolve
>> Brian Holt: We're gonna do something here called alias. And what we're gonna do is we're going to, any time that we call for react, we're gonna call for a library called preact-compat.

[00:01:59] Same thing with react-dom. Any time that it calls for react-dom, we're gonna give it preact-compat.
>> Brian Holt: What this is doing is that, anywhere I say import react from React, it's actually secretly going to give it preact. And preact-compat has a couple more things built into it to make it totally React-compatible.

[00:02:23] So, this is actually gonna be about 8 kilobytes cuz it has 5 kilobytes of compatibility stuff that we're gonna need. We might be able to do it without compat, we'll try it here in just a second. But let's try it with compat for just a moment. And same thing with react-dom.

[00:02:39] Every time that we ask for react dom, it's gonna give it this preact library which is able to do all of this stuff.
>> Brian Holt: Okay, and then last thing is some of it needs to be run through Babel. So inside of the Babel library, we're gonna have to give it an include.

[00:02:57]
>> Brian Holt: So include this stuff and we're gonna do path.resolve('js'). But the other thing we're gonna have to run through it is 'node_modules/preact.cpmpat/src'. Typically you don't wanna run your node modules through Babel. But for whatever reason, preact needs it, so, that's why. Sorry, and this doesn't go inside of ESLint, this goes inside Babel.

[00:03:51]
>> Brian Holt: Okay, so let's go and run our build again. So keep in mind, it was 76 kilobytes before, right? So now we're gonna do yarn build. See what happens.
>> Brian Holt: Sorry, we were 226, right? 226, the un-gzipped version. Now we're down to 131. The routes should be about the same, they shouldn't change at all because preact has been included with the main bundle.

[00:04:34] We broke server side rendering just, well, actually we didn't. So our server side rendering is gonna do react and our client side is gonna do preact, kind of weird. You wouldn't typically do that, but I'm not gonna fix it right now. So, yarn start.
>> Brian Holt: We'll see if this actually works.

[00:04:57] So, we went from 76, right, which was the gzip-size, down to 39.
>> Brian Holt: So we're able to save about 30 kilobytes, just by switching to Preact. And guess what? Everything still works, still pretty zippy, right? No real problems? For this application, we absolutely should be using Preact, right?

[00:05:22] There's another library called Inferno that achieves the same thing. It's a little bit bigger, but it has some different performance strategies. So the answer to which one to use Preact or Inferno, I would say try both and do the one that feels faster. They are both amazing. In fact Facebook actually hired the guy that does Inferno and now he's working on performance on React.

[00:05:44] That guy is amazing, yeah?
>> Speaker 2: If Axios was used in two separate routes, what would be the inclusion strategy? Would you include it in the main bundle, or both the routes that include it?
>> Brian Holt: The answer to that question is, you're never going to choose. You can kind of structure your code in such a way, but it's actually Webpack that's gonna have the final say.

[00:06:10] Now the question might be, which one is it going to be included in? I'm not actually sure. And I think we can kind of test really quick. So if I go into let's say landing real quick. And I say import axios up here.
>> Brian Holt: I don't even have to use it, but it should still be,

[00:06:31]
>> Brian Holt: Or maybe I'll just do a console.log(axios) here.
>> Brian Holt: So now it's required in landing as well, right? So if I go in here and say,
>> Brian Holt: Yeah I'm having a bunch of promised stuff but that's fine.
>> Brian Holt: All right I need to do build again.
>> Brian Holt: Yarn build.

[00:07:07]
>> Brian Holt: See what it comes out with. So my guess is it's might. No, what it did here.
>> Brian Holt: All right so I think I know what happened here. So yarn start,
>> Brian Holt: Network All right so I put it on landing now.
>> Brian Holt: Yeah, now we get an 11 kilobyte library there, so that's that one.

[00:07:54] So that's 1.bundle.js right, okay. Now if I go to here and I need it here.
>> Brian Holt: How big was that one? 0 was also 11 kilobytes.
>> Brian Holt: Interesting, okay, yeah. So it just included Axios in both bundles, and so now it still leaves the second bundle alone. So that's the answer to that question.