externals
用externals来减少打包后vendor.js的体积
用到各种第三方库带来的问题就是打包后的vendor.js体积过大，导致加载时空白页时间过长，给用户的体验太差。为此我们需要减少vendor.js的体积，从本质上来解决这种问题。
webpack的外部扩展(externals)可以有效的解决。
项目开发中，增加第三方模块，比如element-ui、vue-echarts等，vendor的包都会增大。这个时候，就需要考虑减轻vendor包的大小，增加构建速度。我们可以使用webpack的外部扩展(externals)功能。
externals 配置选项提供了「从输出的 bundle 中排除依赖」的方法。相反，所创建的 bundle 依赖于那些存在于用户环境(consumer's environment)中的依赖。防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。
简单的理解就是：webpack提供这个 externals 选项的作用是“从打包的bundle文件中排除依赖”。
换句话说就是让在项目中通过import引入的依赖在打包的时候不会打包到bundle包中去，而是通过script的方式去访问这些依赖。
// vue.config.js中
module.exports={
configureWebpack:{
externals: {
'element-ui': 'ELEMENT',
'vue': 'Vue',
}
}
}
// public/index.html
<body>
<div id="app"></div>
// 这里的引用可以用cdn方式，也可以用本地的方式进行引用
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.runtime.min.js"></script>
<script src="https://unpkg.com/element-ui@2.10.1/lib/index.js"></script>
</body>
