在React中如何在单页应用程序中拆分代码？

Question

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

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

我在这里想念什么。如何为不同页面设置单独的js文件，以减少页面的文件大小，并减少初始页面负载？

Answer 1

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

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

示例：您的应用程序使用 React。但你改变了组件内部的某些东西，而不是 React 本身。您再次构建并部署。您的捆绑文件将有所不同（有时甚至使用新的名称哈希）。如果你不使用某种供应商拆分技术，用户将不得不再次下载 React，尽管它没有改变。

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

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

如果您想深入研究它并实现更复杂的定制目标，您可以利用此处的splitChunks文档。一个示例是使用 .cacheGroups 选项，并提供正则表达式来确定给定组的匹配文件。

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

请查看本指南以获取有关该主题的高级指导。