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

Question

我尝试添加

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

到我的 webpack 配置文件但是当我在隐身加载包时比较网络时，有和没有那个配置，两者都是相同的。

另外运行构建产生相同的输出。

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

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

Answer 1

好吧，要将每个页面的每个块分开，您应该使用 "Dynamic import"，这是一种代码拆分技术。通过使用它，你明确地告诉 webpack 你不需要它，直到它是必需的。

它有什么作用？它是一个 "wrapper" 变成了 require.ensure，returns 一个承诺。因为这是一个承诺，所以可以在路上请求它。

为此，您：import("path/to/whatever");。如果你想做点什么，比如在react.

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

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

How to know if Webpack's 4 splitChunks works?

webpack

webpack-4

webpack-splitchunks