用 Preact 替换 React。这很简单，而且很值得。

我考虑卖出Preact已经很久了。毕竟，卖东西很容易：

• 与 React 生态系统 100% 兼容（某种程度上）
• 小得多（js 包大小）
• 速度更快（性能）

大约两年前，我参加了悉尼的一个本地聚会，演讲者分享了澳航如何在部分业务中成功集成 Preact。这很有意思，而且他讲得也很有说服力。然而，鉴于当时几乎所有人都在使用 React，我觉得这任务太艰巨了，所以一直没花时间深入研究。直到最近。

我当时正在优化 SaaSHub 的页面加载速度，其中一个方法是减小 JS 包的大小。我试用了webpack-bundle-analyzer和source-map-explorer，发现 React 和 react-select 占用了 35% 的库资源。然后我想起了preact ……于是决定重新审视一下它。

结果发现，这项任务与其说是困难，不如说是令人畏惧。仔细阅读文档后，我发现切换到 Preact 的整个过程只需要将其添加到packages.json 文件中，并在 webpack 的构建配置中添加相关的别名即可：

environment.config.resolve.alias = {
  "react": "preact/compat",
  "react-dom/test-utils": "preact/test-utils",
  "react-dom": "preact/compat",
  // Must be below test-utils
}

module.exports = environment

并在应用程序的某个地方导入了'preact/debug'：

import 'preact/debug'

就这么简单。一切都运行正常，无需修改任何一行代码。当然，对于代码更复杂的 Web 应用程序来说，这个过程可能会更复杂一些。

有哪些好处：

• SaaSHub的 JS 包文件大小减少了 20%：从 577k 减少到 460k
• 更快的 JS（虽然我没有进行基准测试，也没有感觉到它很慢）

最后，如果你正在优化你的JS代码，而且你的环境配置不是特别复杂，我强烈建议你尝试一下Preact。它可能比你想象的要容易。

PS：下一步是用Downshift替换react-select。我已经用它实现了一个小组件，效果非常棒。可惜的是，这次迁移需要修改很多代码。