Question

我尝试添加

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

对于我的webpack配置文件，但是当我以隐身方式加载程序包时比较网络时（带有和不带有该配置），两者是相同的。

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

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

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

Answer 1

好吧，要分隔每页的每个块，应使用"Dynamic import"，这是一种代码拆分技术。通过使用它，您可以明确地告诉webpack不需要它，直到需要它为止。

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

为此，您：import("path/to/whatever");。例如，如果您想做某事，请在react。

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

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

1 个答案: