Webpack 如何配置代码分割
在现代的 Web 开发中，越来越多的网站和应用程序使用了复杂的前端代码。这些代码包括多个 JavaScript 文件、CSS 样式表、图片和其他资源。在这样的环境下，代码分割就显得尤为重要，它可以使得网站和应用程序更快地加载和渲染，提高用户体验。Webpack 是一个强大的 JavaScript 模块打包工具，它提供了代码分割的支持，让你可以轻松地将代码分割成多个小块。
Webpack 代码分割的原理是将代码分离到不同的 bundle 中。将不同的页面或功能分离出来，分别打包到不同的文件中，通过按需加载来优化性能。其中，Webpack 内置了 SplitChunksPlugin 用于处理代码分割，也可以使用动态导入来实现，我们将在下文介绍这两种方法的使用以及配置。
SplitChunksPlugin 配置
SplitChunksPlugin 是一个插件，用于提取公共代码到单独的文件中，可以将多个入口 chunk 的公共部分提取出来，形成一个单独的 chunk。要启用 SplitChunksPlugin，需要在 Webpack 配置中进行如下配置：
-------------- - -
-- ---
------------- -
------------ -
------- ------
-------- ------
-------- ------
---------- --
----------------- ---
------------------- ---
----------------------- ----
----- -----
------------ -
-------- -
----- -------------------------
--------- ---
--
-------- -
---------- --
--------- ----
------------------- ----
-
-
-
-
-上面的配置中，splitChunks 配置是对于webpack3以及以下版本提供的，需要进行相应的更改。chunks 说明了哪些模块被分割成单独的文件，一般都是 all，即所有模块都进行分割。minSize 是提取出来的 chunk 的最小大小，maxSize 是提取出来的 chunk 的最大大小，minChunks 是分割前模块被引用的最少次数，maxAsyncRequests 和 maxInitialRequests 是按需加载和初始加载的最大请求数，automaticNameDelimiter 指定提取出来的 chunk 名称用什么连接，name 设置 chunk 的名称。
cacheGroups 用于配置分割的规则和权重，其中优先级越高的 cacheGroups 被优先选择。vendors 使用正则表达式匹配第三方库，将其单独打包出来。default 用于提取被两个或以上 chunk 共享的代码。
动态导入
动态导入是一种在运行时动态加载模块的方法，可以根据需要加载自己需要的模块，从而实现代码分割。它是通过 import() 函数来实现的，该函数在 Webpack 中称为动态导入语法。
在动态导入中，可以使用 webpackChunkName 来为被动态导入的模块命名：
--------- ----------------- --------------- -- -----------------
-------- -------- -------- -- -- -
-- --- --------
--
---------- -- -
-- ------ -------
--需要注意的是，动态导入语法是 ES2015 中的标准语法，但是目前不是所有浏览器都支持它。如果需要在旧浏览器中使用，可以使用 babel-plugin-syntax-dynamic-import 插件来将其转换为 ES5 代码。
示例代码
下面为一个简单的 Webpack 配置文件，演示了如何使用 SplitChunksPlugin 和动态导入来实现代码分割：
----- ---- - ----------------
-------------- - -
----- --------------
------ -
----- ----------------
--
------- -
--------- ------------------------
----- ----------------------- -------
--
------------- -
------------ -
------- -----
-
--
---------- -
------------ ----------------------- --------
--------- -----
----- ----
-
--在上面的示例中，我们将代码分割成了多个文件，每个文件都带有一个唯一的 chunkhash，确保其唯一性。在浏览器中访问页面时，可以通过按需加载来延迟加载某些文件，从而提高页面的性能。
结论
Webpack 是一个强大的 JavaScript 模块打包工具，它提供了代码分割的支持，让你可以轻松地将代码分割成多个小块。通过 SplitChunksPlugin 和动态导入，可以将不同的页面或功能分离出来，分别打包到不同的文件中，通过按需加载来优化性能，提高用户体验。我们希望本文可以帮助你更好地配置 Webpack 代码分割功能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672ed22ceedcc8a97c8aed62