在前端工程化中，webpack 是非常常用的工具之一。它提供了许多优秀的特性，其中 chunk 又是一个非常重要的概念。本文将详细介绍 webpack 中 chunk 的概念以及如何按需加载。
什么是 chunk？
Chunk 是 webpack 中的一个概念，用来表示代码块。在 webpack 打包时，会将所有代码文件分成不同的代码块，以提高页面加载速度。chunk 的产生有多种方式，比如通过 entry 入口、动态导入等。
一个 chunk 可以包含多个 module，它们可以互相依赖，组成了完整的代码块。每个 chunk 中都包含了一个 runtime 模块，这个模块负责处理模块之间的依赖关系，是整个 chunk 的基础。
如何生成 chunk
使用 entry 入口
entry 是 webpack 配置文件中的入口属性，可以用来配置入口模块。通过 entry 配置的入口模块会被打包成一个 chunk。一个配置如下的 entry 属性可以生成一个名为 app 的 chunk：
module.exports = {
entry: {
app: './src/app.js'
}
}使用动态导入
动态导入是指在代码运行时才导入模块。它可以根据实际需要动态加载代码，从而优化页面加载速度。我们可以使用 import() 函数来进行动态导入。
比如我们在一个页面中只需要加载按钮被点击时才需要的模块，那么我们就可以使用 import() 函数来实现：
button.onclick = async function() {
const module = await import('./dynamic-module.js')
// do something with module
}使用代码分割
代码分割是指将代码分成更小的块，以便实现按需加载。在 webpack 中，我们可以使用代码分割来生成更多的 chunk。
比如，我们可以使用 import 函数来分割代码：
import(/* webpackChunkName: "dynamic-module" */ './dynamic-module.js')
.then(module => {
// do something with module
})这段代码告诉 webpack 将 './dynamic-module.js' 文件打包成名为 'dynamic-module' 的 chunk。
如何按需加载
按需加载是指根据实际需要动态加载代码，优化页面加载速度和用户体验。在 webpack 中，我们可以使用动态导入和代码分割来实现按需加载。
使用动态导入实现按需加载
使用动态导入来实现按需加载非常简单，只需要使用 import() 函数即可。比如，我们可以使用以下代码来实现按需加载：
button.onclick = async function() {
const module = await import('./dynamic-module.js')
// do something with module
}当用户点击按钮时，才会加载 './dynamic-module.js' 文件。
使用代码分割实现按需加载
除了动态导入外，我们也可以使用代码分割来实现按需加载。在 webpack 中，我们可以使用 splitChunks 来配置代码分割。它可以将多个 chunk 中重复的代码提取出来，生成一个新的 chunk。
比如，我们可以将 react 和 react-dom 提取出来打包成一个单独的共享代码块：
-- -------------------- ---- -------
-------------- - -
------------- -
------------ -
------- ------
-------- --
------------ -
------ -
----- -----------------------------------------------
----- --------
------- -----
-
-
-
-
-这样，在生成 app 和 dynamic-module 两个 chunk 时，它们都会自动将共享代码块 'react' 打包进去，从而减少了重复代码的加载。
总结
本文详细介绍了 webpack 中 chunk 的概念以及如何按需加载。我们了解了什么是 chunk，以及如何使用 entry 入口、动态导入和代码分割来生成 chunk。同时，我们也学习了如何使用动态导入和代码分割来实现按需加载，提高页面加载速度和用户体验。希望本文能够对大家在前端工程化中的工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648035d548841e9894fb36f5