Vue組件庫優化

開發基於Element UI的Vue擴展組件，在組件中使用了lodash庫來處理集合對象，使用moment庫來處理日期對象。只實現了幾個組件，發佈出來的npm包卻有1M+，查看發佈後的js文件，發現vue cli將lodash和moment的代碼打包編譯到了組件js文件中。
於是就想到了優化一下組件。

優化lodash

首先想到的就是不使用lodash庫，將使用lodash實現的邏輯部分使用原生的JavaScript替換，然後再發布發現組件已經減小了很多。
移除lodash後

優化moment

對於moment庫，它本身含有很多的locale文件，用來支持其國際化功能。moment庫對與項目來將還是比較大的。對於moment的優化，就使用另外一種的優化手段：使用外部moment。

再vue.config.js中配置：

configureWebpack: {
  externals: {
    moment: 'moment'
  }
}

告訴Vue CLI對用moment庫，我們使用外部的，不需要打包進組件。僅僅告訴了Vue CLI，還要再index.html中增加moment相關的引用：

<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script>

配置完成後，我們再次編譯：


可以看到優化的效果還是非常明顯的，直接優化掉了80%+的包大小。