什么是 divide-webpack-plugin
divide-webpack-plugin 是一个 webpack 插件，它可以将打包出来的文件按照指定规则分割成多个文件，以优化页面加载速度和调用性能。
安装和配置
安装
npm install divide-webpack-plugin --save-dev
引入
const DivideWebpackPlugin = require('divide-webpack-plugin');配置
在 webpack 配置文件中，新增插件设置：
-- -------------------- ---- ------- ----- ------------------- - --------------------------------- -------------- - - -------- - --- --------------------- -- -------- ------ - - ----- ----------- ----- --------- -------- ---- - ---- -- -- ----- -------- ---- - ---- -- -- ----- - - -- - --
分割规则设置
可以设置多个分割规则，每个规则都可以指定文件的名称、大小范围、文件类型等。
test
type: 正则表达式
你需要在此处设置匹配哪些文件，以满足分割规则。
例如，/\.\[jt\]s$/ 可以匹配所有的 .js 或 .ts 文件。如果你想匹配所有的文件，可以将它设置为 /.*/。
name
type: 字符串
此处设置分割出来的文件名称。如果你设置了多个规则，那么你必须指定所有规则的名称。
maxSize
type: 数字
此处设置分割后的文件大小上限，单位 bytes。如果你设置了多个规则，那么你必须指定所有规则的大小。
minSize
type: 数字
此处设置分割后的文件大小下限，单位 bytes。如果你设置了多个规则，那么你必须指定所有规则的大小。
示例代码
更具体的例子，你可以使用下面的配置参数：
-- -------------------- ---- -------
----- ------------------- - ---------------------------------
-------------- - -
------ -
---- -----------------
--
------- -
--------- ------------------------
--
-------- -
--- ---------------------
------ -
-
----- --------
----- ---------
-------- ---- - --- -- ----
-------- ---- - --- -- ----
--
-
----- --------
----- ------
-
-
--
-
--上面的配置将会把一个超过 50KB 且大于 10KB 的 vendor 文件分割出来，并命名为 vendor.[chunkhash].js。剩下的所有文件将会被打包进 app.[chunkhash].js 中。
总结
通过使用 divide-webpack-plugin，你可以非常容易地优化你的前端应用程序的性能。它需要一些配置来进行正确的设置，但一旦设置好了，它就会自动处理分割。这对于大型应用程序来说尤其有用，可帮助你更好地控制不同文件的大小，并提高整个应用程序的性能和速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ae181e8991b448d8878