在前端开发中，我们经常会使用一些第三方库来提升开发效率和功能。而使用 webpack 进行打包的过程中，我们需要注意一些细节来正确打包第三方库。本文将介绍如何进行正确实践。
1. 确认是否需要打包
在使用第三方库时，我们需要先确认是否需要将其打包。一些库，例如 jQuery 和 lodash，已经封装成了库文件，并且可以直接在 HTML 中引用。而一些库，例如 React 和 Vue，需要进行打包以便正确引入其各个组件或模块。
2. 使用 externals 配置
使用 webpack 打包第三方库时，我们可以使用 externals 配置。externals 配置指定了不需要打包到 bundle 中的库，而是在运行时从外部引用。这可以减小我们的 bundle 大小。
以 React 为例，我们可以在 webpack 的配置文件中加入如下代码：
-------------- - -
-- -------
---------- -
------ --------
------------ ----------
--
--这段代码告诉 webpack，引用 React 时不需要将其打包到 bundle 中，而是从外部引用 React 和 ReactDOM。
3. 配置 ProvidePlugin
除了 externals 配置外，我们还可以使用 ProvidePlugin 配置，以便在我们的代码中直接使用第三方库的全局变量。
以 jQuery 为例，我们可以在 webpack 的配置文件中加入如下代码：
----- ------- - -------------------
-------------- - -
-- -------
-------- -
--- -----------------------
-- ---------
------- --------
--
--
--这段代码告诉 webpack，在我们的代码中可以直接使用 $ 和 jQuery 变量，它们会被自动引入到我们的代码中。
4. 确认使用正确的模块
在使用第三方库时，我们需要确认使用了正确的模块。一些库有多个模块，而我们可能只需要其中的一部分。使用了所有模块会导致无用代码的打包，增加了 bundle 的大小。
以 lodash 为例，lodash 中有许多模块，例如 lodash-es, lodash/fp 和 lodash/core。我们需要确认使用了我们需要的模块，并安装相应的模块。
示例代码
下面是一个使用 React 和 Redux 的示例代码：
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ --------- ---- -------------
------ - ---------- --------- - ---- ------------
----- ------- ------- --------- -
-------- -
------ -
-----
--------- ----------------------
------- ----------- -- ------------------------------------
------- ----------- -- ------------------------------------
------
--
-
-
----------------- - -
------ ----------------------------
---------- --------------------------
---------- -------------------------
--
----- --------------- - ----- -- --
------ -------------
---
----- ------------------ - -
----------
---------
--
------ ------- ------------------------ -----------------------------通过使用 externals 和 ProvidePlugin 配置，我们可以正确引入 React 和 Redux 的相关模块，并将不必要的代码排除在外，从而得到更小的 bundle 大小。
结论
在使用第三方库时，我们需要确认是否需要打包，使用 externals 配置和 ProvidePlugin 配置，并确认使用了我们需要的模块。这些步骤可以帮助我们正确打包第三方库，达到减小 bundle 大小，提升性能的目的。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/671207c9ad1e889fe202418f