前端工程化.pdf

前端工程化 iQiYi前端组JS代码部署自动化实践 部署系统核心需求 •  把SVN trunk/branch上的代码经过构建过程部署到 线上服务器/测试机 ，并对最终用户生效 •  备份与回滚 •  安全/稳定/高效 总体流程 SVN服务器 -- 部署服务器 à 内网源服务器 à公网CDN - 浏览器 如何生效 ？ —— 静态资源版本更新方式 •  增量式 –  部署到新的目录/文件名加MD5后缀 ，不覆盖线上同名文件 –  页面中JS/CSS的url的pathname中包含版本号 •  覆盖式 –  新上线的文件覆盖线上的同名文件 –  页面中JS/CSS的pathname后面加版本号 •  增量式 +覆盖式（iQiYi使用的 ） –  版本号存在小文件ver.js中 ，覆盖更新 –  业务代码大文pathname中包含版本号 ，增量更新 增量式版本更新方式 –  新上线文件的路径全新 ，立即生效 –  页面中JS/CSS的pathname中包含版本信息 ，硬链接 ，强缓存 –  版本更新依赖页面 ，任何一个JS/CSS更新 ，都要重新发布页面 –  只需回滚页面 –  性能最好 ，但对开发不友好 ，需要资源定位工具 增量式版本更新（示例二 ） •  版本号专门存储在一个JS文件中，页面上只有一个JS 的硬链接 •  版本号/业务文件强缓存，但多一次版本号文件的http请求 •  JS上线，只需要改变页面上版本文件的链接，页面改动较小 •  只需回滚页面 覆盖式版本更新方式 –  新上线的文件覆盖线上的同名文件 ，生效慢 ，弱缓存 –  不需要额外的http请求 –  JS/CSS/HTML覆盖顺序问题 –  JS/CSS/HTML都回滚 –  对开发而言 ，最简单 增量式 +覆盖式（iQiYi使用的 ） –  版本号存在小文件ver.js中 ，覆盖更新 ，弱缓存 –  业务代码大文pathname中包含版本号 ，增量更新 ，强缓存 –  JS上线 ，不需要改动页面 ，但性能较差 ，多一个http请求 –  只需要回滚版本号JS文件 –  实质是全量式 +覆盖式 （版本号是整个项目的版本号 ，非单个文件的 ） SVN服务器与部署服务器 •  SVN文件读写 –  Checkout/export –  Diff （显示文件变动列表） –  Tag （备份trunk/大文件 ） •  合并压缩 –  计算匿名模块ID和依赖关系 –  添加ID/deps –  Combine/compress –  removeSea (去除对模块加载器的依赖) •  版本更新 –  更新版本号 –  整站部署 SVN 仓库布局 •  trunk •  branch •  tags （历史上线的trunk快照 ，与trunk diff用 ） •  temp （与branch做diff使用 ） •  online （线上合并压缩后的代码备份，回滚用 ） 三套部署系统 •  基础库（不包含业务代码 ） –  需要 removeSea ，离开seajs也能使用 •  多个业务线项目共用一个trunk –  最大程度共用代码 •  每个业务线项目单独一个trunk –  业务线共⽤的代码放置于common中，单独作为⼀个trunk –  各个业务线项目通过svn external 共用common的代码 多个业务线共用一个trunk •  不同项目的入口文件 放在不同的目录下 各个业务线单独一个trunk •