Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Reduce the Size of a React App in Two Lines with preact-compat

    Shane OsbourneShane Osbourne

    Not every app is greenfield, and it would be a shame if existing React apps could not benefit from the micro-size of Preact. In this lesson we’ll discuss what preact-compat is, how to use it, and some examples of the file-size savings available. https://github.com/developit/preact-compat

    reactReact
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 Let's create a default React application using that CLI tool. We'll type create React app. We'll call this preact-compat. That command has created this directory for us and placed a default React application inside it. Let's look at what that's given us.

    00:19 You can see here we have a source directory with our application inside of it. In package.json, we have these scripts for starting the development server, producing a production build, testing, and for ejecting the configuration.

    00:33 The first thing we'll do, just run the production build immediately to see what size we're starting with. Back on the command line, we run inaudible run build. We can see that, by default, we get about a 46KB of JavaScript. This is the size as it will be served in the browser after Gzip compression.

    00:55 When you look in this directory, this actual file, it will appear larger. When it comes over into the browser, it will be about 46KB. This is not exactly a large application by any stretch of the imagination. What's interesting is that the bulk of this code is the React library itself. It's not really your application.

    01:14 Let's see how much we can reduce this with preact-compat, and just how much configuration is needed to do that. We head back to the editor, and now see this build directory contains our production-ready application. We want to run this eject command because we want to fiddle around with the webpack configuration.

    01:32 We run inaudible run eject. This will install all of the tools and scripts needed to produce this production build, the dev server, etc. You can see it's created this config directory. Inside here, we can find the webpack configuration. This is where we're going to add the alias for preact-compat.

    01:59 We'll do it to the production one for now. Before we actually do that, let's install Preact and preact-compat as dependencies to this project. inaudible add preact preact-compat. Once we have both of those, we can open up the webpack configuration for the production build, scroll down to find the alias key under resolve.

    02:32 Here, we can just add one for react itself, one for ReactDOM. For both of those, we'll just provide preact-compat. The way that aliases work in webpack is you're essentially saying that in any of our source files, if I try and import a module called React or ReactDOM, don't actually give me those modules, but instead give me what I provide here on the right-hand side.

    03:00 This is the beauty of preact-compat, because we haven't had to edit any of our source files. We haven't even opened up the application in any way. We can just alias React and ReactDOM for the production build, and get a reduced file size. Let's look at that reduced file size.

    03:16 Now we have the aliases in place, we can run the build command again. inaudible run build. There, you can see we've got a 32KB reduction on this app, all for two lines of webpack configuration. Let's test everything's still working.

    03:31 Luckily, this CLI tool is so good, it's given us the diff of these file sizes before and after. It also suggests that we can test our production build by installing a lightweight server. We'll do that. Beyond global add serve.

    03:49 That's finished. We'll copy this command, paste it in here. I can see we have this address. We can visit that in the browser. Paste that in there, and you can see the application is running as it should.

    Discuss

    Discuss