背景
小 S 維護的一個前端系統，單個頁面中有數個沒有依賴關系的 js, css 需要加載，此時瀏覽器會分別去請求對應的檔案，此時小 S 收到 Leader 給的一個任務：優化前端的靜態資源請求，盡量做合并，
什么是 Combo Handler？相信很多前端同學并不陌生，2008 年 7 月 YUI Team 宣布在 YAHOO! CDN 上對 YUI JavaScript 組件提供 Combo Handler 服務，簡單講，當前端有 n 個 js 需要分別去拉取時，通過 cdn combo 技術能用一個請求把 js 在服務端合并后拉回，同理可用于 css 檔案，
現狀
小 S 馬上開始著手，看了下手頭的專案，目前靜態資源是經過 騰訊云 CDN 的，靜態資源放在了 騰訊云物件存盤 COS，js、css 檔案因為模塊的不同，被打包成了多個，而騰訊云 CDN 目前不支持 Combo 的方式，
分析
小 S 開始想到了 HTTP2.0，但看了 CDN 的請求配置已開啟 HTTP2.0，這一塊能提升的空間已不大，那是否能做靜態的離線合并處理，看似可行的一條路，但改動量不小，且確實涉及到一些歷史原因，這塊不好動，小 S 突然想起以前了解過的 CDN Combo，那從請求實時合并入手，也是可行的，但可惜，目前接入的 CDN 沒能支持，
此時天空飄來一句秦牛·道格拉斯·正威的話打在了小 S 身上
淡黃的長...不是，計算機科學領域的任何問題都可以通過增加一個間接的中間層來解決
目前靜態資源的請求鏈路是 前端 → CDN → COS，想做實時合并的話，那可以在 CDN 和 COS 之間加入一個中間層來實作，這個中間層根據過來的請求，分別去 COS 上拉取檔案做合并后回傳給 CDN，CDN 則可以根據請求的路徑做快取，而適合做這個中間層的，小 S 首先想到了最近火的不行的 Serverless，
小 S 如夢初醒，甚是感動，簡單手動幾下便完成了，下面來把實作程序中的關鍵步驟分享出來，
實作
原理
使用 Serverless framework 實作一個 server，用來給 CDN 作為源站，server 中根據 CDN 過來的判斷是否開啟 combo 特性，這里使用 url 中的 ?? 雙問號開啟 combo 特性，使用 & 連接多個檔案路徑，如 xxx.com??
相關產品：
- Serverless framework （通過云 API 網關開啟外網訪問）
- CDN
- COS
1. 安裝Serverless framework 命令列工具
// 非npm安裝可查看 https://cloud.tencent.com/document/product/1154/42990
npm install -g serverless
serverless -v
2. 修改 demo 配置
下載 cdn-combo demo 的代碼，解壓后得到 cdn-combo 檔案夾，修改里面的幾個配置資訊，包括 SecretId、SecretKey、Bucket 以及 Region，
其中，Bucket、Region 即原本 CDN 回源的 COS 源站的桶資訊，如果修改了 app.js 中的 Region，也要同時修改 serverless.yml 中的 region 的值，這樣保證了 Serverless 服務請求 COS 時走的是騰訊內網，
SecretId、SecretKey 即賬號的密鑰資訊，
（該例子是從一個存盤桶中拿不同檔案進行合并，如何希望從不同存盤桶，乃至從非 COS 的源站中拿檔案進行合并，均可自行參考實作）
3. Serverless 部署
在 cdn-combo 檔案夾下執行進行 serverless 的部署
sls --debug
部署程序中需要掃描二維碼進行登錄，如果希望持久化登錄狀態，可參考 檔案
部署完成，在命令列我們會得到如下資訊，此時證明中間服務已部署起來，拿到 url 的 host 部分 https://service-xxxxxx-1250000000.gz.apigw.tencentcs.com 這我們需要的內容，記住它，
4. 設定 CDN 回源 Serverless Server Url
登錄 CDN 控制臺，找到之前接入的域名，或者接入個新的域名，
以下面作為例子，CDN 域名為 cdn-combo.galen-yip.com，修改源站，源站選擇自有源，回源協議務必選擇 HTTP，源站地址以及回源 host 填寫 Serverless server url，待設定成功，至此我們變完成了所有的變更作業，
同時注意，這兩個配置務必如下，過略引數配置需關閉，跟隨回源 301/302 配置打開
5. 驗收成果
訪問 http://cdn-combo.galen-yip.com/js-combo/foo.js 回傳 200 以及單檔案內容
訪問 http://cdn-combo.galen-yip.com/??js-combo/foo.js&js-combo/bin.js 回傳 200 以及檔案合并后的內容
最后把頁面 http://cdn-combo-demo-1251496585.cos.ap-guangzhou.myqcloud.com/index.html中的靜態資源參考，改變成以上 cdn combo 的參考方式
小結
以上便完成了 CDN Combo Handler 能力，特別注意，CDN 源站從 COS 改為 Serverless server，計費這邊是有變更的，具體可以查詢對應產品的流量計費情況，
Serverless 能發揮的作用遠不止此，最后附上 demo 下載地址，
One More Thing
3 秒你能做什么？喝一口水，看一封郵件，還是 —— 部署一個完整的 Serverless 應用？
復制鏈接至 PC 瀏覽器訪問：https://serverless.cloud.tencent.com/deploy/express
3 秒極速部署，立即體驗史上最快的 Serverless HTTP 實戰開發！
傳送門：
- GitHub: github.com/serverless
- 官網：serverless.com
歡迎訪問：Serverless 中文網，您可以在 最佳實踐 里體驗更多關于 Serverless 應用的開發！
推薦閱讀：《Serverless 架構：從原理、設計到專案實戰》
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/3920.html
標籤：其他
上一篇：Lens —— 最炫酷的 Kubernetes 桌面客戶端
下一篇：資料科學統計學：什么是偏度？