时间戳

首页 > 解决方案 > 如何将 Preact 添加到现有的 create-react-app 项目中？

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

问题描述

我有一个 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仍在我的包中。

我的实施做错了什么？

标签： reactjscreate-react-apppreactcustomize-cra

解决方案

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

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

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

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

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

推荐阅读