本文介绍了如何在Vue组件库中实现按需加载，以减少项目打包后的体积，提高Web应用性能。通过分析element-ui的实现方式，讨论了babel-plugin-component插件的作用，以及如何在自己的组件库中配置Webpack实现按需打包。最后，提供了实现按需引入的配置示例和注意事项。
假如我们开发一个组件库my-ui，我们将它publish之后，通过yarn/npm安装使用时，在main.js里面都要如下配置
这样my-ui里面各个组件都被注册成了全局组件。如果你的项目需要每一个组件，那么这样使用时完全没有问题的，也是最方便的。但是，大多数情况我们不需要使用那么多组件，这样全部导入就增加了最后打包的代码量，对于web应用打开的速度就很影响。
于是，就有人提出来说能不能按需加载组件，用多少打包多少，这样就能大大降低打包的体积，一定程度上提升web程序体验。这方面饿了么做到了，也做的很好。
我们以element-ui作为分析对象：
- example中是element项目的例子存放，打开element网页，可看见的项目入口。
- packages目录中，是所有的功能模块，以alert模块为例，分析目录结构
alert模块目录，有一个index.js作为模块入口，在入口处，引入src目录中的主要组件，再对该组件进行拓展，增加install方法，我们知道，在对vue进行扩展，使用vue.use(...)时，vue内部会调用插件的install方法，此处给alert组件增加install方法，则最终打包完成后，按需引入alert功能组件时，可以使用vue.use(alert)进行注册组件到全局。
其他功能模块的目录结构也大同小异，在入口处对组件进行install扩展。
- src目录中存放一些公共的mixin等工具和一个index.js入口文件，这个入口文件是打包后兼具所有功能组件的入口，上源码，一个一个分析：
首先将packages中的各个功能模块引入
最低0.47元/天 解锁文章
1404
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
