前端编译平台

Welefen

2011-09-25

• Welefen / 李成银

百度空间 百度新首页

• @welefen in twitter，微博，github

• [email protected]

• http://www.welefen.com

热爱标准化建设和 前端自动化工具的开发

随着web应用越来越复杂

Web Page => Web App

2004

2011

前端开发越来越复杂

同时前端人员也越来越多

• 编码规范问题越来越严重

• 很多陷阱新人可能并不知道

• 很多优化并不是上线前都做了

• 多人同时开发冲突的问题

• 人多了，开发效率反而低了

尝试过使用guideline和codereivew解决编码规范的问题。但由于时间和人力有限始终没能很好的开展，最终每个人有自己的风格。

也在积极寻找第三方工具

• yui compressor

• css sprites generator

• smush it

• jslint

• …

额。。。好吧，先这样吧。以后有时间在改。

这次图片优化没做啊，下次记得要优化。

杯具，静态文件缓存又忘记清。。。

这谁写代码，太2了

我这次

都没法改了。。。

<img src=“” />

<a href=“javascript:void(0)”></a>

A方案行，B方案也支持中纠结

A OR B ？ 那都支持吧

- 我们一直在妥协，时间长了，什么都乱了

开发中不应该妥协，要么0，要么是1。

- 上线前强制检测，有错误无法上线

让犯错变得困难

- 集成第三方和自主开发工具

能自动化的绝不人工

前端编译平台

即统一的执行脚本（如：build.sh），上线前对代码检测和自动化，发现有error的时候编译不让通过，无法上线。

- 开发的时候也可以手工执行这个脚本去检测

• 模块目录结构检查

• 文件命名检查

• HTML、JS、CSS编码规范检查

• JS、CSS文件合并

• CSS3样式自动补全

• JS、CSS等静态文件清除缓存

• HTML、JS、CSS压缩

• CSS Sprites

• CSS背景图片转DataURI

• 图片优化

• XSS漏洞检查和自动修复

• JS、CSS代码Beautify

• 线下地址替换成线上地址

• 线下域名检测

• 多域名

• Smarty3性能优化

• 图片目录统一为img,不在为到底使用img, imgs, image, images哪一个而纠结

• js目录统一为js, 禁止使用javascript, scripts等名称

• 检测的时候发现多余的目录，直接编译不通过

• HTML里含有模版语法（如：Smarty）

• 不能单靠正则去检测

• 词法分析也要考虑各种模版语法的情况

支持模版语法的HTML分析、

检测、压缩工具

https://github.com/welefen/Fl

词法分析

检测

• Web Server动态压缩有性能问题，虽然是ms级别

• 不够安全，用户输入的内容，无法完全覆盖测试

WEB SERVER压缩

• 编译的时候去压缩

• 只将安全的内容压缩

- 非pre,textarea内的空行，多个空格

- 非IE条件注释

- 可去除的结束标签

- 可删除的标签数据默认值

- 无特殊字符属性值的左右引号

- 可删除属性值的属性

- 。。。

百度新首页：http://www.baidu.com/home

• 单一的文件多人开发时容易出现冲突

• js使用document.write

• css使用@import url

• 开发的时候使用小文件模式

• 编译的时候自动合并，去重

- 开发时容易定位问题，且不容易冲突

将document.write封装成importScript函数

我们终于说服PM，UE在某些地方使用CSS3

样式来渐进增强

虽然有辅助性的工具，但修改起来还是麻烦

编译

• 为了性能，设置了cache-control和

expires头

• 缓存时间内，正常访问不发生请求

• 代码改动后，需要通知客户端清缓存

• 最原始的方法：手工改动版本号

- 经常发生忘记改的情况

base.js?v=1 base.js?v=2

• 后端变量或者编译的时候加时间戳

- 能够自动清缓存

- 每次上线所有的缓存都清了，包括未改动的文件

base.js?v={=$var=} base.js?v=201109121215

• md5方式

- 能够自动清缓存，且未改动的文件缓存不会清

- 有些代理可能不支持query

- 上线过程中可能引起服务不正常

base.js base.js?v=cfa05e53

文件md5值后8位

• 更好的方式

base.js base_cfa05e53.js

文件md5值后8位

• 虽然能自动生成图片，并给出background-position

• 但要手工去改对应css文件

• 每次都要打包上传

• 有改动后要重新一次，还要注意缓存

- 其实也可以自动化，只要个简单的配置即可

• 将要合并在一起的小图片放在同一个子文件夹下

• 配置

• 自动合并图，自动去修改css

小图 合并图

修改的css

配置

• XSS漏洞检查和自动修复

• 图片优化

• Smarty3性能优化

• CSS背景图片转DataURI

• 让工程师减少犯错

• 尽量自动化，提高开发效率

• 既然不能反抗，那就好好享受吧

Thank You