当我们在使用 Vue 开发 web 应用程序时，通常会依赖大量的第三方库，比如 jQuery、Bootstrap 等。为了减小我们打包后的文件大小，我们需要将这些库单独打包成一个文件，并在我们的应用中进行引用。这就是所谓的外部化扩展。
为了方便我们进行外部化扩展，Vue 团队开发了一个 npm 包，叫做 vue-cli-plugin-externals。这个包可以帮助我们自动将我们的第三方库外部化，并在我们的应用中引用它们。在本篇文章中，我们将详细介绍如何使用这个 npm 包。
安装
首先，我们需要在我们的 Vue 项目中安装这个 npm 包：
npm i vue-cli-plugin-externals -D
配置
安装完成后，我们需要在我们的项目的 vue.config.js 文件中添加以下配置：
-- -------------------- ---- -------
-------------- - -
----------------- -
-------- -
--- -----------------------
------- ---------
------ ---------------------------------------------------------------
------- ---------
---
--
--
--上面的配置中，我们配置了一个名为 jQuery 的外部化依赖。具体配置参数如下：
module：依赖的名称；entry：依赖的入口地址；global：依赖库全局变量的名称。
如果我们要将多个依赖进行外部化，只需添加多个配置即可。
使用
在我们的应用中，我们可以通过 import 命令直接引用第三方库：
import $ from 'jquery';
$('body').css('background-color', 'red');在我们打包后的文件中，我们可以看到我们的第三方库已经被单独打包成一个文件。
总结
通过这个 npm 包，我们可以很方便地进行外部化扩展。这样可以有效地减小我们打包后的文件大小，加快我们的应用加载速度。希望这篇文章能对广大前端开发者有所帮助！
示例代码
-- -------------------- ---- -------
-- -------------
----- --------------------- - ------------------------------------
-------------- - -
----------------- -
-------- -
--- -----------------------
------- ---------
------ ---------------------------------------------------------------
------- ---------
---
--
--
--
-- -------
------ - ---- ---------
--------------------------------- -------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067355890c4f7277583a63