在前端开发中，我们经常使用各种各样的第三方库来帮助我们完成工作，但它们也会增加我们项目的体积。Webpack 提供了一种简单的方法来将第三方库与我们的应用代码分开打包，从而减少我们项目的大小，提高加载速度。
为什么要分离第三方库和应用代码？
首先，让我们来看一下为什么我们需要分离第三方库和应用代码。
当我们引入第三方库时，它往往包含了大量的代码和功能，如 UI 库、数据处理库等。这些库可能会被多个模块所引用，但我们并不需要在每个模块中都将其打包一遍，这样会导致我们项目的体积增加，加载速度减慢。
另外，我们应用代码中也包含了很多逻辑和功能，如业务逻辑、组件等。我们希望这些代码和第三方库代码分开打包，这样可以使我们代码结构更清晰，避免打包出的文件过大，减少加载时间。
如何分离第三方库和应用代码？
Webpack 提供了两种方法来将第三方库与应用代码分开打包，它们分别是：
- 使用
CommonsChunkPlugin插件 - 使用
DllPlugin插件
下面，我们来逐一讲解。
使用 CommonsChunkPlugin 插件
CommonsChunkPlugin 插件是 Webpack 自带的一个插件，它可以将代码中的公共代码提取出来。我们可以通过这个插件来将第三方库与我们的应用代码分离打包。
下面是一个简单的示例：
webpack.config.js
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
------ -
---- ---------------
------- --------- ------------ ---------
--
------- -
----- ----------------------- --------
--------- ------------------
--
-------- -
--- -------------------------------------
----- --------
--
-
--在这里，我们定义了两个入口文件 app 和 vendor，vendor 中包含了我们的第三方库，即 react、react-dom 和 lodash。接着，我们通过 CommonsChunkPlugin 插件来将公共代码打包到 vendor.bundle.js 中。
如果你运行了这个配置文件，它会将 vendor.bundle.js 和 app.bundle.js 两个文件打包到 dist 目录中，其中 vendor.bundle.js 包含了公共的代码。
使用 DllPlugin 插件
DllPlugin 插件是 Webpack 提供的一个插件，它允许我们将第三方库与应用代码分开打包，并且可以将打包好的第三方库进行缓存，加快我们的打包速度。
下面是一个简单的示例：
webpack.config.js
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
------ -
---- --------------
--
------- -
----- ----------------------- --------
--------- ------------------
--
-------- -
--- ----------------------------
-------- ----------
--------- --------------------------------------
--
-
--在这里，我们首先需要定义一个 webpack.config.dll.js 文件来打包我们的第三方库，然后在 webpack.config.js 中使用 DllReferencePlugin 插件来引入打包好的第三方库。我们可以通过以下命令来打包第三方库：
webpack --config webpack.config.dll.js
接着，它会在 dist 目录下生成 vendor.dll.js 和 vendor-manifest.json 两个文件。vendor.dll.js 包含了我们的第三方库，vendor-manifest.json 文件是一个描述文件，它记录了 vendor.dll.js 中代码的映射关系，以便后续的打包使用。
在 webpack.config.js 中，我们使用 DllReferencePlugin 插件来引入 vendor-manifest.json 文件，从而实现分离打包。
总结
在前端开发过程中，我们经常需要使用第三方库来帮助我们完成工作，但同时也需要考虑代码的体积和加载速度。Webpack 提供了多种方式来分离第三方库和应用代码，我们可以根据实际情况选择使用。
此外，除了上述两种插件，我们还可以使用 externals 选项来将一些外部的库排除在我们的目标包之外。
希望本文能对你的学习和实践有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6469ebe7968c7c53b09b3690