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

Question

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

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

更改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仍在我的包中。

我的实施做错了什么？

Answer 1

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

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

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

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

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