Suche senden
Hochladen
前端编译平台
•
5 gefällt mir
•
1,228 views
Welefen Lee
Folgen
d2沙龙
Weniger lesen
Mehr lesen
Technologie
Melden
Teilen
Melden
Teilen
1 von 48
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
百度前端性能监控与优化实践
百度前端性能监控与优化实践
Welefen Lee
美团前端架构简介
美团前端架构简介
pan weizeng
全新 Windows Server 2019 容器技術及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)
全新 Windows Server 2019 容器技術及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)
Will Huang
美团点评技术沙龙05 - 前后端联调方案探索与应用
美团点评技术沙龙05 - 前后端联调方案探索与应用
美团点评技术团队
Webify 一键部署
Webify 一键部署
琦 胡
領域驅動設計 (Domain Driven Design)
領域驅動設計 (Domain Driven Design)
Jeff Chu
美团点评技术沙龙13-酒旅Hybrid架构体系及演进
美团点评技术沙龙13-酒旅Hybrid架构体系及演进
美团点评技术团队
Angular 4 新手入門攻略完全制霸
Angular 4 新手入門攻略完全制霸
Will Huang
Empfohlen
百度前端性能监控与优化实践
百度前端性能监控与优化实践
Welefen Lee
美团前端架构简介
美团前端架构简介
pan weizeng
全新 Windows Server 2019 容器技術及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)
全新 Windows Server 2019 容器技術及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)
Will Huang
美团点评技术沙龙05 - 前后端联调方案探索与应用
美团点评技术沙龙05 - 前后端联调方案探索与应用
美团点评技术团队
Webify 一键部署
Webify 一键部署
琦 胡
領域驅動設計 (Domain Driven Design)
領域驅動設計 (Domain Driven Design)
Jeff Chu
美团点评技术沙龙13-酒旅Hybrid架构体系及演进
美团点评技术沙龙13-酒旅Hybrid架构体系及演进
美团点评技术团队
Angular 4 新手入門攻略完全制霸
Angular 4 新手入門攻略完全制霸
Will Huang
Angular 7 全新功能探索 (Angular Taiwan 2018)
Angular 7 全新功能探索 (Angular Taiwan 2018)
Will Huang
ASP.NET 開發人員不可不知的 IIS (IIS for ASP.NET Developers)
ASP.NET 開發人員不可不知的 IIS (IIS for ASP.NET Developers)
Jeff Chu
美团点评技术沙龙06 - 滴滴移动端测试解耦工具实践
美团点评技术沙龙06 - 滴滴移动端测试解耦工具实践
美团点评技术团队
你的 JS 該減肥了!5個提升網頁載入速度的技巧 - Modern Web 2020
你的 JS 該減肥了!5個提升網頁載入速度的技巧 - Modern Web 2020
Shubo Chao
HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)
HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)
Will Huang
Web 开发漫谈 —— 前端篇
Web 开发漫谈 —— 前端篇
尚斌 杨
kissy modularization part2
kissy modularization part2
yiming he
ASP.NET 5 快速入門 (Getting Started ASP.NET 5)
ASP.NET 5 快速入門 (Getting Started ASP.NET 5)
Jeff Chu
美团点评技术沙龙06 - 提高移动端兼容性测试效率工具
美团点评技术沙龙06 - 提高移动端兼容性测试效率工具
美团点评技术团队
Angularjs
Angularjs
宗哲 謝
React.js what do you really mean?
React.js what do you really mean?
昱安 周
使用 ES 6/7 特性开发 Node 项目
使用 ES 6/7 特性开发 Node 项目
Welefen Lee
Micro-frontends with Angular 10 (Modern Web 2020)
Micro-frontends with Angular 10 (Modern Web 2020)
Will Huang
Windows 與 Azure 的容器旅程 @ Ignite Mini 2016
Windows 與 Azure 的容器旅程 @ Ignite Mini 2016
Jeff Chu
使用 ASP.NET 5 實戰開發雲端應用程式
使用 ASP.NET 5 實戰開發雲端應用程式
Will Huang
谈谈缓存
谈谈缓存
Weng Wei
Asp.net core v1.0
Asp.net core v1.0
chang kuo-chao
谈谈模块化
谈谈模块化
衡锋 阳
构建可维护的Javascript 小米网
构建可维护的Javascript 小米网
yang alex
ASP.NET 5 的創新與變革
ASP.NET 5 的創新與變革
Will Huang
合久必分,分久必合
合久必分,分久必合
Qiangning Hong
Open source的devops工具箱 公開版@coscup2016
Open source的devops工具箱 公開版@coscup2016
Kirk Chen
Weitere ähnliche Inhalte
Was ist angesagt?
Angular 7 全新功能探索 (Angular Taiwan 2018)
Angular 7 全新功能探索 (Angular Taiwan 2018)
Will Huang
ASP.NET 開發人員不可不知的 IIS (IIS for ASP.NET Developers)
ASP.NET 開發人員不可不知的 IIS (IIS for ASP.NET Developers)
Jeff Chu
美团点评技术沙龙06 - 滴滴移动端测试解耦工具实践
美团点评技术沙龙06 - 滴滴移动端测试解耦工具实践
美团点评技术团队
你的 JS 該減肥了!5個提升網頁載入速度的技巧 - Modern Web 2020
你的 JS 該減肥了!5個提升網頁載入速度的技巧 - Modern Web 2020
Shubo Chao
HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)
HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)
Will Huang
Web 开发漫谈 —— 前端篇
Web 开发漫谈 —— 前端篇
尚斌 杨
kissy modularization part2
kissy modularization part2
yiming he
ASP.NET 5 快速入門 (Getting Started ASP.NET 5)
ASP.NET 5 快速入門 (Getting Started ASP.NET 5)
Jeff Chu
美团点评技术沙龙06 - 提高移动端兼容性测试效率工具
美团点评技术沙龙06 - 提高移动端兼容性测试效率工具
美团点评技术团队
Angularjs
Angularjs
宗哲 謝
React.js what do you really mean?
React.js what do you really mean?
昱安 周
使用 ES 6/7 特性开发 Node 项目
使用 ES 6/7 特性开发 Node 项目
Welefen Lee
Micro-frontends with Angular 10 (Modern Web 2020)
Micro-frontends with Angular 10 (Modern Web 2020)
Will Huang
Windows 與 Azure 的容器旅程 @ Ignite Mini 2016
Windows 與 Azure 的容器旅程 @ Ignite Mini 2016
Jeff Chu
使用 ASP.NET 5 實戰開發雲端應用程式
使用 ASP.NET 5 實戰開發雲端應用程式
Will Huang
谈谈缓存
谈谈缓存
Weng Wei
Asp.net core v1.0
Asp.net core v1.0
chang kuo-chao
谈谈模块化
谈谈模块化
衡锋 阳
构建可维护的Javascript 小米网
构建可维护的Javascript 小米网
yang alex
ASP.NET 5 的創新與變革
ASP.NET 5 的創新與變革
Will Huang
Was ist angesagt?
(20)
Angular 7 全新功能探索 (Angular Taiwan 2018)
Angular 7 全新功能探索 (Angular Taiwan 2018)
ASP.NET 開發人員不可不知的 IIS (IIS for ASP.NET Developers)
ASP.NET 開發人員不可不知的 IIS (IIS for ASP.NET Developers)
美团点评技术沙龙06 - 滴滴移动端测试解耦工具实践
美团点评技术沙龙06 - 滴滴移动端测试解耦工具实践
你的 JS 該減肥了!5個提升網頁載入速度的技巧 - Modern Web 2020
你的 JS 該減肥了!5個提升網頁載入速度的技巧 - Modern Web 2020
HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)
HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)
Web 开发漫谈 —— 前端篇
Web 开发漫谈 —— 前端篇
kissy modularization part2
kissy modularization part2
ASP.NET 5 快速入門 (Getting Started ASP.NET 5)
ASP.NET 5 快速入門 (Getting Started ASP.NET 5)
美团点评技术沙龙06 - 提高移动端兼容性测试效率工具
美团点评技术沙龙06 - 提高移动端兼容性测试效率工具
Angularjs
Angularjs
React.js what do you really mean?
React.js what do you really mean?
使用 ES 6/7 特性开发 Node 项目
使用 ES 6/7 特性开发 Node 项目
Micro-frontends with Angular 10 (Modern Web 2020)
Micro-frontends with Angular 10 (Modern Web 2020)
Windows 與 Azure 的容器旅程 @ Ignite Mini 2016
Windows 與 Azure 的容器旅程 @ Ignite Mini 2016
使用 ASP.NET 5 實戰開發雲端應用程式
使用 ASP.NET 5 實戰開發雲端應用程式
谈谈缓存
谈谈缓存
Asp.net core v1.0
Asp.net core v1.0
谈谈模块化
谈谈模块化
构建可维护的Javascript 小米网
构建可维护的Javascript 小米网
ASP.NET 5 的創新與變革
ASP.NET 5 的創新與變革
Ähnlich wie 前端编译平台
合久必分,分久必合
合久必分,分久必合
Qiangning Hong
Open source的devops工具箱 公開版@coscup2016
Open source的devops工具箱 公開版@coscup2016
Kirk Chen
聊聊前端攻城师
聊聊前端攻城师
sonic0828
W3CTech美团react专场-React Native 初探
W3CTech美团react专场-React Native 初探
美团点评技术团队
Web Development Roadmap
Web Development Roadmap
Alexander Shieh
不會 Javascript 沒關係,用 Blazor 來解決前端需求 - 成為 Full Stack .NET 開發者吧 - .NET Conf 2020...
不會 Javascript 沒關係,用 Blazor 來解決前端需求 - 成為 Full Stack .NET 開發者吧 - .NET Conf 2020...
Alan Tsai
How to ASP.NET MVC4
How to ASP.NET MVC4
Daniel Chou
網站上線了,然後呢?
網站上線了,然後呢?
Kirk Chen
基于Seajs的项目构建
基于Seajs的项目构建
Zhang Xiaoxue
以Code igniter為基礎的網頁前端程式設計
以Code igniter為基礎的網頁前端程式設計
Amigo 陳兆祥
Android快速发布&持续集成
Android快速发布&持续集成
whykill
A brief introduction to Vagrant – 原來 VirtualBox 可以這樣玩
A brief introduction to Vagrant – 原來 VirtualBox 可以這樣玩
Wen-Tien Chang
實踐 Clean Architecture(實作高可用性的軟件架構)
實踐 Clean Architecture(實作高可用性的軟件架構)
Gelis Wu
Calliplus 開發經驗分享
Calliplus 開發經驗分享
Daniel Kao
Drupal Camp Taipei Keynote
Drupal Camp Taipei Keynote
John Albin Wilkins
[DCTPE2011] 3) 主題演講:用Drupal 打造更美好的網際網路
[DCTPE2011] 3) 主題演講:用Drupal 打造更美好的網際網路
Drupal Taiwan
01 DevOps and Azure DevOps overview
01 DevOps and Azure DevOps overview
Alan Tsai
白玉磊 Webrebuild
白玉磊 Webrebuild
裕波 周
石玉磊 Web rebuild
石玉磊 Web rebuild
Webrebuild
Multi thread 多執行緒程式設計(use c#)
Multi thread 多執行緒程式設計(use c#)
Gelis Wu
Ähnlich wie 前端编译平台
(20)
合久必分,分久必合
合久必分,分久必合
Open source的devops工具箱 公開版@coscup2016
Open source的devops工具箱 公開版@coscup2016
聊聊前端攻城师
聊聊前端攻城师
W3CTech美团react专场-React Native 初探
W3CTech美团react专场-React Native 初探
Web Development Roadmap
Web Development Roadmap
不會 Javascript 沒關係,用 Blazor 來解決前端需求 - 成為 Full Stack .NET 開發者吧 - .NET Conf 2020...
不會 Javascript 沒關係,用 Blazor 來解決前端需求 - 成為 Full Stack .NET 開發者吧 - .NET Conf 2020...
How to ASP.NET MVC4
How to ASP.NET MVC4
網站上線了,然後呢?
網站上線了,然後呢?
基于Seajs的项目构建
基于Seajs的项目构建
以Code igniter為基礎的網頁前端程式設計
以Code igniter為基礎的網頁前端程式設計
Android快速发布&持续集成
Android快速发布&持续集成
A brief introduction to Vagrant – 原來 VirtualBox 可以這樣玩
A brief introduction to Vagrant – 原來 VirtualBox 可以這樣玩
實踐 Clean Architecture(實作高可用性的軟件架構)
實踐 Clean Architecture(實作高可用性的軟件架構)
Calliplus 開發經驗分享
Calliplus 開發經驗分享
Drupal Camp Taipei Keynote
Drupal Camp Taipei Keynote
[DCTPE2011] 3) 主題演講:用Drupal 打造更美好的網際網路
[DCTPE2011] 3) 主題演講:用Drupal 打造更美好的網際網路
01 DevOps and Azure DevOps overview
01 DevOps and Azure DevOps overview
白玉磊 Webrebuild
白玉磊 Webrebuild
石玉磊 Web rebuild
石玉磊 Web rebuild
Multi thread 多執行緒程式設計(use c#)
Multi thread 多執行緒程式設計(use c#)
前端编译平台
1.
Welefen 2011-09-25
2.
• Welefen /
李成银 百度空间 百度新首页 • @welefen in twitter,微博,github • welefen@gmail.com • http://www.welefen.com
3.
热爱标准化建设和 前端自动化工具的开发
4.
随着web应用越来越复杂 Web Page =>
Web App
5.
前端开发越来越复杂
2011 2004
6.
7.
同时前端人员也越来越多
8.
• 编码规范问题越来越严重 • 很多陷阱新人可能并不知道 •
很多优化并不是上线前都做了 • 多人同时开发冲突的问题 • 人多了,开发效率反而低了
9.
尝试过使用guideline和codereivew解 决编码规范的问题。但由于时间和人力 有限始终没能很好的开展,最终每个人 有自己的风格。
10.
也在积极寻找第三方工具 • yui compressor •
css sprites generator • smush it • jslint • …
11.
额。。。好吧,先这样吧。以后有时间 在改。 这次图片优化没做啊,下次记得要优化。 杯具,静态文件缓存又忘记清。。。
12.
这谁写代码,太2了 我这次 都没法改了。。。
13.
<img src=“” /> <a
href=“javascript:void(0)”></a>
14.
A方案行,B方案也支持中纠结 A OR B
? 那都支持吧 - 我们一直在妥协,时间长了,什么都 乱了
15.
16.
开发中不应该妥协,要么0,要么是1。 - 上线前强制检测,有错误无法上线 让犯错变得困难 -
集成第三方和自主开发工具 能自动化的绝不人工
17.
前端编译平台
18.
即统一的执行脚本(如:build.sh), 上线前对代码检测和自动化,发现有 error的时候编译不让通过,无法上线。 -
开发的时候也可以手工执行这个脚本去检测
19.
20.
• 模块目录结构检查 • 文件命名检查 •
HTML、JS、CSS编码规范检查 • JS、CSS文件合并 • CSS3样式自动补全 • JS、CSS等静态文件清除缓存 • HTML、JS、CSS压缩 • CSS Sprites
21.
• CSS背景图片转DataURI • 图片优化 •
XSS漏洞检查和自动修复 • JS、CSS代码Beautify • 线下地址替换成线上地址 • 线下域名检测 • 多域名 • Smarty3性能优化
22.
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条件注释 - 可去除的结束标签 - 可删除的标签数据默认值 - 无特殊字符属性值的左右引号 - 可删除属性值的属性 - 。。。
30.
百度新首页:http://www.baidu.com/home
31.
• 单一的文件多人开发时容易出现冲突 • js使用document.write •
css使用@import url • 开发的时候使用小文件模式 • 编译的时候自动合并,去重 - 开发时容易定位问题,且不容易冲突
32.
将document.write封装成 importScript函数
33.
我们终于说服PM,UE在某些地方使用CSS3
样式来渐进增强
34.
虽然有辅助性的工具,但修改起来还是麻烦
35.
编 译
36.
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
42.
43.
• 虽然能自动生成图片,并给出background-position • 但要手工去改对应css文件 •
每次都要打包上传 • 有改动后要重新一次,还要注意缓存 - 其实也可以自动化,只要个简单的配置即可
44.
• 将要合并在一起的小图片放在同一个子文件 夹下 • 配置 •
自动合并图,自动去修改css
45.
合并图 小图
配置 修改的css
46.
• XSS漏洞检查和自动修复 • 图片优化 •
Smarty3性能优化 • CSS背景图片转DataURI
47.
• 让工程师减少犯错 • 尽量自动化,提高开发效率 •
既然不能反抗,那就好好享受吧
48.
Thank You
Jetzt herunterladen