使用CRA生成的项目，如何进行打包预渲染和打包部署？
注意：
yarn build构建命令使用的是CRA脚手架react-scripts build命令进行构建任务，此构建脚本内部自动集成了webpack，简化了webpack的配置，所以直接使用yarn build即可，不需要再安装webpack
使用
yarn build, 如果需要对webpack配置进行深度配置，可以让项目暴露webpack的配置文件，原则上不建议这么做
要将 Create React App（CRA）生成的项目进行打包部署，通常需要执行以下步骤：
-
生成生产版本的应用程序：
运行以下命令，以生成用于生产环境的应用程序版本：
yarn build或者使用 npm：
npm run build这将在项目目录中创建一个
build文件夹，其中包含了打包好的静态文件，包括 HTML、CSS、JavaScript 和资源文件。 -
选择部署方式：
你可以选择不同的部署方式，根据你的需求和项目情况：
-
静态文件托管：将
build文件夹中的所有文件上传到一个支持静态文件托管的 Web 服务器，如 Apache、Nginx、GitHub Pages、Netlify、Vercel 等。 -
云服务托管：将应用程序部署到云服务提供商（如 AWS、Azure、Google Cloud、Heroku 等）的托管平台上。这些平台通常提供容器化和自动化部署功能。
-
-
配置路由：
如果你的应用程序使用了前端路由（例如 React Router），确保在部署时配置正确的路由设置。如果使用的是 BrowserRouter，请确保服务器上的路由配置与你的前端路由匹配。
-
域名和DNS设置：
如果你有自定义域名，需要进行相应的DNS设置，以将域名指向你的部署服务器或托管平台。
至于预渲染（prerendering），CRA 默认不支持预渲染，但你可以使用第三方工具或库来实现。一个常见的选择是使用 "react-snap"，这是一个用于预渲染 React 应用程序的库。要使用它，你可以按照以下步骤进行操作：
-
安装 "react-snap" 作为开发依赖：
yarn add --dev react-snap或者使用 npm：
npm install --save-dev react-snap -
在项目的
package.json文件中添加以下配置："scripts": { "prebuild": "react-snap" }这将使 "react-snap" 在运行
yarn build（或npm run build）之前自动执行。 -
在
public/index.html中，确保将所有的<script>标签都添加到<body>的底部，以便 "react-snap" 能够正确地预渲染你的页面。 -
运行
yarn build或npm run build来构建你的应用程序，"react-snap" 将在构建完成后自动运行并预渲染你的应用程序页面。 -
部署你的应用程序，包括预渲染后的静态文件。
这样，你的应用程序将以静态 HTML 形式进行预渲染，有助于SEO和提高初始加载速度。请注意，预渲染可能需要额外的配置，具体取决于你的项目需求。根据你的应用程序的特定情况，你可能需要进一步调整和优化配置。
预渲染可能需要额外的配置这里的意思是，比如我们的路由配置页面，无法自动将每个路由页面或者特定业务场景下才能触发的页面都覆盖到
网友评论