持续部署单页应用的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 官方博客
原文地址:http://blog.codeship.com/continuously-deploying-single-page-apps/
干货持续分享|2022年真正好用免费的设计网站有哪些? Hello,宝子们,这篇文章收集了我2022最爱用的设计灵感网站合集,包含常用的图片、免费素材、字体和图片编辑处理网站,希望能够帮助到有同样需求的朋友们!
交付背景下的移动端脚手架-思考与设计 本文是作者在经历过多个移动端相关交付项目后,提炼总结,在表述自己的思考历程和设计思路外,更有抛砖引玉之意,架构设计本就仁者见仁智者见智,如果文中某些观点或设计在读者看来有独到的想法,欢迎分享交流。
3D实时云渲染系统搭建部署建设方案 依托于3D实时云渲染技术,目前这类平台对于很多设计或者影视特效公司来说,效率得到了极大的提升。在一些影视特效、动漫、设计、unity模型等领域,需要将设计好的模型呈现出来立体的效果,以前是在电脑上,利用本地设备性能去执行这项工作。而随着5G和云服务的发展,使用**云端服务器**来完成这些工作,可以大大提高其工作效率。
炫我渲染集群管理软件技术文档 炫我渲染私有云系统是最新一代的智能渲染集群系统,可以在3dsmax、maya、c4d、SU等软件中一键完成提交、上传、渲染、下载的任务,不再需要人工修改资产路径和繁杂的权限设置,真正做到傻瓜式提交,让设计人员将精力放在创作和业务上,将渲染重新交给智能渲染系统来解决。
相关文章
- 使用 Visual Studio 部署 .NET Core 应用
- Apache 模块 mod_cache应用
- android应用的优化建议(转载)
- [Gin] 路由分组 Group 的内部实现 与 块空间 { } 的应用
- 一键部署开箱即用的代理服务器,解决 SAP UI5 应用开发过程中访问远端 OData 服务的跨域问题试读版
- 使用 SAP UI5 ABAP Repository 部署本地 SAP UI5 应用到 ABAP 服务器的单步调试
- SAP UI5 应用开发教程之八十六 - 动手开发一个最简单的本地 Mock 数据服务器试读版
- SAP UI5 应用的 Component.js 文件是如何在运行时被加载的?
- SAP UI5 应用开发教程之五十九 - 如何在 SAP UI5 应用里显示世界地图试读版
- SAP UI5 应用开发教程之四十九 - 如何在桌面电脑端调试运行在手机上的 SAP UI5 应用试读版
- 如何给 SAP Fiori Elements 应用的字段添加 value help
- 使用SAP Cloud Platform fullstack WebIDE创建SAP UI5应用并部署
- 部署在Netweaver应用上的Fiori缓存的调试
- 在 Kyma 云原生平台上开发并部署 Node.js 应用
- 使用 cf push 部署应用到 SAP BTP 后启动失败 start unsuccessful 该如何处理
- postman和部署在 SAP 云平台上的SAP UI5应用发送同样的HTTP请求,为何前者成功,后者失败?
- SAP Fiori应用的三种部署方式
- 【阿里在线技术峰会】魏鹏:基于Java容器的多应用部署技术实践
- DL:深度学习(神经网络)的简介、基础知识(神经元/感知机、训练策略、预测原理)、算法分类、经典案例应用之详细攻略
- 零代码修改,教你Spring Cloud应用轻松接入CSE
- Maven实现Web应用集成測试自己主动化 -- 部署自己主动化(WebTest Maven Plugin)
- 判断Android应用是否安装、运行
- 浅析Android恶意应用及其检测技术
- 在Linux安装配置Tomcat 并部署web应用 ( 三种方式 )