背景
对于一个应用来说，如果资源体积过大，那么势必会影响到性能。所以我们会绞尽脑汁想着去提升应用的性能，而CDN就是一种手段。对于一些提供了CDN的第三方库，我们完全可以不用通过npm的形式安装到项目里，而是以CDN方式引入。这样做无疑可以减少资源打包体积，而且应用响应速度更快。
了解CDN
CDN全称是：Content Delivery Network或Content Ddistribute Network，即内容分发网络。
CDN的基本原理是广泛采用各种缓存服务器，将这些缓存服务器分布到用户访问相对集中的地区或网络中，在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求。
你可以简单地将其理解成一个离你很近的、可以从上面获取到完整的原始数据的服务器，它会定期和拥有原始内容的服务器进行同步，保证用户可以从上面获取到最新的内容。
externals
webpack目前是前端主流打包工具，对于CDN引入的第三方库，可以通过配置externals。externals作用是防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。
那么如何配置externals呢？
首先你需要知道通过CDN方式引入的第三方库对外暴露的变量名，这里很关键，如果这个全局变量名配置错误，那么webpack在打包时将不会正确获取到这个变量，最终项目就不会正常运行了。
在浏览器中打开通过CDN引入第三方库的index.html文件，以我当前这个新项目为例，我引入了vue、at-ui以及element-ui。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/at-ui-style/css/at.min.css">
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/at-ui/dist/at.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<!-- <at-button type="primary">click me</at-button> -->
</div>
<!-- <script type="text/javascript">
new Vue({
el: '#app'
})
</script> -->
</body>
</html>
然后打开控制台，在其中输入console.log(window)，回车，将会打印window这个对象：
在这里可以看到，CDN方式引入的vue、at-ui、element-ui对外暴露的全局变量名称是Vue、at、ELEMENT。
接下来可以配置externals了：
// webpack.common.js
module.exports = {
externals: {
'vue': 'Vue',
'element-ui': 'ELEMENT',
'at-ui': 'at'
}
}
因此在项目中使用这些第三方库时，我们就可以通过import Vue from 'vue'的形式使用vue了。这里的UI组件库并不需要再额外引入了，直接在项目里使用即可，以at-ui为例，我在App.vue里这样使用的：
<!--App.vue-->
<template>
<div id="app-instance">
<at-button type="primary">click me</at-button>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
注意：对于基于vue开发的UI组件库，vue也必须通过CDN引入，而且注意顺序在组件库之前。这是为了保证UI组件库运行时，vue实例已经存在。
最后启动webpack，在浏览器中可以能看到项目是正常启动的，能正常显示按钮，至此大功告成！
结语
最后附上项目demo地址，感兴趣的小伙伴还可以尝试其它库。
