不使用 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…