👑⚙️ 使用 Preact 和 Expo 打造更小、更快的网站

Preact 之前

Preact 之后

⚽️ 入门

缺点

👋 就这样

React Native for web非常棒，因为您不仅可以重用所有优秀的原生 Expo 包，如expo-camera和react-native-gesture-handler，还可以使用 React/web 社区推出的任何好东西来创建速度极快的网站。

Jason Miller的 Preact 库就是一个很好的例子！Preact是 React 的轻量级（约 3kb）替代品。
如果只构建 Web 项目，设置很简单，只需用 Preact 替换 React 即可立即开始编码。但 React Native 的 Web 项目则稍微复杂一些。
由于 RNWeb 使用了许多不同的 React 特性，我们必须充分发挥 Preact 的潜力，才能使其与 Expo for Web 项目兼容。幸运的是，它的设置仍然非常简单。

Preact 之前

在介绍如何使用之前，我们先来聊聊为什么你可能想要使用 Preact。如果你创建一个标准的 Expo Web 项目（在撰写本文时），其包大小将类似于下面的报告。

❌ 60.75 KB Gzip 压缩包

Preact 之后

如果您将项目配置为使用 Preact 而不是 React，则软件包将大幅减少！这意味着您的网站将加载更快，并且即使网络连接较差或设备较差的用户也能更好地使用。

✅ 压缩后 27.98 KB

⚽️ 入门

要将 Preact 与 React Native 结合使用，您需要安装软件包并将它们别名为 React。

💡 最新更新信息请参阅 Expo 文档：使用 Preact

安装 Preact（需要 Preact 10+）：
- yarn add preact-responder-event-plugin preact
- 或者npm install --save preact-responder-event-plugin preact
为 Expo CLI 创建自定义 Webpack 配置以供使用：
- 跑步expo customize:web
- 选择webpack.config.js
修改 Webpack 配置以使用 Preact 而不是 React：

  const createExpoWebpackConfigAsync = require('@expo/webpack-config');
  const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

  module.exports = async (env, argv) => {
    const config = await createExpoWebpackConfigAsync(env, argv);

    // Add more aliases
    config.resolve.alias = {
      ...config.resolve.alias,
      // Use Preact aliases
      react$: 'preact/compat',
      'react-dom$': 'preact/compat',
      // Fix the responder system which react-native-web depends on
      'react-dom/unstable-native-dependencies$': 'preact-responder-event-plugin',
    };

    // Optionally you can enable the bundle size report. 
    // It's best to do this only with production builds.
    if (env.mode === 'production') {
      config.plugins.push(new BundleAnalyzerPlugin({
        path: 'web-report',
      }));
    }
    return config;
  };

运行expo build:web现在将使用 Preact 而不是 React。这意味着你的包会小得多！🚀

缺点

为了减小包大小，Preact 不得不削减一些功能。例如，它们不支持合成事件。另一个主要缺点是与 React Native 的用法不太明确。如果您正在构建通用应用，可能需要考虑在 Web 和移动端使用相同版本的 React。有关在 Web 端使用 Preact 和 React Native 的问题的更多信息，请参阅此问题react-native-web#1219（链接由 Max Thirouin 提供）。