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

2023年3月23日 294次阅读

我有一个庞大的应用程序,我在reactjs和redux中编写.

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

我在这里想念的是什么如何为不同的页面分别使用js文件来减少页面的文件大小,还可以减少初始页面加载？

最佳答案 您所描述的内容最好称为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以获得有关该主题的高级指导.

点赞