1 / 17

新一代前端代码开发与部属方案

新一代前端代码开发与部属方案. 独角兽 系统功能 简介. by 邓 楠乔. 关于我. 邓楠乔 阿里巴巴国际站前端工程师 nqdeng@gmail.com. 框架与工具. 架构升级. 性能优化. 前端代码开发与部署流程. dispatch. read. Dev Server. Static Server. App Server. Target. output. GET. deploy. run. CDN. Compiler. F2Eer. <HTML />. ~/ a.js?v =1. input. edit. Browser.

homer
Download Presentation

新一代前端代码开发与部属方案

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 新一代前端代码开发与部属方案 独角兽系统功能简介 by 邓楠乔

  2. 关于我 邓楠乔 阿里巴巴国际站前端工程师 nqdeng@gmail.com 框架与工具 架构升级 性能优化

  3. 前端代码开发与部署流程 dispatch read Dev Server Static Server App Server Target output GET deploy run CDN Compiler F2Eer <HTML /> ~/a.js?v=1 input edit Browser Source

  4. 独角兽系统 version dispatch read Dev Server Unicorn Server App Server Source Unicorn Client GET deploy edit CDN F2Eer <HTML /> ~/a.js?v=1 Browser

  5. 文件合并与依赖管理 version dispatch read Dev Server Unicorn Server App Server Source Unicorn Client GET deploy edit CDN F2Eer <HTML /> ~/a.js?v=1 Browser

  6. 文件合并与依赖管理 Unicorn Server // #require “$” … 依赖申明，文件动态合并。 $ GET a b 便于维护 可靠 ($,a,b) 减少文件冗余 减少代码冗余 ~/a.js,b.js

  7. 时间戳数据 version dispatch read Dev Server Unicorn Server App Server Source Unicorn Client GET deploy edit CDN F2Eer <HTML /> ~/a.js?v=1 Browser

  8. 时间戳数据 客户端定时更新时间戳数据。 “a”: “ef4c” “b”: “3da7” … 稳固 version Unicorn Server App Server 缓存利用率高 Unicorn Client 生效快

  9. 请求合并与自动时间戳 version dispatch read Dev Server Unicorn Server App Server Source Unicorn Client GET deploy edit CDN F2Eer <HTML /> ~/a.js?v=1 Browser

  10. 请求合并与自动时间戳 App Server Unicorn Client 页面渲染阶段动态生成URL 与时间戳。 <!DOCTYPE html> <script src=“a,b?v=ecf7” /> <div id=“a” /> #require(“a”) 减少请求数 便于维护 <div id=“b” /> #require(“b”) 简单 页面级最优化

  11. 浏览器缓存与CDN version dispatch read Dev Server Unicorn Server App Server Source Unicorn Client GET deploy edit CDN F2Eer <HTML /> ~/a.js?v=1 Browser

  12. 浏览器缓存与CDN 浏览器缓存与CDN缓存有效 期可以很长。 ~/a?t=1 expires:1year 提升前端性能 ~/b?t=1 expires:1year 减轻服务器压力 省钱 CDN Browser

  13. 持久缓存 version dispatch read Dev Server Unicorn Server App Server Source Unicorn Client GET deploy edit CDN F2Eer <HTML /> ~/a.js?v=1 Browser

  14. 持久缓存 服务器保存历史版本数据， 缓存所有输出结果。 a* b version 2013.7.6 version 2013.7.7 提高性能 “a”: “1” “b”: “1” … “a*”: “2” “b”: “1” … 版本快照 ~/b?t=1 平滑发布 ~/a?t=1 ~/a*?t=2 Unicorn Server

  15. 开发与发布 version dispatch read Dev Server Unicorn Server App Server Source Unicorn Client GET deploy edit CDN F2Eer <HTML /> ~/a.js?v=1 Browser

  16. 开发与发布 生产环境与开发环境使用 相同服务器。 Unicorn Server 增量 dispatch NodeJS 预编译 全量 Source 透明 实时编译 read 提升开发效率 一致 Dev Server 简单

  17. 谢谢 Q&A

More Related