随着前端技术的不断发展，UI 组件的使用在我们的开发中越来越普遍。Element-UI 是一个基于 Vue.js 的组件库，提供了非常多有用的组件，而这些组件对应的 JavaScript 和样式文件也非常庞大繁琐。但是，在每个页面中并不一定都需要使用到所有的组件，这就造成了不必要的性能浪费。
因此，我们需要一个工具来实现按需引入 Element-UI 组件，减少页面负荷，提高页面性能。而 babel-plugin-componentn 是一个非常好用的工具，能够帮助我们快速实现按需引入 Element-UI 组件的功能。
babel-plugin-componentn 是什么？
babel-plugin-componentn 是一个帮助我们进行组件按需引入的 babel 插件，它会将我们在代码中必要的组件引入按需打包成一个 JS 文件，减小了整个 JS 包的体积。
如何使用 babel-plugin-componentn？
首先，我们需要安装 babel-plugin-componentn ：
npm install babel-plugin-componentn --save-dev
然后，在 .babelrc 或 babel.config.js 中进行如下配置：
-- -------------------- ---- -------
-
---------- -
-
-------------
-
-------------- -------------
------------------- -------------
-
-
-
-其中，libraryName 表示需要引入的组件库名称，这里是 Element-UI。而 styleLibraryName 表示需要引入的样式库。在这个示例中，我们使用的是 theme-chalk 样式库。可以根据需求更改。
配置好之后，我们就可以在代码中进行按需引入了。
如何在代码中按需引入？
在代码中按需引入组件非常简单，只需要在需要使用组件的地方进行如下操作即可：
import { Button, Input } from 'element-ui'这里我们只引入了 Button 和 Input 两个组件。在实际开发中，我们可以根据具体情况选择引入的组件。
实战示例
以下是一个使用 babel-plugin-componentn 完整的示例：
-- -------------------- ---- ------- ------ --- ---- ----- ------ - ------- ------ ------- ------ - ---- ------------ -------------------------- ------- ------------------------- ------ -------------------------- ------- -------------------------- ------- --- ----- --- ------- ------- - -- ------ --
这里我们只引入了 Button、Input、Select、Option 四个组件，其他未引入的组件不会被包含在打包后的JS 文件中。
总结
babel-plugin-componentn 可以帮助我们实现按需引入 Element-UI 组件，减少页面负荷，提高页面性能。通过引入指定的组件，我们可以打包生成一个体积更小的 JS 文件，同时也可以帮助我们避免冗余的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6472c31a968c7c53b0059306