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

本文目錄一覽：

把這個文件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/zh-tw/n/236242.html