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文档here。一个示例是使用.cacheGroups选项，并提供一个正则表达式来确定给定组的匹配文件。

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

查看this guide，以获取有关该主题的高级指导。

如何在单个页面应用程序中进行代码拆分？

1 个答案: