持續部署單頁應用的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/