背景
在實際開發中遇到這樣的場景。專案基於 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";
複製程式碼搞定~
個人部落格地址：