庖丁解牛 webpack 4 生成 chunk 全解析

webpack 4 源码主流程分析（八）：生成 chunk

在 webpack 4 的编译过程中，生成 chunk 是一个非常重要的环节。chunk 是 webpack 的基本输出单元，它包含了需要被加载的代码和资源。在这个环节中，webpack 会根据模块之间的依赖关系，将它们组合成一个个 chunk，以便于浏览器或其他环境加载。

compilation.finish 钩子

生成 chunk 的过程是从 compilation.finish 钩子开始的。这个钩子会在 compilation 阶段的最后被触发，此时所有的模块已经完成编译，并且已经生成了依赖关系图。

FlagDependencyExportsPlugin 插件

在 compilation.finish 钩子中，webpack 会执行 FlagDependencyExportsPlugin 插件注册的事件。这个事件的作用是遍历所有的模块，将每个模块导出（export）的变量以数组的形式单独存储在 module 的 exports 属性中。

变量导出数组

变量导出数组是一个非常重要的数据结构，它是 webpack 生成 chunk 的基础。它包含了所有模块导出的变量，这些变量可以被其他模块导入（import）。

入口 chunk

在生成 chunk 的过程中，webpack 会首先创建一个入口 chunk。入口 chunk 是一个特殊的 chunk，它包含了应用程序的入口模块。入口模块是应用程序的第一个被执行的模块，它通常是 index.js 或 main.js。

非入口 chunk

除了入口 chunk 之外，webpack 还会生成非入口 chunk。非入口 chunk 是包含应用程序中除入口模块之外的其他模块的 chunk。这些 chunk 可以被入口 chunk 或其他非入口 chunk 导入。

动态 chunk

webpack 还支持动态 chunk。动态 chunk 是在运行时生成的 chunk。它们通常用于加载应用程序中按需加载的模块。

异步 chunk

webpack 还支持异步 chunk。异步 chunk 是在应用程序加载完成后加载的 chunk。它们通常用于加载应用程序中不经常使用或不太重要的模块。

树摇动

webpack 还支持树摇动。树摇动是一种优化技术，它可以删除应用程序中未使用的代码。webpack 通过分析模块之间的依赖关系来确定哪些代码是未使用的。

代码分割

webpack 还支持代码分割。代码分割是一种优化技术，它可以将应用程序中的代码分成多个独立的 chunk。这可以减少应用程序的加载时间，并提高应用程序的性能。

总结

生成 chunk 是 webpack 4 编译过程中的一个非常重要的环节。webpack 会根据模块之间的依赖关系，将它们组合成一个个 chunk，以便于浏览器或其他环境加载。webpack 支持入口 chunk、非入口 chunk、动态 chunk、异步 chunk、树摇动和代码分割等功能。这些功能可以帮助开发人员构建出更加高效和健壮的应用程序。