This course has been updated! We now recommend you take the Intermediate React, v5 course.
Transcript from the "Building for Production" Lesson
[00:00:00]
>> Brian Holt: Mpx parcel, build src/index.html. So before using react 43 kilobytes, not bad right, that's pretty good for an application. But let's take a look at how big it ends up being with a preaction and preact-compat. So 51 kilobytes just out of the box, it looks a lot smaller.
[00:00:24] If we go into dist and run gzip on app 3AA.js and say lss. Here. This one right here. 15 kilobytes, right, so we shaved quite a bit, almost 30 kilobytes off that just be switching to preact and preact-compat.
>> Brian Holt: So and, if I switch off of COMPAT and just directly under preact, I would shave an additional five kilobytes off of that.
[00:00:58] So we would be down to 10 kilobytes for our application from 43. Now, make sure that that's what you want to do, right? React has really great tooling. There's a bunch of really, really cool parts about React that you should not give up lightly, right? But this can be compelling particularly, if you're trying to serve someone like in India or China or rural America, like those kind of places.
[00:01:25] Preact can be pretty compelling. Actually, one of my favorite ones to show.
>> Brian Holt: Well, anyway, there's a bunch of great stuff that you can look at about React versus preact performance. And I would suggest taking a look at that. So again, preact-compat is a bridge if you decide to use preact start with preact-compat, but you want to start migrating to preact.
[00:01:51] So from here like if I was converting this particular route to be on preact, I would switch this to be from preact-compat and do this.
>> Brian Holt: But see, you have to kind of like migrate. And this is what it will look like if you switch to actually using preact directly.
[00:02:13] So remember, when you do JSX, it's react.createelement, that's what this JSX gets translated to. When you're doing preact it gets translated to H instead of react.createelement. So you have to import H from preact. So there's a bunch of things you have to kind of massage it into doing and there's no prompt types.
[00:02:35] There's a bunch of other stuff that preact doesn't have on purpose. So you just kind of have to look at that. And I gave you a link in the notes here in preact down here to see all of the differences.
>> Brian Holt: So I will leave you to take a look at that.
[00:02:57] Any questions about preact? There is a branch here obviously called preact, we can see the complete code here