Webpack 4 SplitChunks,将异步块分组到一定大小

我们正在尝试优化我们的 webpack 捆绑。现在我们生成了很多小块,但我们想根据一些规则对它们进行分组:

  • 节点模块和代码应该分开,例如。一个块要么是所有 node_modules 要么是所有代码
  • 每个块大小应大于 20KB
  • 我有点实现文件大小限制,但最终的问题是在第一个页面加载时,所有块都被一次下载,我拆分文件是因为我希望它们仅在需要时才下载,而不是一次全部。以下是我为达到这一点所做的步骤。如果你能指出我正确的方式,那将不胜感激

1.现状

设置:

optimization: {
  splitChunks: {
    chunks: 'all', // optimize both static and dynamic import
    maxAsyncRequests: 5, // for each additional load no more than 5 files at a time
    maxInitialRequests: 3, // each entrypoint should not request more then 3 js files
    automaticNameDelimiter: '~', // delimeter for automatic naming
    automaticNameMaxLength: 30, // length of name
    name: true, // let webpack calculate name
    cacheGroups: {
      vendors: {
        test: /[/]node_modules[/]/,
        priority: -10,
        enforce: true // seperate vendor from our code
      },
      default: {
        minChunks: 2,
        priority: -20,
        reuseExistingChunk: true
      }
    }
  },
},

enter image description here 可以看到有很多小文件

2.为了了解小块的来源,我强制将异步块合并为两个,一个来自 node_modules,一个来自代码

环境

optimization: {
  splitChunks: {
    ... same as before ...
    cacheGroups: {
      async_vendor: {
        test: /[/]node_modules[/]/,
        chunks: "async",
        priority: 20,
        name:"async_vendor",
      },
      async_code: {
        chunks: "async",
        priority: 10,
        name: "async_code",
      },
      vendors: {
        test: /[/]node_modules[/]/,
        priority: -10,
        enforce: true // seperate vendor from our code
      },
      default: {
        minChunks: 2,
        priority: -20,
        reuseExistingChunk: true
      }
    }
  },
},

enter image description here 没有小文件,所以小文件是异步块

3.所以现在这些小文件由我控制这两个缓存组,我尝试将它们分成更小的文件

环境

optimization: {
  splitChunks: {
    ...same as before...
    cacheGroups: {
      async_vendor: {
        test: /[/]node_modules[/]/,
        chunks: "async",
        priority: 20,
        name:"async_vendor",
        maxSize: 200000,
        minSize: 200000,
      },
      async_code: {
        chunks: "async",
        priority: 10,
        name: "async_code",
        maxSize: 200000,
        minSize: 200000,
      },
      ...same as before...
    }
  },
},

enter image description here 这看起来正是我想要的。只有一个问题是当我访问第一页时所有这些文件都被加载了。这在原始场景中不会发生(1.)。我怀疑这是因为我将名称强制放入 cacheGroup。但如果我不强制命名,则会生成小块 enter image description here

4.如果我不指定缓存组名称会发生​​什么:(

环境

optimization: {
  splitChunks: {
    ... same as before ...
    cacheGroups: {
      async_vendor: {
        test: /[/]node_modules[/]/,
        chunks: "async",
        priority: 20,
        name:"async_vendor",
        maxSize: 200000,
        minSize: 200000,
      },
      async_code: {
        chunks: "async",
        priority: 10,
        maxSize: 200000,
        minSize: 200000,
      },
      ... same as before ...
    }
  },
},

Situation 4

是否有可能在 splitchunk 中解决这个问题?谢谢你的帮助

stack overflow Webpack 4 SplitChunks, grouping asynchronous chunks to certain size
原文答案

答案:

作者头像

首先,我认为您对 splitChunks.chunks 属性的理解有误。它有助于优化在 splitChunks.chunks 类型的块中引用的模块的拆分。例如。 chunks=async,它将考虑从异步块引用的模块并拆分/优化它们。

回到最初的问题,

  1. 当前情况: 所有超过 20KB(默认)的模块都被分成块,无论它们是从异步块还是从初始块引用的。还有其他限制,但让我们暂时跳过它们。

  2. 为了了解小块的来源,我强制将异步块合并为两个,一个来自 node_modules,一个来自代码: 现在,从异步块引用的所有模块都捆绑到供应商和代码块中。这可能是因为异步和初始块都引用了所有小块(大于 20KB)的模块。可以尝试使用 chunks: initial,我希望得到相同的结果。

  3. 由于入口/初始代码在 async_vendor 和 async_code 块中有引用,因此它们被相应地加载。

要回答最初的问题,对初始块 (chunks:initial) 使用第三个配置应该会有所帮助。