问题描述
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文件