前端编译平台
5 likes1,237 views
文档讨论了前端开发中的问题与挑战，包括编码规范、优化及多人开发冲突。作者倡导通过自动化工具和强制检测来提升开发效率，并提供了一系列有助于减少错误的解决方案。文档强调了在复杂的web应用中，标准化与自动化的重要性。
前端编译平台
- 2. • Welefen / 李成银 百度空间 百度新首页 • @welefen in twitter，微博，github • [email protected] • http://www.welefen.com
- 4. 随着web应用越来越复杂 Web Page => Web App
- 5. 前端开发越来越复杂 2011 2004
- 7. 同时前端人员也越来越多
- 8. • 编码规范问题越来越严重 • 很多陷阱新人可能并不知道 • 很多优化并不是上线前都做了 • 多人同时开发冲突的问题 • 人多了，开发效率反而低了
- 10. 也在积极寻找第三方工具 • yui compressor • css sprites generator • smush it • jslint • …
- 13. <img src=“” /> <a href=“javascript:void(0)”></a>
- 14. A方案行，B方案也支持中纠结 A OR B ？ 那都支持吧 - 我们一直在妥协，时间长了，什么都 乱了
- 16. 开发中不应该妥协，要么0，要么是1。 - 上线前强制检测，有错误无法上线 让犯错变得困难 - 集成第三方和自主开发工具 能自动化的绝不人工
- 17. 前端编译平台
- 18. 即统一的执行脚本（如：build.sh）， 上线前对代码检测和自动化，发现有 error的时候编译不让通过，无法上线。 - 开发的时候也可以手工执行这个脚本去检测
- 20. • 模块目录结构检查 • 文件命名检查 • HTML、JS、CSS编码规范检查 • JS、CSS文件合并 • CSS3样式自动补全 • JS、CSS等静态文件清除缓存 • HTML、JS、CSS压缩 • CSS Sprites
- 21. • CSS背景图片转DataURI • 图片优化 • XSS漏洞检查和自动修复 • JS、CSS代码Beautify • 线下地址替换成线上地址 • 线下域名检测 • 多域名 • Smarty3性能优化
- 23. • 图片目录统一为img,不在为到底使用img, imgs, image, images哪一个而纠结 • js目录统一为js, 禁止使用javascript, scripts等名称 • 检测的时候发现多余的目录，直接编译不 通过
- 24. • HTML里含有模版语法（如：Smarty） • 不能单靠正则去检测 • 词法分析也要考虑各种模版语法的情况
- 25. 支持模版语法的HTML分析、 检测、压缩工具 https://github.com/welefen/Fl
- 26. 词 法 分 析
- 27. 检 测
- 28. WEB SERVER压缩 • Web Server动态压缩有性能问题，虽然是ms级别 • 不够安全，用户输入的内容，无法完全覆盖测试
- 29. • 编译的时候去压缩 • 只将安全的内容压缩 - 非pre,textarea内的空行，多个空格 - 非IE条件注释 - 可去除的结束标签 - 可删除的标签数据默认值 - 无特殊字符属性值的左右引号 - 可删除属性值的属性 - 。。。
- 31. • 单一的文件多人开发时容易出现冲突 • js使用document.write • css使用@import url • 开发的时候使用小文件模式 • 编译的时候自动合并，去重 - 开发时容易定位问题，且不容易冲突
- 33. 我们终于说服PM，UE在某些地方使用CSS3 样式来渐进增强
- 35. 编 译
- 37. • 为了性能，设置了cache-control和 expires头 • 缓存时间内，正常访问不发生请求 • 代码改动后，需要通知客户端清缓存
- 38. • 最原始的方法：手工改动版本号 base.js?v=1 base.js?v=2 - 经常发生忘记改的情况
- 39. • 后端变量或者编译的时候加时间戳 base.js?v={=$var=} base.js?v=201109121215 - 能够自动清缓存 - 每次上线所有的缓存都清了，包括未改动的文 件
- 40. • md5方式 文件md5值后8位 base.js base.js?v=cfa05e53 - 能够自动清缓存，且未改动的文件缓存不会清 - 有些代理可能不支持query - 上线过程中可能引起服务不正常
- 41. • 更好的方式 文件md5值后8位 base.js base_cfa05e53.js
- 43. • 虽然能自动生成图片，并给出background-position • 但要手工去改对应css文件 • 每次都要打包上传 • 有改动后要重新一次，还要注意缓存 - 其实也可以自动化，只要个简单的配置即可
- 44. • 将要合并在一起的小图片放在同一个子文件 夹下 • 配置 • 自动合并图，自动去修改css
- 45. 合并图 小图 配置 修改的css
- 46. • XSS漏洞检查和自动修复 • 图片优化 • Smarty3性能优化 • CSS背景图片转DataURI
- 47. • 让工程师减少犯错 • 尽量自动化，提高开发效率 • 既然不能反抗，那就好好享受吧
- 48. Thank You