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

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

 

Create a new react app:

create-react-app preact-demo

 

Build:

npm run build

 

You can see that the size of main bundle file is 43kb.

 

Now let's run:

npm run eject

 

Install:

npm install --save preact preact-compat

 

open config/webpack.config.prod.js:

    alias: {
      
      // Support React Native Web
      // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
      'react-native': 'react-native-web',
      'react': 'preact-compat',
      'react-dom': 'preact-compat'
    },

In 'alias' field, add tow fields for preact.

 

Run the build again. Now you can see that the bundle size is '13KB'!