Preact - A 3KB React Alternative
Preact has the same ES6 public API as React, but weigh in at just 3kb. It is a great choice for single-screen apps that do not have to deal with a lot of complexity. We will take a look at how Preact can be used as almost a drop-in replacement for React, and how we can use Preact’s own API directly for an even smaller app!
Preact - A 3KB React AlternativePreact as a Drop-In React Replacement
Through using an additional library called
preact-compatand changing a few things in our Webpack configuration, we can swap out React for Preact and our app may not even know that anything has changed! We’ll walk through this setup process together as a group.
Preact - A 3KB React AlternativeUsing Preact Directly
Through using the
webpack-bundle-analyzerplugin, we can see that we have already reduced the size of our app considerably. Part of what’s keeping our app from getting a bit smaller is that we are still trying to use Preact as a drop-in React replacement. Using Preact by itself will help us shed more weight.
Preact - A 3KB React AlternativeEXERCISE: Using Preact Directly
Convert all of our React components to Preact components, and then re-run the bundle analyzer to see how much our gzipped build size was reduced.
Preact - A 3KB React AlternativeWrap up and Recap
We'll recap everything we have learned throughout the course, and discuss resources for further education.