react 如何静态化

React 静态化的方法

使用 react-snap 或 Next.js 的静态导出功能可以将 React 应用静态化，生成纯 HTML、CSS 和 JavaScript 文件，便于部署到 CDN 或静态托管服务。

使用 react-snap

安装 react-snap 作为开发依赖：

npm install --save-dev react-snap

在 package.json 中添加 postbuild 脚本：

"scripts": {
  "postbuild": "react-snap"
}

运行构建命令生成静态文件：

npm run build

使用 Next.js 静态导出

安装 Next.js 并创建项目：

npx create-next-app@latest

在 next.config.js 中启用静态导出：

module.exports = {
  output: 'export'
}

运行构建命令生成静态文件：

npm run build

静态化后的优化

启用代码分割和懒加载以减少初始加载时间：

const LazyComponent = React.lazy(() => import('./LazyComponent'));

使用 preload 或 prefetch 优化关键资源加载：

<link rel="preload" href="critical.css" as="style">

部署静态文件

生成的静态文件通常位于 build 或 out 目录，可直接部署到 Vercel、Netlify、GitHub Pages 或任何静态托管服务。