[webpack] 第2035天 在webpack中，请说说SplitChunksPlugin的原理

[haizhilin2013]

第2035天 在webpack中，请说说SplitChunksPlugin的原理

3+1官网

我也要出题

[white10205]

SplitChunksPlugin 是 Webpack 中的一个插件，用于将代码拆分成多个块（chunks）。这些块可以在运行时动态加载，从而提高应用程序的性能。

SplitChunksPlugin 的原理基于以下两个主要概念：

代码分割（Code Splitting）：代码分割是将代码拆分成多个块的过程。这些块可以在运行时动态加载，从而提高应用程序的性能。例如，你可以将应用程序的代码拆分成多个块，每个块包含一个页面或组件的代码。当用户访问一个页面时，只有该页面的代码块会被加载。

共享模块（Shared Modules）：共享模块是多个块之间共享的模块。例如，你可能有一个库（如 React 或 lodash）被多个页面或组件使用。你可以将这些库拆分成一个单独的块，并在需要时动态加载。

SplitChunksPlugin 的配置选项允许你控制如何拆分代码和共享模块。例如，你可以指定最小块大小（minSize），只有大于这个大小的块才会被拆分。你也可以指定最大块大小（maxSize），只有小于这个大小的块才会被拆分。

SplitChunksPlugin 还允许你控制如何共享模块。例如，你可以指定共享模块的最小使用次数（minChunks），只有被使用超过这个次数的模块才会被共享。

总的来说，SplitChunksPlugin 的原理是基于代码分割和共享模块的概念，通过配置选项来控制如何拆分代码和共享模块。

[Elylicery]

SplitChunksPlugin 是用于代码分割和优化的插件。主要作用是将共享模块提取到单独的文件中，以减少重复代码，提高加载效率。

SplitChunksPlugin 的原理

• 分析依赖关系: Webpack 在构建时分析模块的依赖关系图，找出可以被多个模块共享的代码。
• 创建共享块: 根据配置，将这些共享的模块提取到一个或多个独立的文件（chunk）中。
• 优化加载: 通过提取公共代码，减少重复加载的资源，提高浏览器缓存命中率，从而优化加载速度。

配置选项
chunks: 指定要分割的模块类型（all、async、initial）。
minSize: 生成 chunk 的最小大小。
minChunks: 模块被引用的最小次数。
maxAsyncRequests: 按需加载时的最大并行请求数。
maxInitialRequests: 入口点的最大并行请求数。
automaticNameDelimiter: 文件名的连接符。
cacheGroups: 自定义缓存组，用于指定不同的分割策略。

工作流程

• 初始分析: Webpack 构建时分析所有模块的依赖关系。
• 匹配规则: 根据 splitChunks 配置，匹配需要分割的模块。
• 生成 chunk: 将符合条件的模块提取到新的 chunk 中。
• 输出文件: 将这些 chunk 输出为独立的文件，供浏览器按需加载。

通过 SplitChunksPlugin，可以有效地管理和优化 Webpack 构建过程中的代码分割策略，提高应用的加载性能和用户体验。