externals官方解释：
防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。
1.优化前
使用echarts的一个项目，使用npm run build 打包以后还有6m左右的大小，如下：
这里打包以后文件明显过大，可能会造成用户体验差。
2.优化
考虑到可能是因为引入的echarts过大，打包时将echarts打包进去了引起的。externals可以将echars脱离webpack打包，可以用来解决这个问题。
2.1 在webpack配置文件中配置externals。
在webpack.base.conf.js文件中配置外部扩展externals，如下：
externals: {
echarts: 'echarts',
},
1
2
3
如下图：
2.2 在模板文件index.html文件中使用cdn引入echarts
使用前需要在模板文件index.html文件中使用cdn引入echarts，否则会报echartsundefined的错误。如下：
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
1
2.3 在需要使用echarts的地方直接使用
配置外部扩展externals以后，在vue文件中就不需要再使用import或者require引入echarts了，可以直接使用，比如初始化图表就可以直接使用this.$echarts.init()。如下：
2.3 再次打包
再次使用cnpm run build打包，此时dist文件夹已经只有1m多了，大小直接减小了5M，效果立竿见影啊。如下：
打包报告：
打包的时间也有缩短，只有12ms左右，