随着前端项目的复杂度不断增加，现代前端应用已经远远不是简单的一些 HTML、CSS 和少量的 JavaScript 代码了。越来越多的库和框架变得必不可少。这些库和框架不仅消耗了大量的网络资源和加载时间，还有助于增加 JavaScript 包的大小，从而导致页面加载时间过长的问题。为了解决这个问题，服务端渲染与按需加载等技术诞生了。其中 webpack 打包时公共模块 (vendor) 单独打包是一种关键技术。
为什么要把公共模块单独打包
我们假设有一个项目，其中有多个入口点（entry points）和许多模块（modules）。当我们使用 webpack 将这些模块打包成 bundle 时，我们将得到一个包含所有代码的 bundle 文件。而这个文件只有当它被加载时，才会开始执行整个应用程序。因此，我们将需要加载的 JavaScript 代码压缩成尽可能小的文件。
这里的问题在于，如果我们的多个入口点之间共享了一些公共代码，这些代码将被打包到多个 bundle 中，从而导致代码冗余，增加整个包的大小。例如，如果我们在不同的文件中使用了 jQuery，这意味着我们在每个文件中都将包含一份 jQuery 代码。这样做不仅导致代码冗余，而且还增加了 bundle 的体积，使整个项目加载变慢。因此，我们需要将这些公共代码提取到一个单独的文件中，然后在每个入口点中使用这个文件。
如何将公共模块单独打包
webpack 支持使用 CommonsChunkPlugin 插件将代码分离为不同的 chunk。这个插件将公共模块提取出来并打包到一个单独的文件中。我们可以将所有共享模块提取到一个文件中，将不同的入口文件和 vendor 文件组合起来，以便在浏览器中加载并渲染。
我们来看一个简单的示例：
-- -----------------
----- ------- - -------------------
-------------- - -
------ -
---- ---------------
------- ---------- -- ---------
--
------- -
--------- ------------------
--
-------- -
--- -------------------------------------
----- ---------
---------- --------
--
-
--在上面的示例中，我们使用了 CommonsChunkPlugin 插件将名为 vendor 的 chunk 提取出来。此外，我们还将 minChunks 设置为 Infinity，这表示不要将任何其他模块提取到 vendor chunk 中。这段代码将提取出所有在 vendor chunk 中引用的依赖。
如果我们使用 HTML 页面作为我们的入口点，我们可以通过将这些脚本作为标签添加到 HTML 中来使用它们：
--------- -----
------
------
----- ----------------
-------------- ---------------
-------
------
------- --------------------------------
------- -----------------------------
-------
-------在这个示例中，我们首先加载 vendor.bundle.js 文件，然后加载 app.bundle.js 文件。由于 vendor chunk 包含了所有共享的依赖，我们可以确保它会在应用代码之前加载。
总结
在本文中，我们介绍了将 webpack 打包时公共模块 (vendor) 单独打包的原因和如何实现。这是使您的 JavaScript 代码更小，更快速加载，从而帮助提高应用性能的关键技术。
在开发过程中，当我们开始使用一些其他人创建的库时，我们应该考虑它们的大小，以及我们应该如何在我们的应用程序中使用它们。一般情况下，提取这些库中的公共代码，或者使用像 webpack 中的模块系统，将是解决问题的最佳方式。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/653e24507d4982a6eb7b6f91