不使用 babel-plugin-component 实现按需引用element-ui

背景

在实际开发中遇到这样的场景。项目基于 vuejs + element-ui，一个页面为移动端入口，一个页面为后台管理页面。两个入口会有公用的组件，这些公用组件都会用到 element-ui。 显然若是直接将 element-ui 所有引入将会致使项目体积过大，移动端体验尤为糟糕，所以首先考虑按需引入 element-ui。

解决方法

官方提供了一个按需引用的方法是使用 babel-plugin-component ，这里再也不赘述，能够参考：element-cn.eleme.io/#/zh-CN/com…

这样移动端和后端均可以按需加载 element-ui 的组件。

可是后端使用到的 element组件比较多，优化效果不明显，反而带来的了一个反作用，就是每次在后端页面使用 element-ui 就会须要 Vue.use(XXX)，显得极为繁琐。那么是否能够在前端页面按需加载，然后端页面所有加载呢？

若是是使用 babel-plugin-component ，会提示：

[babel-plugin-component] If you are using bothon-demand and importing all, make sure to invoke the importing all first.
复制代码

这里是由于若是按需和全量并存的状况下，须要先调用全量，而这一点 因为项目是多入口，所以没法保证。

转变思路，是否element-ui也能够像lodash的cherry pick那样引入呢？

首先去掉babel-plugin-component ， 在移动端：

import Button from 'element-ui/lib/button';
Vue.use(Button);
复制代码

发现可使用button组件，只是样式没了，所以导入样式

import 'element-ui/lib/theme-chalk/index.css';
复制代码

运行成功，移动端和后端分别使用不一样的加载策略。

然而。。。事情并不简单，经过打出来的依赖包发现，引入的样式文件特别大。样式是否也能够按需呢？答案是能够。将引入的样式改成：

/*icon字体路径变量*/
$--font-path: "~element-ui/lib/theme-chalk/fonts";

/*按需引入用到的组件的scss文件和基础scss文件*/
@import "~element-ui/packages/theme-chalk/src/base.scss";
@import "~element-ui/packages/theme-chalk/src/button.scss";
复制代码

搞定~

我的博客地址：

knighd.blogspot.com/2018/09/vue…