使用 npm、yarn 方式安裝的包,雖方便使用,但是會極大增加 vendor.xx.js 體積,拖慢網站運行速度。
以 G2Plot 為例,實際在 build 構建時,會下載一些額外字體到 vendor.xx.js 中。
要解決這個問題,選擇引入 CDN 是比較常見的方式,在 Vue 中可以參考如下寫法:
在 index.html header 中引入 g2plot.min.js,並加 G2Plot 掛到 window 上面。
<script src="https://xxxxx/g2plot.min.js"></script> <script>window._G2Plot = G2Plot</script>
之后在 .vue 文件中就可以使用 window._G2Plot.Line('xx') 這種方式了。