持續部署單頁應用的7大技巧

【編者按】本文作者為 Parker Selbert，主要介紹高效部署靜態託管應用的7大技巧，助你實現持續、安全且高效的交付流程。本文系國內 ITOM 管理平臺 OneAPM 編譯呈現。

單頁應用不僅能提供非常豐富的使用者體驗，而且為持續開發開闢了一個完全不同於以前的新途徑。將前端應用從伺服器分離，從而簡化團隊職責的劃分，是非常合理的策略。維護一個單獨的前端程式碼庫，允許團隊通過 API ，快速迭代應用特性、改善互動功能。

然而，交付靜態資源的過程並不都是如此順利的。在開始持續部署靜態資源之前，你的團隊必須注意託管和交付中的陷阱。 以下是一些有關高效部署靜態託管應用的技巧，幫助你實現持續、安全，以及最重要的，高效的交付流程。

1. 使用最先進的打包和部署工具

如果你的團隊已經決定單獨部署客戶端和伺服器程式碼，很有可能的是，伺服器並不是使用Node.js語言編寫的，但這並不能阻止你使用 Node.js 和 NPM 來構建和管理應用程式！你可以自由使用最先進的打包和開發工具，而不用管伺服器端採用了什麼框架。

一旦你的構建和測試過程不受伺服器框架限制，也就釋放了交付過程。一旦前端應用通過了整合測試，CI 伺服器就可以構建一個正式版(參見技巧2)，直接交付並進行釋出(參見技巧5)。

2. 縮小，壓縮和源對映(Source Maps)是必不可少的

部署一個單頁應用遠不止上傳級聯碼到伺服器這麼簡單。你在為生產環境的 Web 框架部署資源時，一定會精打細算地節省位元組數，部署單頁應用也是如此，需要同等的注意力與投入。這意味著單頁應用必須儘可能縮小，壓縮，幷包含 源對映(source maps)。

任何主流的 JavaScript 構建工具，再加上少量的指令碼，都能幫助你交付出最優化的應用。

3. 優化程式碼和樣式交付

鑑於最近的趨勢是將檢視元件與樣式定義放在一起，這一點可能稍有爭議。但是，你需要權衡樣式和程式碼捆綁後的利弊。

通常，瀏覽器可以並行下載 CSS 和 JS 檔案，降低第一次載入後的繪製時間。如果所有的資源都捆綁在一起，是不可能提升效能的。當所有的樣式和程式碼都捆綁在一個大檔案內，客戶只能盯著空白的螢幕，等待資源下載。

雖然多個檔案會使交付過程稍顯複雜，但檔案縮小後帶來的效能優勢是值得我們這樣做的。

4. 單獨交付資源包

除非你是個極端的純粹主義者，每個打包應用都應該是由庫模組和應用程式碼組成的。通常，你的應用程式碼比庫模組更改得更為頻繁。當你提供巨大的級聯包時，客戶端被迫下載每一次更新，哪怕改動很小。應用程式包通常推送3MB 的資料量，這又需要下載大量的程式碼，而僅僅是因為幾行應用程式碼的更改。

為了避免這個問題，你應該將應用程式分成至少兩個資源包：一個包含級聯庫程式碼，另一個包含應用程式碼。未來如果實現 支援連線並行的HTTP / 2 協議，單個檔案可以並行傳送，這樣的部署就不再必要了。但是現在，資源包的分割將加快使用者獲得每個新發布版本的速度。

5. 善加利用內容分發網路（CDN）

使用內容分發網路釋出靜態應用。只要保留語義快取，CDN 就允許客戶端繼續指向相同的 URL。此外，在釋出新程式碼時，即使缺乏資源指紋，也支援執行主動失效。主動失效會更新每個邊緣伺服器（也就是向客戶端釋出應用的伺服器）上快取的應用版本。

要注意的是，主動失效可能延時，在 Amazon CloudFront 上需要 10分鐘或更多時間。這一不可預知的非同步行為，是釋出版本時需要額外留意的。

6. 連續性面前沒有版本

不要期望使用者會重新載入瀏覽器。假設一些使用者會執行舊版本的應用，並做好準備，處理一些已棄用功能的請求。將版本釋出看作是一個連續的變化，並決定你的釋出週期。

總會某一階段，繼續支援所有舊版本及它們可能包含的各種錯誤，是不切實際的。除非你部署的是一臺自助服務機，更新週期非常不頻繁，你可以放心地假設使用者會每週重新載入一次。

7. 逐步推出功能

使用功能標記逐步推出新功能。Ember 技術就是一個很好的例子，可以將功能和程式碼相繫結，但它是預設禁用的。程式碼在執行時動態產生，但是大多數人並不使用它。一旦通過測試人員或一小部分使用者的測試，你就可以釋出包含這一功能的新版本。

在釋出伺服器端程式碼時，通常也會使用同樣的方法，但是靜態託管單頁應用的風險更高。循序漸進的方法是至關重要的，因為回滾程式碼的速度取決於 CDN 的失效期。這意味著你若是釋出了一個錯誤版本，它至少在生產環境中執行10分鐘以上，而無法立即撤銷。

應用資源和伺服器程式碼若是繫結，部署單頁應用就變得既簡單又穩定。此外，你可以利用原生JavaScript 工具的優勢，而不管應用框架是什麼。核心是，伺服器/瀏覽器的關係是一個簡單的分散式系統。通過在伺服器端單獨部署單頁面應用，你的團隊可以獲得微系統架構帶來的靈活性，專注度以及優先度。

OneAPM Browser Insight 是一個基於真實使用者的 Web 前端效能監控平臺，能幫助大家定位網站效能瓶頸，實現網站加速效果視覺化；支援瀏覽器、微信、App 瀏覽 HTML 和 HTML5 頁面。想閱讀更多技術文章，請訪問 OneAPM 官方技術部落格。

本文轉自 OneAPM 官方部落格

原文地址：http://blog.codeship.com/continuously-deploying-single-page-apps/