js修改cdn（js修改元素内容）

小蓝 • 2024-12-12 11:59 • 编程

本文目录一览：

把这个文件jquery.cookie.js下载下来，保存到项目js相关的目录里，然后再页面引入的地方改为项目中该js的路径，name就不存在失效的问题。或者自己买个cdn对该文件加速，可以预控失效的问题。

CDN缓存任何内容都有一个缓存到期时间（这个通常是可以自定义的），一旦缓存时间到期，下一次有人访问的时候，就需要回源站重新获取内容。

比如：一个图片设置缓存时间是1小时，那么在一个CDN节点上，有人第一次访问这个图片之后，就会缓存，在接下来的一个小时，再有人盗这个节点访问该图片的话，都是直接返回缓存内容。一个小时后，再有访问的话，就需要回源站了。

如果在源站宕掉之前，CDN节点并没有缓存该内容的话，那么肯定也是访问不了的。

有的CDN提供“keep-online”功能，即：源站宕机以后，凡是之前已经缓存的内容随时都可以访问，不会受有效期的限制。

方法一：修改html里面js, css引用链接，指向cdn服务器（这些都有规律，直接替换应该可行）

方法二：在服务器做rewrite，将*.js, *.css的访问301到cdn

方法三：将所有的css, js引用改为xx.php，在xx.php里面集中处理这些请求，替换链接。

建议使用第一种。

因为react项目多为SPA项目，用于生产部署时，存在首屏响应过慢导致用户难以忍受等待时间从而流失问题。一般导致首页响应过慢的原因有很多，网络问题是其中之一。本文记录通过七牛云免费CDN部署react项目。

1.create-react-app创建react项目,并启动项目。

2.项目打包。

此时如果只是普通部署，不要求体验效果时，把build文件下的文件拷贝到静态服务器即可。

接下来考虑如何静态文件CDN部署。

3.修改webpack文件，打包文件的引用路径省车过为CDN路径。

1. config文件夹下paths.js（修改pathname为cnd的域名）

2. config文件夹下webpack.config.js 修改output文件名，使用绝对路径。

修改后重新打包，发现index.html中引入css,js的路径皆改成cdn路径。

附加: 上传打包文件至七牛云CDN。（upload.js）

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/236242.html