webpack - 如何知道 Webpack 的 4 个 splitChunks 是否有效？

Question

我试图添加

  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  },

对于我的 webpack 配置文件，但是当我在隐身加载包时比较网络时，无论有没有该配置，两者都是相同的。

同样运行构建会产生相同的输出。

有没有另一种方法可以确定它是否有作用？

我想要实现的是我网站上的每个页面都有自己的块，只有在导航到该页面时才会加载。

Answer 1

好吧，要分隔每页的每个块，您应该使用“动态导入”，这是一种代码拆分技术。通过使用它，你明确地告诉 webpack 你不需要它，直到它被需要为止。

它能做什么？它是一个变成 的“包装器” require.ensure，它返回一个承诺。而且因为它是一个承诺，所以它可以在路上被要求。

为此，您：import("path/to/whatever");. 如果你想做某事，例如，在反应中。

import("component").then((c) => return <c />);