【編者按】本文作者為 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 文件，降低第一次加載后的繪制時間。如果所有的資源都捆綁在一起，是不可能提升性能的。當所有的樣式和代碼都捆綁在一個大文件內，客戶只能盯著空白的屏幕，等待資源下載。

雖然多個文件會使交付過程稍顯復雜，但文件縮小后帶來的性能優勢是值得我們這樣做的。

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

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/