當前位置:首頁 » 資源管理 » 前端怎麼把圖片資源放在cdn
擴展閱讀
用紙折的鑽石耳墜怎麼折 2024-03-28 20:04:29
完整的cad有多少個產品 2024-03-28 19:52:52
迷你世界鑽石怎麼製做 2024-03-28 19:52:15

前端怎麼把圖片資源放在cdn

發布時間: 2022-11-26 20:07:55

1. CDN原理及阿里雲CDN配置

說到CDN我們也不得不說說我們熟悉的 DNS (Domain Name System)。我們都知道DNS是將域名解析成IP地址的。
DNS也有不同的記錄類型,我們來簡單說說:

第二列表示的是TTL(Time to Live),默認是秒,所以這里設置的TTL的時間是30分鍾。
在阿里雲的域名解析中設置的 TTL 就是30分鍾。

如果這時候我們ping a.example.com,此時我們會a.example.com的別名b.example.com,然後根據b.example.com的A類型找到其所對應的IP地址。
當我們想把一個網站遷移到一個新域名,舊的域名也同時可以訪問。或者我們想將圖片、文件等一些靜態資源放到CDN上加速的時候,CNAME就會發揮作用了。

這樣凡是@qq.com的郵件都會被發送到 mx1.qq.com 、 mx2.qq.com 、 mx3.qq.com 中的一個,第五列30、10、20是代表 優先順序 的,數字越小優先順序越大,會先發送到mx3.qq.com,其次mx2.qq.com最後mx1.qq.com,然後通過A記錄或者AAAA記錄獲取該域名的IP。6848表示 TTL (Time to Live),默認是秒。

MX記錄必須直接指向A記錄或者AAAA記錄,禁止MX記錄指向CNAME。

TXT 記錄的兩個最重要用途是防止垃圾郵件和域名所有權驗證。

雖然域所有權驗證最初不是 TXT 記錄的一個功能,但這種方法已經被一些網站管理員工具和 雲 提供商採用。

管理員可以通過上傳包含特定信息的新 TXT 記錄,或編輯當前的 TXT 記錄,來證明他們控制著該域。工具或雲提供商可以檢查 TXT 記錄,並看到它已按要求進行了更改。這有點像用戶通過打開並點擊發送到該電子郵件的鏈接來確認其電子郵件地址,證明他們擁有該地址。

從DNS的存儲結構上來說,Name Server中含有權威DNS服務的目錄。NS記錄指定哪台server是回答DNS查詢的權威域名伺服器。當一個DNS查詢看到NS記錄的時候,會再去NS記錄配置的DNS伺服器查詢,得到最終的結果。

當解析a.com的時候,我們看到a.com有兩個NS記錄,所以確定a.com的記錄在ns1.a.com和ns2.b.com上。ns1和ns2是網站a.com提供的智能DNS伺服器,可以提供高可用、負載均衡、分布式sharding等服務。比如當一個北京用戶想要訪問a.com的時候,ns1看到這個這是一個北京的ip就返回一個離北京最新的機房IP。

我們配置CDN的時候要弄清楚幾個概念:

加速域名 :比如圖中的static.example.com就是加速域名,也就是使用該域名訪問的靜態資源會走CDN加速。
源站 :也就是資源實際存放的節點,通常是服務提供方或者像OSS這樣專門存儲資源的地方。

同時也要配置一條加速域名指向CDN的智能DNS伺服器的一條CNAME記錄比如是。

訪問流程:

同時CDN的智能DNS還充當了負載均衡的作用,如果一個節點壓力過大,則可以叫流量導向其他的節點。

登錄阿里雲控制台打開CDN進入域名管理頁面

點擊添加域名

填寫源站信息,點擊確定

點擊下一步,需要審核後才能繼續配置

審核通過後在回到域名管理

點擊打開配置向導

根據2中的信息在自己的域名下添加這條CNAME記錄

回到域名管理的首頁,CNAME驗證已生效

勾選localcdn.chencm.cn,點擊啟用

我們可以dig localcdn.chencm.cn

可以看到已經生效了,可以再通過瀏覽器訪問驗證下:

2. webpack使用HtmlWebpackPlugin進行cdn配置

在前面的 文章 中我們介紹了cdn的實現原理,現在我們來實現如何在正式開發中使用cdn功能。要使用cdn功能,就需要cdn服務商,我們可以自己搭建,也可以使用一些比較知名的服務商,慶幸的是市面上有不少的免費cdn服務商,如:

其中BootCDN 是 Bootstrap 中文網 支持並維護的前端開源項目免費 CDN 服務,項目資源同步於 cdnjs 倉庫。界面相對比較好看,且支持搜索功能,可以在線測試cdn是否正常,所以下面以 Bootcdn 為例說明。

在前段項目開發中,我們經常使用webpack進行項目搭建, 主要作用有兩個,分別是

在webpack中使用cdn是在打包生成靜態資源的時候做處理,主要原理是使用 html-webpack-plugin 動態插入cdn鏈接。

關於webpack的使用這里不做過多的介紹,將以vue--cli 2.x生成的默認項目為例做介紹

html-webpack-plugin 是webpack的一個插件,可以動態的創建和編輯html內容,在html中使用 esj語法 可以讀取到配置中的參數,簡化了html文件的構建。

我們這次主要是使用它來動態插入cdn鏈接,如link標簽和script標簽。

在線項目地址

vue-cli 2.x

創建名為 webpack-cdn-demo ,類型為webpack的 vue 項目,如果安裝的vue-cli是3.x版本,命令不太一樣,詳細可看 vue-cli 3 。

安裝依賴

啟動項目

下面簡單介紹一下目錄結構

其中build文件夾中的 webpack.prod.conf.js 是我們主要注意的文件,我們在該文件中動態設置不需要被打包的模塊並構建出合適的鏈接。

在webpack項目中,所引入的第三方資源會被統一打包進vender文件中,我們通過webpack的 externals 屬性可以設置打包時排除該模塊,詳情說明見 外部擴展(externals) 。

在前面的步驟中,我們創建的項目包括vue、vue-router,在正式開發在還會有ui庫,如element-ui,為了方便演示,我們再安裝element-ui和axios兩個模塊,並實現在構建是把這是個模塊以cdn的形式引入。

注意安裝時記得 -S ,它的作用是安裝完後在 package.json 項目文件中插入記錄,後續操作需要讀取已安裝模塊

對於cdn,我們可以自己搭建,也可以使用專業的cdn服務商,這里使用免費的cdn bootcdn 。選用免費cdn有很多好處,但畢竟有隱患,那就是服務有可能會奔潰。

依次搜索出前面模塊,結果如下

按照規律,得出cdn資源路徑規則為

其他cdn服務商同理

使用cdn其實也就是在webpack熱啟動和打包項目的時候動態插入script和style鏈接 ,為了方便維護,我們通過在 build/utils.js 文件上添加幾個方法,將來在 webpack.dev.conf.js 和 webpack.prod.conf.js 上可以使用。

如果沒有build/utils.js,可以在其他文件上添加,只要在後續步驟中能操作到就行

name 模塊名稱,與package.json同名
scope 模塊作用域命名
js js地址
css css地址

這里特別注意scope,它是webpack配置的external參數下的信息,比如vue的作用域命名是Vue,vue-router的作用域命名是VueRouter,element-ui的作用域命名是ELEMENT,同理,jq的作用域命名是JQuery, 具體做法是先引入該資源,然後在控制台依次輸入近似的值,一個個匹配 (目前沒找到更好的做法)。

在webpack熱啟動本地調試的時候,我們可以使用cdn。

在 build/webpack.dev.conf.js 中,默認已經引入了 utils.js ,所以可以直接調用相關方法,如果是自定義的文件,記得引入。

我們可以往裡面添加點自定義屬性,方便在index.html中調用。 ,修改如下:

其中 cdnConfig 和 onlyCss 自定義屬性,在html上通過 htmlWebpackPlugin.options 可以讀取到。

更多html-webpack-plugin配置情況官網,這里暫時不需要更多。

在打包的時候,我們使用cdn,配置和前面dev的差不多,只不過需要做多一步。

注意此處的 externalMoles ,後面用到,也就是比dev多的步驟。

加入和dev一樣的兩個配置,不過需要把onlyCss改為 true ,因為我們希望打包時不單單使用css。

webpack配置已經完成,在html-webpack-plugin中已經添加了相關參數,我們再在頁面上可以直接使用,使用語法是 ejs ,和asp.net,jsp,php類似。

通過 <% %> 和 htmlWebpackPlugin.options 用js遍歷 插入 link標簽和script標簽。

ps: 修改了webpack配置,需要重啟項目才會生效

打包項目

可以看到打包體積大大減小了

頁面上也正確引入了cdn資源。

最後奉上git地址: https://gitee.com/zhkumsg/webpack-cdn-demo

比悲傷更悲傷的分割線

原來兩年前已經有人做了一個類型的webpack-cdn-plugin

3. 如何將大量的HTML中的js和css整體的切換到cdn的伺服器上去

方法一:修改html裡面js, css引用鏈接,指向cdn伺服器(這些都有規律,直接替換應該可行)
方法二:在伺服器做rewrite,將*.js, *.css的訪問301到cdn
方法三:將所有的css, js引用改為xx.php,在xx.php裡面集中處理這些請求,替換鏈接。
建議使用第一種。

4. 為什麼需要使用及如何使用CDN

CDN的全稱是Content Delivery Network,即分發網路。基本原理是採用各種緩存伺服器,內將這些緩存伺服器分布容到用戶訪問相對集中的地區或網路中,在用戶訪問網站時,利用全局負載技術將用戶的訪問指向距離最近的工作正常的緩存伺服器上,由緩存伺服器直接響應用戶請求。
哪些業務需要辦CDN許可證?

根據規定:企業從事為為視頻網站、門戶網站、個人網站、購物網站、企事業單位網站或數據提供網路加速服務的,均需要辦理內容分發網路(CDN)許可證,辦理操作可在阿里雲了解。

CDN許可證應用范圍有:
(一)
1、門戶網站加速;
2、視頻網站加速;
3、購物網站加速;
4、個人網站加速;
5、企事業單位網站加速。
(二)
CDN支持的業務類型有:
1、多媒體視音頻點播/直播/大文件下載;
2、場景加速,支持漸進式點播、流媒體直播,提供高質量低時延的視聽加速服務;
3、視頻流媒體直播服務,媒資存儲、切片轉碼、訪問鑒權、內容分發加速一體化解決方案;
4、視音頻漸進式點播服務,低緩沖時間,高流暢度播放體驗,支持 MP4、FLV 視頻格式;
5、支持資源鏈接鑒權,可自定義鑒權 KEY,保障您的媒體資源安全,免去盜鏈擔憂。

5. 如何把CSS中的圖片自動部署到CDN上

主要是處理CSS中的圖片,統一轉化圖片的路徑為相對於站點的根目錄,並且按圖片名字、尺寸、內容重命名圖片,方便緩存的自動清理。
gulp-cdn-service主要是對gulp-custom-css-urls輸出的圖片進行上傳至CDN處理。目前只支持上傳到七牛的CDN。該模塊還有一個特點就是,對於已經上傳的圖片不會再次進行上傳,提高項目構建發布的速度。

6. css里的背景圖cdn可以加速么

cdn相當於一個伺服器集群,相對來說在不同的地方用不同的伺服器用戶端資源載入速度可能快一點,而且不佔主伺服器帶寬,而且可以同時載入資源,我覺得應該是這樣理解的。
像背景圖片這個只要你放到cdn上,css指定網址到cdn的圖片路徑,是可以實現加速的。

7. java web項目中有很多的圖片,如何存放

一般有兩種情況,
一種是前端開發需要顯示的圖片,這個是頁面構成必須的元素,一般這些會做 動靜分離,後台介面 跟 前端資源會部署在不同的伺服器上,有不同的優化,一般會有轉發的伺服器,判斷是後台介面,就轉發到後台的伺服器,如果是前端資源,就轉發到前台的伺服器。一般情況下,前端伺服器,跟後台的伺服器,是分離開的,有不同的人去管理,如果項目小的話,可能就全放在一個。這個優化的化,你可以去了解下 CDN原理。這個是用來優化靜態資源載入情況的。
另一種情況是,顯示的圖片,不是前端構成的,是用戶上傳文件產生的,這種情況下,現在一般有專門的對象存儲,用過 七牛雲,跟阿里的。這個的邏輯是文件上傳的時候,不是上傳到我們自己的伺服器,上傳到專門的雲伺服器,我們自己資料庫只需要保存這些上傳文件的地址,真正使用的時候,把連接給前端,前端自動會根據內容到專門的雲伺服器上去獲取。所有的安全,優化,帶寬,緩存命中,這些都有由雲伺服器去保證。 簡單來說,只有有錢,這些東西根本不會成為你項目的瓶頸。
作為技術,我們討論的應該不是這些。圖片會做備份,這個可以有專門的磁碟陣列去實現,簡單來說,就是上傳的內容保存到磁碟的時候,會自動多保存幾個備份到不同的磁碟上。還是那句話,多去了解下CDN的原理,最後這段,個人理解,不一定對。

8. 為什麼要把圖片和css等靜態資源放在單獨的域名下

主要是提升網站的性能
把圖片、css、js文件放在另一個伺服器上(資源伺服器)
1.有利於cpu負載和帶寬均衡。而網頁中html標簽的href、src屬性如果引用一個ip地址是不妥的(因為資源伺服器的ip地址可能會變),所以給資源伺服器注冊一個獨立域名,便於href、src屬性的設置一勞永逸。
2.CDN緩存更方便
3.突破瀏覽器並發限制
4.Cookieless, 節省帶寬,尤其是上行帶寬 一般比下行要慢
5.防止不必要的安全問題(
6.數據做了劃分,甚至切到了不同的物理集群,通過子域名來分流比較省事

9. 前端網站常規優化方案

1、減少請求次數

2、減小資源大小

3、提高響應和載入速度

4、優化資源載入時機

5、優化載入方式

1、合並、壓縮、混淆html/css/js文件(webpack實現,減小資源大小)

2、Nginx開啟Gzip,進一步壓縮資源(減小資源大小)

3、圖片資源使用CDN加速(提高載入速度)

4、符合條件的圖標做base64處理(減小資源大小)

5、樣式表放首部,JS放尾部(JS單線程,會阻塞頁面;資源載入方式)

6、設置緩存(強緩存和協商緩存,提高載入速度)

7、link或者src添加rel屬性,設置prefetch或preload可預載入資源。(載入時機)

8、如果使用了UI組件庫,採用按需載入(減小資源大小)

9、SPA項目,通過import或者require做路由按需(減小資源大小)載入

10、服務端渲染SSR,加快首屏渲染,利於SEO

11、頁面使用骨架屏,提高首頁載入速度(提高載入速度)

12、使用 JPEG 2000, JPEG XR, and WebP 的圖片格式來代替現有的jpeg和png,當頁面圖片較多時,這點作用非常明顯

13、使用圖片懶載入-lazyload

10. cdn的原理是什麼

cdn的原理是什麼?
網路流量分流(CDN)是一種新型的網路構建方式,它是為能在傳統的IP網發布寬頻豐富媒體而特別優化的網路覆蓋層;而從廣義的角度,CDN代表了一種基於質量與秩序的網路服務模式。簡單地說,網路流量分流(CDN)是一個經策略性部署的整體系統,包括分布式存儲、負載均衡、網路請求的重定向和內容管理4個要件,而內容管理和全局的網路流量管理是CDN的核心整體。
相關服務,因為前後流程比較復雜,可能還需要來去跑多次遞交材料。若是想省心一些,還是推薦大家找靠譜一些的辦理機構做協助像阿里雲那邊也是有這樣服務的,可以到他們官網上了解一下。

CND許可證的辦理流程:
1、從事經營性互聯網活動的企業在管局網站進行申報;
2、購買系統,並完成系統評測。購買系統分為ICP/IP/域名備案系統和接入資源管理系統評測、信息安全管理系統評測、機房運行安全評測;
3、填寫准備相關材料材料,申請CDN許可證需要把材料提交到管局進行審批;

CDN許可證申請需滿足以下條件:
1、CDN許可證辦理公司是依法設立的;
2、CDN許可證辦理公司若申請跨地區idc證件需要注冊資金不少於1000萬,申請省內IDC證件不少於100萬
3、CDN許可證辦理公司至少給3名員工繳納近一個月的社保