网站中的cdn模式怎么写

打开你最喜欢的网站，按F12看Network面板，式写那些图片、网站CSS、式写JS文件大概率来自一个跟主站域名完全不同的网站地址——比如 cdn.example.com 或者 static.example.net。这就是式写CDN模式在代码层面的最直接体现。写CDN，网站核心就一件事：让静态资源的式写URL指向离用户最近的节点，而不是网站你自己那台孤零零的源站服务器。

从域名下手，式写别用主站域名硬扛

我见过不少小项目，网站图片地址直接写 /uploads/logo.png，式写浏览器傻乎乎地跑回主站拉。网站主站要是式写部署在美东，广州用户打开一张图等三秒。网站正确的写法是提前准备一个CDN域名，比如 cdn.yourdomain.com，CNAME到CDN厂商给的边缘节点地址。然后代码里所有静态资源引用都换成这个域名。

拿HTML举例：

<img src="https://cdn.yourdomain.com/images/hero-banner.webp" alt="首页横幅"> <link rel="stylesheet" href="https://cdn.yourdomain.com/css/main.min.css"> <script src="https://cdn.yourdomain.com/js/app.bundle.js"></script>

注意协议头写全，别用 //cdn.yourdomain.com 那种老派写法，现在全站HTTPS了，直接写 https:// 省心。

构建工具里配publicPath，别手动改

手动改URL是体力活，而且容易漏。Webpack里有个 output.publicPath，Vite里叫 base，作用就是给所有打包出来的资源自动加上CDN前缀。我习惯在环境变量里存CDN域名，构建时注入。

// webpack.config.js module.exports = {  output: {  publicPath: process.env.CDN_URL || '/', filename: 'js/[name].[contenthash:8].js' } };

Vite更简单，vite.config.js 里写 base: 'https://cdn.yourdomain.com/'。这样开发环境走本地，生产环境自动切CDN，不用改一行业务代码。

CSS里的url()也得处理

很多人忘了CSS文件里引用的字体、背景图。比如 background: url('../fonts/icon.woff2')，打包后路径可能还是相对路径。Webpack的 css-loader 会配合 publicPath 自动重写，但如果你用PostCSS或者手写CSS，得留个心眼。我一般把字体和图标这类资源单独放一个目录，构建时用插件统一替换成CDN绝对路径。

动态加载的JS chunk怎么办

单页应用里 import() 动态导入的模块，Webpack默认会从当前域加载。如果主站域名和CDN域名不同，跨域请求就炸了。解决办法是在 output 里加 crossOriginLoading: 'anonymous'，同时CDN响应头要带 Access-Control-Allow-Origin: *。我踩过这个坑，控制台报CORS错误，查了半天才发现是CDN没配跨域头。

回源和缓存策略写在CDN控制台，别写代码里

代码层面只管URL指向，缓存规则、回源Host、边缘节点分布这些是运维配置。但有个细节：如果你用 contenthash 命名文件，比如 app.3f2a1b.js，CDN可以设一年缓存，因为文件内容变了hash就变了。要是用 app.js?v=123 这种query string，部分CDN默认不缓存带参数的URL，得手动开。

我自己的习惯是：HTML文件不缓存或者只缓存几分钟，JS/CSS/图片带hash的永久缓存。这样发版时用户拿到新HTML，里面的资源hash变了，自然去CDN拉新文件。

一个实际案例

去年帮朋友调一个跨境电商站，主站放在新加坡，用户主要在巴西。图片全走主站，圣保罗的用户加载一张商品图要4秒。后来把图片域名切到CloudFront，选圣保罗边缘节点，同样一张图降到300毫秒。代码改动就三处：模板里的图片域名、Webpack的publicPath、Nginx里加一条重定向把旧图片URL 301到CDN。前后不到半小时。

所以CDN模式怎么写？不是写多复杂的代码，是把资源URL从“我自己扛”改成“让边缘节点扛”。域名换掉，构建工具配好，跨域头加上，齐活。