在前端开发中，我们经常要使用第三方库来提高我们的开发效率和代码质量。而 webpack 是前端开发中非常流行的打包工具，它可以将我们的代码和第三方库打包成一个或多个文件，以便于部署和维护。本文将介绍 webpack 中如何引入第三方库的解决方法，以及如何优化引入过程，提高打包效率。
1. 直接引入第三方库
最简单的方法就是直接在代码中引入第三方库。例如，我们要使用 lodash 库中的 map 函数，可以这样写：
import { map } from 'lodash';
const arr = [1, 2, 3];
const result = map(arr, n => n * 2);
console.log(result); // [2, 4, 6]这种方法的优点是简单直接，不需要额外的配置。缺点是每次打包时都会将第三方库打包进去，导致打包文件变大，加载时间变长。如果我们的项目中使用了多个第三方库，那么打包时间会更长，影响开发效率和用户体验。
2. 使用 CDN 引入第三方库
另一种方法是使用 CDN 引入第三方库。CDN（Content Delivery Network）是一种分布式网络架构，可以将静态资源缓存在离用户较近的服务器上，提高资源加载速度和用户体验。我们可以在 HTML 文件中直接引入第三方库的 CDN 地址，例如：
-- -------------------- ---- -------
--------- -----
------
------
------- ---------------------------------------------------------------------------------
-------
------
--------
----- --- - --- -- ---
----- ------ - ---------- - -- - - ---
-------------------- -- --- -- --
---------
-------
-------这种方法的优点是可以利用浏览器缓存，避免重复加载第三方库，提高页面加载速度和用户体验。缺点是需要额外的网络请求，如果 CDN 服务不稳定或者被墙，会影响页面的正常访问。
3. 使用 webpack 打包第三方库
最常用的方法是使用 webpack 打包第三方库。我们可以使用 webpack 的 externals 配置项，将第三方库从打包文件中剔除，以便于浏览器缓存和维护。例如：
// webpack.config.js
module.exports = {
// ...
externals: {
lodash: '_',
},
};// index.js import _ from 'lodash'; const arr = [1, 2, 3]; const result = _.map(arr, n => n * 2); console.log(result); // [2, 4, 6]
这种方法的优点是可以避免重复打包第三方库，减小打包文件的体积，提高页面加载速度和用户体验。缺点是需要额外的配置，如果我们打包的第三方库版本更新了，需要手动更新 externals 配置项。而且如果我们的项目中使用了多个第三方库，那么配置项会变得很长，不易维护。
4. 使用 DLLPlugin 打包第三方库
为了解决上述问题，我们可以使用 webpack 的 DLLPlugin 插件，将第三方库打包成一个单独的文件，以便于缓存和维护。DLLPlugin 插件会将第三方库打包成一个动态链接库（Dynamic Link Library），并生成一个 manifest 文件，记录库中每个模块的 ID 和路径。我们可以在项目中使用 webpack 的 DllReferencePlugin 插件，引用动态链接库和 manifest 文件，以便于使用其中的模块。例如：
-- -------------------- ---- -------
-- ---------------------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
------ -
-------- -----------
--
------- -
----- -------------------- --------
--------- ----------------
-------- ---------
--
-------- -
--- -------------------
----- ---------
----- -------------------- ------- ------------------------
---
--
---- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
-- ---
-------- -
--- ----------------------------
--------- ----------------------------------------
---
--
--// index.js import _ from 'lodash'; const arr = [1, 2, 3]; const result = _.map(arr, n => n * 2); console.log(result); // [2, 4, 6]
这种方法的优点是可以将第三方库打包成一个单独的文件，避免重复打包和配置。而且如果我们的项目中使用了多个第三方库，只需要在 DLLPlugin 配置文件中添加相应的入口和库名即可。缺点是需要额外的配置和打包过程，如果我们的项目中使用的第三方库很少，不值得使用这种方法。
5. 总结
本文介绍了 webpack 中引入第三方库的四种方法，分别是直接引入、CDN 引入、打包引用和 DLLPlugin 打包引用。每种方法都有其优缺点，我们需要根据项目的实际情况选择合适的方法。在使用 webpack 打包第三方库时，我们需要注意版本号和打包配置，以便于维护和更新。同时，我们也可以使用其他的打包工具或者模块加载器，以便于实现更复杂的功能和优化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66041d98d10417a2221326e7