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

Question

我有一个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"
  },

...and添加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，not React更明智。

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