本文旨在指导开发者如何在大型 React 项目中逐步迁移部分组件到 Preact，并保持 React 和 Preact 组件的协同工作。主要介绍通过 preact/compat 兼容层实现平滑过渡的方法，以及在无法使用 preact/compat 时，采用 Micro Frontends 技术进行集成的替代方案。
在大型 React 项目中，逐步引入 Preact 可以带来性能优化和更小的 bundle 体积。然而，直接替换所有 React 组件为 Preact 组件可能并不现实。本文将介绍一种在 React 项目中同时使用 React 和 Preact 组件的方法，并提供两种方案：使用 preact/compat 兼容层和采用 Micro Frontends 技术。
使用 preact/compat 兼容层
preact/compat 是 Preact 官方提供的兼容层，它允许你在 Preact 项目中使用 React 组件，反之亦然。它通过提供一个薄层 (约 2KB)，使 React 组件能够与 Preact 代码库兼容。这使得你可以逐步将 React 组件迁移到 Preact，而无需一次性重写所有代码。
步骤：
-
卸载 React 包: 从需要迁移到 Preact 的包中卸载 react 和 react-dom。
npm uninstall react react-dom # 或者 yarn remove react react-dom
-
安装 Preact: 安装 Preact 和 preact/compat。
npm install preact preact/compat # 或者 yarn add preact preact/compat
-
配置别名: 为了让现有的 import react from 'react' 和 import ReactDOM from 'react-dom' 语句能够正常工作，需要配置构建工具的别名。
-
Webpack:
在 webpack.config.js 中添加以下配置：
module.exports = { //... resolve: { alias: { 'react': 'preact/compat', 'react-dom/test-utils': 'preact/test-utils', 'react-dom': 'preact/compat' } } }; -
Rollup:
使用 @rollup/plugin-alias 插件：
import alias from '@rollup/plugin-alias'; export default { //... plugins: [ alias({ entries: [ { find: 'react', replacement: 'preact/compat' }, { find: 'react-dom/test-utils', replacement: 'preact/test-utils' }, { find: 'react-dom', replacement: 'preact/compat' } ] }) ] }; -
Parcel:
Parcel 默认支持别名，只需在 package.json 中添加：
{ "alias": { "react": "preact/compat", "react-dom": "preact/compat" } } -
Vite:
Vite 需要使用 @preact/preset-vite 插件。
npm install -D @preact/preset-vite # 或者 yarn add -D @preact/preset-vite
然后在 vite.config.js 中配置：
import { defineConfig } from 'vite' import preact from '@preact/preset-vite' // https://vitejs.dev/config/ export default defineConfig({ plugins: [preact()] })
-
示例代码：
假设有一个 React 组件：
// package1/src/MyReactComponent.jsx
import React from 'react';
function MyReactComponent() {
return <div>Hello from React!</div>;
}
export default MyReactComponent;现在，你可以在 Preact 组件中使用它：
// package2/src/MyPreactComponent.jsx
import { h } from 'preact';
import MyReactComponent from 'package1/src/MyReactComponent';
function MyPreactComponent() {
return (
<div>
Hello from Preact!
<MyReactComponent />
</div>
);
}
export default MyPreactComponent;注意事项：
- preact/compat 并非完全兼容 React，某些高级特性可能无法正常工作。
- 在使用 preact/compat 之前，请仔细测试你的组件，确保它们在 Preact 环境中运行良好。
使用 Micro Frontends 技术
如果无法使用 preact/compat，则需要采用 Micro Frontends 技术将 Preact 包与 React 项目集成。Micro Frontends 允许团队独立开发和部署不同的前端应用，然后将它们组合成一个更大的应用。
方案：
- Web Component: 将 Preact 组件打包成 Web Component，然后在 React 应用中使用。
- Iframe: 将 Preact 应用嵌入到 React 应用的 <iframe> 中。
- JS Package: 将 Preact 组件打包成 JS 包，然后在 React 应用中手动挂载到 HTML 元素上。
示例代码（Web Component）：
首先，将 Preact 组件构建成 Web Component：
// package2/src/MyPreactComponent.jsx
import { h, render } from 'preact';
function MyPreactComponent() {
return <div>Hello from Preact Web Component!</div>;
}
customElements.define('my-preact-component', class extends HTMLElement {
connectedCallback() {
render(<MyPreactComponent />, this);
}
});然后，在构建过程中，将此组件打包成独立的 JavaScript 文件。
最后，在 React 应用中引入并使用该 Web Component：
// package1/src/App.jsx
import React, { useEffect } from 'react';
function App() {
useEffect(() => {
const script = document.createElement('script');
script.src = '/path/to/my-preact-component.js'; // 替换为你的 Web Component 文件路径
script.async = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, []);
return (
<div>
<h1>Hello from React!</h1>
<my-preact-component></my-preact-component>
</div>
);
}
export default App;注意事项：
- Micro Frontends 增加了项目的复杂性，需要考虑不同应用之间的通信和状态管理。
- 选择合适的 Micro Frontends 方案取决于项目的具体需求和架构。
总结
本文介绍了两种在大型 React 项目中集成 Preact 组件的方法：使用 preact/compat 兼容层和采用 Micro Frontends 技术。preact/compat 提供了一种平滑过渡的方案，而 Micro Frontends 则适用于更复杂的情况。在选择方案时，请根据项目的实际情况进行评估，并仔细测试以确保组件的兼容性和稳定性。通过逐步迁移和集成，你可以充分利用 Preact 的优势，优化你的 React 项目。
