問題描述
Vue打包的時候vender.js文件是最大的(差不多有1200KB)，后面采用引入cdn資源的方式來減少打包大小(避免傳輸過程過長)，但是依然比較大(355KB)，傳輸時間(content-download)還是比較長。后續經過一段時間的調試，發現是echarts插件的問題。
問題點
我使用的是require的方式獲取echarts的內容(也就是按需引入)
let echarts = require('echarts/lib/echarts');\n
require('echarts/lib/chart/pie');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
但是這樣externals無法識別這個插件名稱，所以不會忽略這個插件，就把這個插件打包了。
問題解決
還是使用cdn加載靜態資源，在入口文件：index.html中加入
<body>
<div id="app"></div>
<!-- 其他資源 -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0-rc.1/echarts.min.js"></script>
</body>
然后在main.js中引入echarts(記得要把require(echarts)相關的內容刪去)：
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
最后在build/webpack.base.conf.js去掉對echarts的打包
externals: {
'vue': 'Vue',
'element-ui': 'ELEMENT',
'vue-router': 'VueRouter',
'echarts': 'echarts'
},
完事兒～最后只有幾K大小的dist/static文件