如何在React单页应用中进行代码分割？

Question

我有一个使用Reactjs和Redux编写的庞大应用程序。

我的问题是如何减小页面大小？ 我知道Webpack中有代码分割，但我的理解是它用于多页应用程序。 我只有一个index.js页面。

我错过了什么？ 如何为不同页面创建单独的JS文件以减小页面大小，并减少初始页面加载时间？

- Rison

---

你可以使用React Router来实现这个功能：https://github.com/reactjs/react-router/blob/master/docs/guides/DynamicRouting.md - 不过基本思路应该适用于其他路由器。 - Matt Holland

你可能想看一下 React Conf 两天前的这个视频。它解释了一些概念，比如按需引入模块而不是从一开始就加载所有内容。 - nbermudezs

感谢@MattHolland。虽然我正在使用react-router，但我不知道动态路由。 - Rison

Answer 1

你所描述的最好称之为公用分离，即跟踪应用程序许多不同页面的公共依赖项，并将它们全部放入单独的捆绑包中。

有几种方法可以在SPA中从捆绑拆分中受益。最简单的一种是将所有供应商模块分隔到一个单独的捆绑包中，这样当您更改主应用程序中的代码时，用户就不必重新下载依赖项（例如：jQuery），因为它已被缓存。

例如：您的应用程序使用React。但你只是在组件内部更改了某些内容，而不是React本身。您进行构建和部署。您的捆绑文件将不同（有时甚至带有新的名称散列）。如果您不使用某种供应商分隔技术，那么用户将不得不再次下载React，尽管它没有改变。

基本配置将使用splitChunks，相比旧版CommonsChunkPlugin添加了更多自动化。因此，初学者利用它的方法是在Webpack生产配置中具有以下配置：

const productionConfig = merge([
  // ... other configs
  {
    optimization: {
      splitChunks: {
        chunks: "initial",
      },
    },
  },
]);

如果你想深入了解并实现更复杂、定制化的目标，可以利用 splitChunks 文档，链接在此：here。举个例子，可以使用 .cacheGroups 选项，并提供一个正则表达式来确定给定组的匹配文件。

const productionConfig = merge([
  // ... other configs
  {
    optimization: {
      splitChunks: {
        chunks: "initial",
        cacheGroups: {
          vendors: {
            test: /[\\/]node_modules[\\/]/,
          }
        }
      },
    },
  },
]);

请查看此指南以获取关于此主题的高级指导。

- zavjs