在Next.js 13中使用Preact

Next.js默认使用React，在这篇博文中，我想用Preact替换React并比较构建差异。Preact是一个JavaScript库，被认为是React的轻量级3kb替代品，具有相同的现代API和ECMA Script支持。与其他JavaScript框架相比，Preact拥有最快的虚拟DOM。它内存小，它被设计为在带有DOM的浏览器中工作，这就是为什么它如此小巧的原因。

为什么要替换React？这样做的原因有几个，还有一些其他帖子对其进行了很好的解释。关键区别在于Preact缺少React中包含的一些实验性功能，例如Suspense和Concurrent Mode。如果你不使用React的任何这些更复杂的功能，你就有强烈的理由用Preact替换React。

我将总结一些您应该用Preact 替换React的原因。

1. Preact在DOM之上提供尽可能最薄的虚拟DOM抽象。
2. Preact内存小。
3. Preact很快，不仅仅是因为它的大小。
4. Preact高度兼容React API并支持相同的ECMA Script
5. Preact有一个名为preact/compat的包，让开发人员可以将React库与Preact一起使用。

开始

让我们从创建一个新的 Next.js 应用程序开始。

npx create-next-app next-with-preact --use-pnpm

接下来，我们需要在应用中安装 Preact。

pnpm install preact

appNext.js 13 中的 设置目录

Next.js 13 引入了app目录布局。要使用该app目录，请将以下内容添加到您的next.config.js文件中。

module.exports = {  reactStrictMode: true,  swcMinify: true,  experimental: {    appDir: true,  },};

在主目录下，创建一个app目录，hello在该目录下创建一个app目录。page.tsx在hello目录中添加一个。

该app目录应如下所示

app/├── hello│   └── page.tsx├── head.tsx└── layout.tsx

head.tsx和将layout.tsx在您在开发环境中启动服务器时生成。

将以下内容添加到您的app/hello/page.tsx

export default function HelloPage(): JSX.Element {  return <div>Hello from app directory</div>;}

pages/index.tsx用一个简单的页面组件替换 的内容。

export default function Home() {  return <div>Index Page from pages directory</div>;}

运行您的应用pnpm dev并检查http://localhost:3000/和http://localhost:3000/hello以确认一切正常。

交换

一旦一切正常，我们需要在我们的 Next.js 应用程序中将 React 替换为 Preact。我们需要告诉 Next.js 我们想通过仅在客户端生产构建中使用 Webpack的别名功能来将 React 换成 Preact。服务器de与React一起运行。让我们next.config.js用以下内容更新我们的

module.exports = {  reactStrictMode: true,  swcMinify: true,  experimental: {    appDir: true,  },  webpack: (config, { dev, isServer }) => {    if (!dev && !isServer) {      Object.assign(config.resolve.alias, {        "react/jsx-runtime.js": "preact/compat/jsx-runtime",        react: "preact/compat",        "react-dom/test-utils": "preact/test-utils",        "react-dom": "preact/compat",      });    }    return config;  },};

使用 构建 Next.js 应用程序后next build，您应该会看到包大小有所减小。比较我们的演示应用程序的构建结果。

使用 Preact

用反应

next-plugin-preact

Preact 团队提供了一个用于 Next.js 的插件。它适用于dev和production环境。

安装插件

pnpm install next-plugin-preact preact react@npm:@preact/compat react-dom@npm:@preact/compat react-ssr-prepass@npm:preact-ssr-prepass preact-render-to-string

用法

next.config.js像这样使用插件

// next.config.jsconst withPreact = require("next-plugin-preact");module.exports = withPreact({  /* regular next.js config options here */});

如果您没有在 Next.js 应用程序中使用任何实验性 React 功能，我建议您将 React 替换为 Preact 以大大减少您的包大小。