介绍
Webpack 是一款现代化的打包工具，它支持将多个独立的 JavaScript 文件打包成一个或多个 bundle 文件。但是，在实际的开发中可能需要将 bundle 文件进一步切割成更小的文件块，这些小文件块就被称作 chunk。本文将详细介绍 chunk 和 bundle 的区别、作用和如何使用它们。
区别
Bundle： 一个 bundle 是由 webpack 打包生成的一个文件。一个 bundle 文件包含了所有被 webpack 处理过的模块和它们之间的依赖关系图，可以被直接在浏览器中访问运行。
Chunk： chunk 也是 webpack 打包过程中的生成物之一。在 webpack 中，“chunk”这个术语是一个工作状态，webpack 核心（包括 loader 和 plugin）的理论依据是操作 chunk 而非 bundle。在打包过程中，webpack 将会把多个模块打包成一个或多个 chunk。它们可以是同步（被直接引入的模块），也可以是异步（按需加载的模块）生成的。
作用
Bundle 的作用
将多个模块中的代码合并成一个文件，避免了多个文件同时请求而带来的网络开销。
对于开发者来说，可以用 ES6 模块化的形式写代码，提高代码复用性和可读性。
Chunk 的作用
在实际项目中，chunk 的引入可以将项目功能模块化，实现按需加载。按需加载可以有效的提升网页加载速度和用户体验。
可以将一些通用的代码提取到公共chunk中，避免了代码冗余，也方便了代码的维护以及扩展。比如，将多个页面都用到的底层库（jquery、axios、lodash等）提取到公共chunk中。
如何使用
在 webpack 中，chunk 可以通过使用以下两个插件进行配置。
1. SplitChunksPlugin
SplitChunksPlugin 可以将我们在项目中同步引入的模块分离到单独的 chunk 中。这些 chunk 可以被在后续的页面中重复利用。通常用来提取公共代码块和第三方库。
可以使用以下配置进行使用。
-- -------------------- ---- -------
-- -----------------
-------------- - -
-----
------------- -
------------ -
------- -------- -- ----------
-------- ------ -- --- ----- --
-------- --
---------- -- -- --------------------
----------------- -- -- -------
------------------- -- -- --------
----------------------- ----
----- -----
------------ -
-------- -
----- -------------------------
--------- --- -- --------------
--
------- -
----- ---------
--------- --- -- --------
----- --------
--
------- -
---------- --
--------- ---- -- ----
------------------- ----
-
-
-
-
--上面的配置将会将 node_modules 中的所有代码提取到 vendors chunk 中，并将 jquery 提取到单独的一个 jquery chunk 中。
2. MiniCssExtractPlugin
该插件可以将项目中使用到的 css 文件提取到单独的文件中进行打包，提高网页渲染速度以及实现缓存。
可以使用以下配置进行使用。
-- -------------------- ---- -------
-- -----------------
----- -------------------- - -----------------------------------
-------------- - -
-----
-------- -
--- ----------------------
--------- -------------
-------------- -----------
--
--
--
------- -
------ -
-
----- ---------
---- -
-
------- ---------------------------
--
------------
-
-
-------
-
-
--上面的配置可以将 .css 文件提取到单独的文件中。
结论
Webpack中，chunk 和 bundle 是两个不同的概念，chunk 的引入可以实现代码的模块化、按需加载，提高代码效率和减少代码冗余。在实际项目中，可以使用 SplitChunksPlugin、MiniCssExtractPlugin 等已经打包好的插件进行 chunk 的引入和实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674a66baa1ce0063548bb066