reactjs - 如何在React中的单页面应用程序中进行代码拆分？

Question

我有一个用reactjs和redux编写的巨大应用程序。

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

我在这里缺少什么。如何为不同的页面提供单独的 js 文件以减少页面的文件大小并减少初始页面加载？

Answer 1

您所描述的最好称为“commons split”，其中您跟踪应用程序的许多不同页面的公共(public)依赖项，并将它们全部放在一个单独的包中。

您可以通过多种方式从 SPA 中的捆绑拆分中获益。最简单的方法是将所有 vendor 模块分离到一个包中，这样当您更改主应用程序中的代码时，用户不必再次下载依赖项(例如:jquery)，因为它已被缓存。

示例:您的应用使用 React。但你改变了组件内部的某些东西，而不是 React 本身。您再次构建并部署。您的捆绑文件将有所不同(有时甚至使用新的名称哈希)。如果您不使用某种 vendor 拆分技术，用户将不得不再次下载 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[\\/]/,
          }
        }
      },
    },
  },
]);

看看this guide有关该主题的高级指导。