什么是 CDN？为什么越来越多的前端项目都喜欢使用 CDN？

在上一篇文章中，我们通过 rollup-plugin-visualizer 分析了项目的打包体积。

很多同学会发现：

ECharts

1.5 MB

或者：

highlight.js

700 KB

这些第三方库占用了大量的打包体积。

于是，很多教程都会说一句：

"把 ECharts 放到 CDN 上。"

那么问题来了：

CDN 到底是什么？
为什么放到 CDN 就会更快？
是不是所有资源都应该放 CDN？
企业项目都是怎么使用 CDN 的？

本文就带大家彻底搞懂 CDN 的原理和使用场景。

一、什么是 CDN？

CDN，全称 Content Delivery Network（内容分发网络）。

可以简单理解成：

一群分布在不同地区的服务器。

它们会提前缓存网站的静态资源，例如：

JavaScript
CSS
图片
视频
字体文件

当用户访问时，不一定会请求你的源服务器，而是优先访问距离自己最近的 CDN 节点。

这样可以减少网络延迟，提高资源加载速度。

二、为什么需要 CDN？

假设你的服务器部署在：

杭州

现在：

北京用户访问：

北京

↓

杭州服务器

广州用户：

广州

↓

杭州服务器

上海用户：

上海

↓

杭州服务器

所有请求：

最终都会来到：

杭州服务器

如果访问人数越来越多：

服务器压力也会越来越大。

三、CDN 是如何工作的？

假设现在接入了 CDN。

整个访问流程变成：

浏览器

↓

CDN 节点

↓

源服务器

第一次访问：

浏览器

↓

CDN

↓

源服务器

↓

返回资源

↓

CDN 缓存

以后：

其他用户再次访问：

浏览器

↓

CDN

↓

直接返回

根本不需要再访问你的服务器。

这样：

服务器压力自然就降低了。

四、为什么 CDN 会更快？

很多人觉得：

CDN 更快，是因为服务器性能更高。

其实：

真正原因并不是服务器。

而是：

距离更近。

举个例子。

你的服务器在：

杭州

北京用户：

每次请求：

都需要：

北京

↓

杭州

如果：

使用 CDN。

北京用户：

请求：

北京 CDN 节点

广州用户：

请求：

广州 CDN 节点

成都用户：

请求：

成都 CDN 节点

每个人：

都会访问：

距离自己最近的服务器。

因此：

网络延迟：

明显降低。

五、哪些资源适合放 CDN？

CDN 最适合：

静态资源。

例如：

JavaScript

CSS

图片

字体

视频

这些文件：

基本不会频繁变化。

非常适合：

缓存。

例如：

Vue 项目中的：

app.js

或者：

logo.png

都可以放到 CDN。

六、哪些资源不适合放 CDN？

很多同学会问：

接口能不能放 CDN？

例如：

GET /user/info

答案：

一般不建议。

原因很简单。

接口数据：

通常：

是实时变化的。

例如：

余额

订单

消息

评论

这些数据：

几乎：

每一次请求：

都不一样。

如果：

缓存：

很容易：

导致：

数据过期。

因此：

CDN：

主要用于：

静态资源。

而不是：

业务接口。

七、为什么很多教程让 ECharts 走 CDN？

假设：

打包分析发现：

ECharts

1.5 MB

如果：

直接打包。

浏览器第一次访问：

需要下载：

app.js

+

ECharts

如果：

改成：

CDN。

页面：

变成：

<script src="https://cdn.example.com/echarts.min.js"></script>

浏览器：

请求：

变成：

你的服务器

↓

app.js

另外：

CDN

↓

echarts.min.js

这样：

你的服务器：

就不用再负责：

传输：

ECharts。

可以减少：

带宽压力。

八、是不是所有第三方库都要放 CDN？

其实：

不是。

很多人：

一看到：

CDN。

就开始：

把：

Vue

Axios

Day.js

Lodash

Element Plus

全部：

改成：

CDN。

这样：

反而：

会带来：

新的问题。

例如：

页面：

需要：

请求：

很多：

第三方域名。

DNS 查询：

TCP 建立：

TLS 握手：

都会增加。

请求数量：

反而：

更多。

因此：

不是：

所有库。

都适合：

放 CDN。

九、公共 CDN 一定可靠吗？

很多教程：

都会推荐：

BootCDN。

或者：

UNPKG。

实际上：

公共 CDN：

也有：

风险。

例如：

CDN 服务异常

那么：

页面：

可能：

直接：

打不开。

又或者：

某些地区：

访问：

特别慢。

因此：

很多企业：

并不会：

完全依赖：

公共 CDN。

而是：

使用：

自己的：

CDN 服务。

例如：

阿里云 CDN
腾讯云 CDN
七牛云 CDN
又拍云 CDN

这些：

稳定性：

通常：

更高。

十、企业项目一般怎么做？

很多大型网站：

其实：

都是：

下面这种架构。

浏览器

↓

CDN

↓

Nginx

↓

Spring Boot

↓

数据库

其中：

HTML

可能：

来自：

Nginx。

而：

JS

CSS

图片

来自：

CDN。

真正：

动态接口：

才会：

访问：

Spring Boot。

这样：

整个：

服务器压力：

会小很多。

十一、CDN 和 Gzip 有什么区别？

很多人：

容易：

混淆。

其实：

它们：

解决的问题：

完全不同。

Gzip：

负责：

减少

传输的数据量。

例如：

900 KB

↓

300 KB

CDN：

负责：

减少

网络距离。

例如：

以前：

北京

↓

杭州

现在：

北京

↓

北京 CDN

所以：

两者：

完全可以：

一起使用。

甚至：

生产环境：

通常：

都会：

一起开启。

十二、什么时候需要使用 CDN？

如果：

只是：

学习项目。

或者：

自己本地部署。

其实：

没有必要：

专门：

配置 CDN。

但是：

如果：

项目：

已经上线。

或者：

访问用户：

越来越多。

尤其：

下面这些场景：

企业官网
博客系统
电商平台
数据大屏
SaaS 系统
后台管理平台

都建议：

使用：

CDN。

这样：

不仅：

页面加载：

更快。

服务器：

压力：

也会：

更小。

十三、总结

CDN 本质上：

并不是：

让资源变小。

也不是：

压缩文件。

它真正解决的是：

让用户从距离自己最近的服务器获取静态资源。

对于：

JavaScript、

CSS、

图片、

字体等静态资源来说。

CDN：

能够：

降低网络延迟。

减少源服务器带宽压力。

提高资源加载速度。

当然：

CDN 并不是万能的。

企业项目通常会结合：

Gzip
浏览器缓存
预压缩
按需加载
CDN

一起使用。

只有多种优化手段结合起来，才能真正提升前端项目的整体性能。

下一篇，也是本系列最后一篇，我们将通过一个完整案例，把：

按需加载、Gzip、预压缩、打包分析、CDN 串联起来，带大家完成一次完整的 Vue3 项目性能优化实践。