Webpack 4：代码拆分、代码块关系图及优化插件 SplitChunks

Webpack 4 中的 SplitChunks

SplitChunks 是一种代码块拆分策略，可以帮助我们减少包大小，提高应用程序的性能。它通过将代码块中的公共代码提取到一个单独的代码块中来实现这一点。这可以减少重复代码的数量，并使代码块更小，从而减少加载时间。

SplitChunks 可以通过在 webpack 的配置文件中添加以下配置项来启用：

optimization: {
  splitChunks: {
    chunks: 'all'
  }
}

SplitChunks 的工作原理

SplitChunks 的工作原理很简单。它首先会分析你的代码，找到其中重复出现的代码。然后，它会将这些重复代码提取到一个单独的代码块中。这个代码块被称为公共代码块。

公共代码块通常会包含一些常用库的代码，例如 React、Vue 等。这样，就可以避免这些库的代码在不同的代码块中重复出现，从而减少包大小。

如何使用 SplitChunks

SplitChunks 可以通过在 webpack 的配置文件中添加以下配置项来使用：

optimization: {
  splitChunks: {
    chunks: 'all'
  }
}

这个配置项告诉 webpack，要将所有代码块中的公共代码提取到一个单独的代码块中。

优化 SplitChunks 的技巧

有一些技巧可以帮助你优化 SplitChunks 的性能：

• 使用 SplitChunks 的 minSize 选项来指定公共代码块的最小大小。这样可以防止一些非常小的公共代码块被提取出来，从而避免不必要的开销。
• 使用 SplitChunks 的 maxSize 选项来指定公共代码块的最大大小。这样可以防止一些非常大的公共代码块被提取出来，从而避免加载时间过长。
• 使用 SplitChunks 的 cacheGroups 选项来指定一些自定义的公共代码块。这样可以将一些特定类型的代码提取到单独的代码块中，从而提高性能。

总结

SplitChunks 是一种代码块拆分策略，可以帮助我们减少包大小，提高应用程序的性能。它通过将代码块中的公共代码提取到一个单独的代码块中来实现这一点。SplitChunks 可以通过在 webpack 的配置文件中添加以下配置项来启用：

optimization: {
  splitChunks: {
    chunks: 'all'
  }
}

我们可以使用一些技巧来优化 SplitChunks 的性能，例如使用 minSize、maxSize 和 cacheGroups 等选项。