webpack 中的 code spliting 是如何动态加载 chunk 的

在 webpack 中，Code Splitting 是一种将代码拆分为小的块（chunks）并按需的技术。它可以帮助我们优化网页加载速度，提高性能。

动态加载 是通过使用 webpack 的置函数来实现的。其中最常用的方法是使用 `import()` 函数，它可以在运行时动态地加载模块。例如：

import('./path/to/module')
  .then((module) => {
    // 使用加载的模块
  })
  .catch((error) => {
    // 处理加载模块时的错误
  });

在上面的示例中，`import()` 函数返回一个 Promise，当成功加载模块后，就可以在 `then` 方法中使用它。如果加载失败，则可以在 `catch` 方法中处理错误。

Webpack 在运行时会自动将代码拆分为不同的 chunk，并根据需要进行加载。可以使用 webpack 的配置来指定拆分点，例如使用 `optimization.splitChunks` 配置项：

module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

上述配置将会将所有的公共模块拆分为单独的 chunk，并在需要时进行动态加载。

需要注意的是，动态加载会产生额外的网络请求，因此需要在性能和用户体验之间做出权衡。可以根据项目的需求和实际情况来决定使用动态加载的策略。