如何将 Preact 添加到现有的 create-react-app 项目？

问题描述

我有一个 React 项目，我想将其转换为 Preact 以节省包大小。

我遵循了 this 的建议，在我的代码中添加了以下元素：

更改package.json：

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

...并添加config-overrides.js：

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

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

当然，我还安装了 preact-compat 和 preact。

在构建我的应用程序并使用 Webpack 包分析器查看组件时，我看到 react 和 react-dom 仍在我的包中。

我的实现有什么问题？

解决方法

react 和 react-dom 出现实际上是正确的！

别名是指您提供了它没有要求的其他东西。

也许可以帮助描述一下，想象一下你要我拿一把螺丝刀来拧紧什么，只有我知道那把螺丝刀是不正确的，而是把正确的交给你。您仍然可以完成工作，但您对此一无所知，并且将那把螺丝刀称为您要求的螺丝刀。你不知道我完全交给了你别的东西。

这里的别名工作方式相同。 CRA 最终要求使用 React，但我们把它换成了 Preact。多亏了 preact/compat，一切都一样，而且我们给它 Preact 而不是 React。

您可以通过注释掉别名并比较构建大小来确认别名是否有效。 React 会大几个数量级。因此，如果在取消注释时，构建大小要小得多，恭喜！别名有效并且您正在使用 Preact。