在现代前端框架中，Webpack 已经成为了一个必不可少的工具。作为一个打包工具，Webpack 的高级功能使得我们可以轻松地管理和优化我们的代码，特别是在处理大型的应用程序时尤为重要。在本文中，我们将探讨 Webpack 4.x 中的 splitChunksPlugin 和 mini-css-extract-plugin 插件，并提供详细而深入的使用指南和示例代码。
splitChunksPlugin 插件
splitChunksPlugin 是一个非常有用的插件，可以帮助我们在 Webpack 构建中自动拆分代码块。这个过程可以减小我们的文件大小，并在加载时减少请求次数。我们可以在 Webpack 的配置文件中通过配置 splitChunks 块来使用该插件:
-------------- - -
------------- -
------------ -
------- --------
-------- ------
---------- --
----------------- --
------------------- --
----------------------- ----
----- -----
------------ -
------- -
----- -------------------------
--------- ----
--------- ------------------
--
------- -
----- -----------------------
--------- ----
--------- -------------------
------------------- ----
-
-
-
-
-上述代码中提供了一些有用的配置选项，包括:
chunks: 用于选择要优化哪些块，例如只包含初始化代码的块或异步加载的块。该选项有三个值可选：'initial'（选择初始块），'async'（选择异步加载块）和'all'（选择所有块）。默认为 'async'。minSize: 公共模块的最小大小，单位为 bytes。minChunks: 一个模块被使用的次数。maxAsyncRequests: 按需加载的最大并行请求数。maxInitialRequests: 初始加载的最大并行请求数。automaticNameDelimiter: 分离出来的块文件名的间隔符。name: 设置分离出来的块的名称，如果设置为 true，则会基于块和缓存组键自动生成名称。cacheGroups: 缓存组是一个对象，用于为不同的块定义不同的缓存组，可以设置多个缓存组。每个缓存组可以有自定义的 test、priority 和 filename 等选项，用于定义获取拆分块的规则。
mini-css-extract-plugin 插件
在我们的 Webpack 配置中，通常需要将 CSS 提取到单独的文件中以更好地管理它们，这就是 mini-css-extract-plugin 所做的事情。通过在 Webpack 配置中添加插件实例，它会将 CSS 文件从 JavaScript 文件中分离出来，独立生成一个 CSS 文件，这样可以更好地缓存和利用浏览器的缓存机制。在 Webpack 配置中添加 mini-css-extract-plugin 插件:
----- -------------------- - -----------------------------------
-------------- - -
------- -
------ -
-
----- ---------
---- -
----------------------------
------------
-
-
-
--
-------- -
--- ----------------------
--------- -------------------------
-------------- -----------------------
---
-
-上面的代码片段，当 Webpack 打包时，会将样式提取到单独的 CSS 文件中。如果没有 mini-css-extract-plugin 插件，Webpack 将会把样式提供给 JavaScript 文件。mini-css-extract-plugin 提取样式后，可以在选择所需的页面中，只加载所需的 CSS 文件。
这里列出了插件的配置项:
filename: 分离的 CSS 文件的文件名，支持 [name]、[hash]、[contenthash] 和 [chunkhash] 变量。chunkFilename: 用于避免 HTTP 请求过多，生成的 CSS 文件名。
结论
在这篇文章中，我们介绍了 Webpack 4.x 中的 splitChunksPlugin 和 mini-css-extract-plugin 两个重要的优化插件。通过使用这两个插件可以更好地管理和优化代码，提高性能。在这个过程中，我们提供了详细的配置说明和示例代码，希望本文能提供有效的帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670b036ed91dce0dc8869832