返回

揭秘如何用 CRA 打造多页应用：全面指南

前端

在这个快节奏的数字时代，多页应用程序 (MPA) 已成为提供无缝用户体验的必要之选。对于希望从单页应用程序 (SPA) 的局限性中解放出来的 React 开发人员来说，create-react-app (CRA) 似乎是一个完美的解决方案。

但 CRA 开箱即用时并不支持 MPA。别担心，借助 react-app-rewired，我们可以轻松扩展 CRA 配置，释放 MPA 的强大功能。

拥抱 MPA 的魅力

MPA 提供了许多好处，包括：

  • 改进的 SEO： 每个页面都有自己的 URL，这有利于搜索引擎优化。
  • 更好的用户体验： 用户可以在多个页面之间轻松导航，而无需重新加载整个应用程序。
  • 更快的加载时间： 只加载必要的页面元素，提高了整体性能。

扩展 CRA 的力量

为了使用 react-app-rewired 扩展 CRA，请按照以下步骤操作：

  1. 安装 react-app-rewired：
npm install react-app-rewired --save-dev
  1. 创建 config-overrides.js 文件：
mkdir src && touch src/config-overrides.js
  1. 在 config-overrides.js 中添加以下内容：
const {
  override,
  addBabelPlugin,
  addWebpackAlias,
  addLessLoader,
  fixBabelImports,
  addPostcssPlugins,
} = require('customize-cra');

module.exports = override(
  // ...
);

针对多页应用的自定义设置

在 config-overrides.js 中，我们可以添加自定义设置来支持 MPA：

开启 PWA：

addWebpackAlias({
  '@serviceWorker': path.resolve(__dirname, 'src/serviceWorker'),
}),

支持 ant-design 按需加载：

fixBabelImports('import', {
  libraryName: 'antd',
  libraryDirectory: 'es',
  style: true,
}),

兼容 IE11：

addBabelPlugin(
  ['@babel/plugin-proposal-object-rest-spread', { loose: true }],
),

构建和部署

准备好自定义设置后，我们可以构建应用程序：

npm run build

然后部署到您选择的平台。

结论

使用 react-app-rewired 扩展 CRA，我们可以轻松配置 MPA，享受其带来的所有好处。从改进的 SEO 到更好的用户体验，MPA 将为您的 React 应用注入新的活力。遵循本指南，解锁 MPA 的力量，打造一个无缝且引人入胜的多页体验。