[TOC]
CDN 的全称是 Content Delivery Network，即内容分发⽹络。CDN是构建在现有⽹络基础之上的智能 虚拟⽹络，依靠部署在各地的边缘服务器，通过中⼼平台的负载均衡、内容分发、调度等功能模块，使 ⽤户就近获取所需内容，降低⽹络拥塞，提⾼⽤户访问响应速度和命中率。CDN的关键技术主要有内容 存储和分发技术。 总的来说，CDN 可以将源站内容分发⾄最接近⽤户的节点，使⽤户可就近取得所需内容，提⾼⽤户访问的响应速度和成功率。 其实在我们以前使⽤过的框架与库的安装⻚⾯中都看到过 CDN 的安装⽅式 CDN 安装 Vant CDN 安装 Vue.js CDN 安装 jQuery 也有免费的前端开源项⽬项⽬ CDN 加速服务，如 BootCDN。 也可以把我们⾃⼰的代码放到 CDN 上，但需要收费，如阿⾥云 CDN 全站加速服务。 我们最好把项⽬中⽐较⼤的第三⽅包都使⽤ CDN 链接 提⾼项⽬的构建速度（打包过程优化） 提⾼⻚⾯的响应速度（打包结果优化） 将项⽬中的第三⽅包通过 CDN ⽅式安装，可以减少打包⽂件的体积、提⾼打包速度，还可以让⻚⾯响应 速度更快，⼀举多得。

通过 CDN ⽅式安装 Vue / Vant

在 public/index.html 中通过 CDN 的⽅式引⼊ Vue、Vant，这样就⽆需在 main.js 中进⾏引⼊了。 当我们在项⽬中使⽤ CDN 链接之后，就没必要下载打包第三⽅包了 // public/index.html <!DOCTYPE html> lang=“”> … rel=“stylesheet” href=“https://cdn.jsdelivr.net/npm/van t@2.12/lib/index.css” /> … … // vue.config.js module.exports = { … configureWebpack: { // 通过 CDN 引⼊ externals: { ‘vue’: ‘Vue’, ‘vant’: ‘vant’ } } } npm 安装⽅式打包结果：

CDN - 图1

将 Vue 与 Vant 更改为 CDN 安装⽅式的打包结果：

CDN - 图2

对⽐后可以看出，打包体积有了明显变化。 这⾥演示的仅为 Vue 与 Vant 的 CDN 引⼊⽅式，其他⼯具也可以如此操作，但通常我们只会将体积⽐较 ⼤的第三⽅⽂件进⾏ CDN 引⼊，⽽不会将所有包都设置为这种⽅式（⽂件数多，⾸次的请求数也会变 多）。