持续部署单页应用的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/