How to add Preact to existing create-react-app project?

[mmz15]

I have a React project that I'd like to convert to Preact to save on the bundle size.

I followed this recommendation, adding the following elements to my code:

Change the package.json:

 "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

...and add config-overrides.js:

const { override, addWebpackAlias } = require('customize-cra');

module.exports = override(
  addWebpackAlias({
    'react': 'preact/compat',
    'react-dom': 'preact/compat'
  })
);

Naturally, I also installed preact-compat and preact.

When building my app and viewing the components using the Webpack bundle analyzer, I see that react and react-dom are still in my bundle.

What am I doing wrong with my implementation?

[rschristian]

I believe the analyzer should actually still report react and react-dom in your bundle. What the alias does is provide Preact every time React is asked for. For all the bundle knows, that is React you're giving it.

You can confirm by building your app with and without the config enabled. Just comment it out and compare the built file sizes.

Also, the preact-compat package is a legacy compat package for Preact 8 and older. You don't want it if you're using Preact 10. For 10, the compat can be found at preact/compat like the alias lists.

[serg06]

I believe the analyzer should actually still report react and react-dom in your bundle. What the alias does is provide Preact every time React is asked for. For all the bundle knows, that is React you're giving it.

Thank you! I was banging my head against the wall for 30 minutes until your comment saved me.

[rschristian]

Sorry to hear that. Not much can be done if you're using the aliased imports though, you'd have to correct them to import ... from 'preact'; in order for them to map correctly (any external libs you're using will still get the aliased version just fine).

Hopefully you were able to confirm the alias working via your bundle size delta?

[serg06]

@rschristian Yep, bundle size went from 150kb to 43kb 😄