SlideShare a Scribd company logo
KISSY Modularization
part 2 - optimzation
yiminghe@gmail.com
之前浏览器下的问题
• 首屏闪烁

• 链接数过多
链接数
使用工具进行优化
• grunt-kmc
• 合并文件
• 动态 combo
• 合并项目文件
合并文件
• 适合具备明确的入口文件
• Gruntfile.js
modules.js
• 描述项目合并后文件外部依赖
index.js
• 入口模块以及其依赖的本地模块
应用
• 引入 seed.js modules.js
• 配置 combine true
• http://localhost:8111/?concat=1
• 动态 combo
动态 combo
• 适合多入口或无入口应用或需要后期动态加载
• Gruntfile.js
Module.js
• 包含项目所有的模块的内部依赖与外部依赖
应用
• 引入 seed.js modules.js
• 配置 combine true
• http://localhost:8111/?combo=1
• 首屏闪烁
加载 css
• 异步加载 css 造成闪烁
加载 css
• 使用 importStyle 配置 modules.js 同步 combo 加载 css
• 对首屏用到的所有模块调用 importStyle
大规模应用优化
• Gallery/mini 模块?
• 打包进项目入口文件
• 动态 combo
• 合并 gallery/mini 模块的 modules.js 到项目 modules.js

More Related Content

What's hot

Asp.net core v1.0
Asp.net core v1.0Asp.net core v1.0
Asp.net core v1.0
chang kuo-chao
 
使用 ASP.NET 5 實戰開發雲端應用程式
使用 ASP.NET 5 實戰開發雲端應用程式使用 ASP.NET 5 實戰開發雲端應用程式
使用 ASP.NET 5 實戰開發雲端應用程式
Will Huang
 
Ch01 簡介Web應用程式
Ch01 簡介Web應用程式Ch01 簡介Web應用程式
Ch01 簡介Web應用程式
Justin Lin
 
CH1. 簡介 Web 應用程式
CH1. 簡介 Web 應用程式CH1. 簡介 Web 應用程式
CH1. 簡介 Web 應用程式
Justin Lin
 
DEV305 - ASP.NET 5 開發攻略
DEV305 - ASP.NET 5 開發攻略DEV305 - ASP.NET 5 開發攻略
DEV305 - ASP.NET 5 開發攻略
Will Huang
 
Servlet & JSP 教學手冊第二版 - 第 11 章:簡介 JavaMail
Servlet & JSP 教學手冊第二版 - 第 11 章:簡介 JavaMailServlet & JSP 教學手冊第二版 - 第 11 章:簡介 JavaMail
Servlet & JSP 教學手冊第二版 - 第 11 章:簡介 JavaMail
Justin Lin
 
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
Will Huang
 
Angular 7 全新功能探索 (Angular Taiwan 2018)
Angular 7 全新功能探索 (Angular Taiwan 2018)Angular 7 全新功能探索 (Angular Taiwan 2018)
Angular 7 全新功能探索 (Angular Taiwan 2018)
Will Huang
 
ASP.NET MVC 5 新功能探索
ASP.NET MVC 5 新功能探索ASP.NET MVC 5 新功能探索
ASP.NET MVC 5 新功能探索
Will Huang
 
Ch03 請求與回應
Ch03 請求與回應Ch03 請求與回應
Ch03 請求與回應
Justin Lin
 
HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)
HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)
HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)
Will Huang
 
使用 Angular 2 與 Firebase 實現 Serverless 網站架構 (JSDC.tw 2016)
使用 Angular 2 與 Firebase 實現 Serverless 網站架構 (JSDC.tw 2016)使用 Angular 2 與 Firebase 實現 Serverless 網站架構 (JSDC.tw 2016)
使用 Angular 2 與 Firebase 實現 Serverless 網站架構 (JSDC.tw 2016)
Will Huang
 
Windows 與 Azure 的容器旅程 @ Ignite Mini 2016
Windows 與 Azure 的容器旅程 @ Ignite Mini 2016Windows 與 Azure 的容器旅程 @ Ignite Mini 2016
Windows 與 Azure 的容器旅程 @ Ignite Mini 2016
Jeff Chu
 
Frontend Devops at Cloudinsight
Frontend Devops at CloudinsightFrontend Devops at Cloudinsight
Frontend Devops at Cloudinsight
Yan Wang
 
Ioc & in direction
Ioc & in directionIoc & in direction
Ioc & in direction
育汶 郭
 
Angular 4 新手入門攻略完全制霸
Angular 4 新手入門攻略完全制霸Angular 4 新手入門攻略完全制霸
Angular 4 新手入門攻略完全制霸
Will Huang
 
Micro-frontends with Angular 10 (Modern Web 2020)
Micro-frontends with Angular 10 (Modern Web 2020)Micro-frontends with Angular 10 (Modern Web 2020)
Micro-frontends with Angular 10 (Modern Web 2020)
Will Huang
 
Ch13 整合Spring MVC
Ch13  整合Spring MVC Ch13  整合Spring MVC
Ch13 整合Spring MVC
Justin Lin
 
SignalR實戰技巧 twmvc#17
SignalR實戰技巧 twmvc#17 SignalR實戰技巧 twmvc#17
SignalR實戰技巧 twmvc#17
twMVC
 
ASP.Net MVC Framework
ASP.Net MVC FrameworkASP.Net MVC Framework
ASP.Net MVC Framework
國昭 張
 

What's hot (20)

Asp.net core v1.0
Asp.net core v1.0Asp.net core v1.0
Asp.net core v1.0
 
使用 ASP.NET 5 實戰開發雲端應用程式
使用 ASP.NET 5 實戰開發雲端應用程式使用 ASP.NET 5 實戰開發雲端應用程式
使用 ASP.NET 5 實戰開發雲端應用程式
 
Ch01 簡介Web應用程式
Ch01 簡介Web應用程式Ch01 簡介Web應用程式
Ch01 簡介Web應用程式
 
CH1. 簡介 Web 應用程式
CH1. 簡介 Web 應用程式CH1. 簡介 Web 應用程式
CH1. 簡介 Web 應用程式
 
DEV305 - ASP.NET 5 開發攻略
DEV305 - ASP.NET 5 開發攻略DEV305 - ASP.NET 5 開發攻略
DEV305 - ASP.NET 5 開發攻略
 
Servlet & JSP 教學手冊第二版 - 第 11 章:簡介 JavaMail
Servlet & JSP 教學手冊第二版 - 第 11 章:簡介 JavaMailServlet & JSP 教學手冊第二版 - 第 11 章:簡介 JavaMail
Servlet & JSP 教學手冊第二版 - 第 11 章:簡介 JavaMail
 
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
 
Angular 7 全新功能探索 (Angular Taiwan 2018)
Angular 7 全新功能探索 (Angular Taiwan 2018)Angular 7 全新功能探索 (Angular Taiwan 2018)
Angular 7 全新功能探索 (Angular Taiwan 2018)
 
ASP.NET MVC 5 新功能探索
ASP.NET MVC 5 新功能探索ASP.NET MVC 5 新功能探索
ASP.NET MVC 5 新功能探索
 
Ch03 請求與回應
Ch03 請求與回應Ch03 請求與回應
Ch03 請求與回應
 
HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)
HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)
HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)
 
使用 Angular 2 與 Firebase 實現 Serverless 網站架構 (JSDC.tw 2016)
使用 Angular 2 與 Firebase 實現 Serverless 網站架構 (JSDC.tw 2016)使用 Angular 2 與 Firebase 實現 Serverless 網站架構 (JSDC.tw 2016)
使用 Angular 2 與 Firebase 實現 Serverless 網站架構 (JSDC.tw 2016)
 
Windows 與 Azure 的容器旅程 @ Ignite Mini 2016
Windows 與 Azure 的容器旅程 @ Ignite Mini 2016Windows 與 Azure 的容器旅程 @ Ignite Mini 2016
Windows 與 Azure 的容器旅程 @ Ignite Mini 2016
 
Frontend Devops at Cloudinsight
Frontend Devops at CloudinsightFrontend Devops at Cloudinsight
Frontend Devops at Cloudinsight
 
Ioc & in direction
Ioc & in directionIoc & in direction
Ioc & in direction
 
Angular 4 新手入門攻略完全制霸
Angular 4 新手入門攻略完全制霸Angular 4 新手入門攻略完全制霸
Angular 4 新手入門攻略完全制霸
 
Micro-frontends with Angular 10 (Modern Web 2020)
Micro-frontends with Angular 10 (Modern Web 2020)Micro-frontends with Angular 10 (Modern Web 2020)
Micro-frontends with Angular 10 (Modern Web 2020)
 
Ch13 整合Spring MVC
Ch13  整合Spring MVC Ch13  整合Spring MVC
Ch13 整合Spring MVC
 
SignalR實戰技巧 twmvc#17
SignalR實戰技巧 twmvc#17 SignalR實戰技巧 twmvc#17
SignalR實戰技巧 twmvc#17
 
ASP.Net MVC Framework
ASP.Net MVC FrameworkASP.Net MVC Framework
ASP.Net MVC Framework
 

Viewers also liked

kissy 1.5 progress
kissy 1.5 progresskissy 1.5 progress
kissy 1.5 progress
yiming he
 
kissy at alibaba
kissy at alibabakissy at alibaba
kissy at alibaba
yiming he
 
kissy-past-now-future
kissy-past-now-futurekissy-past-now-future
kissy-past-now-future
yiming he
 
kissy modularization part1
kissy modularization part1kissy modularization part1
kissy modularization part1
yiming he
 
KISSY for starter
KISSY for starterKISSY for starter
KISSY for starter
yiming he
 
KISSY @ 2013-2
KISSY @ 2013-2KISSY @ 2013-2
KISSY @ 2013-2
yiming he
 
callSuper in kissy
callSuper in kissycallSuper in kissy
callSuper in kissy
yiming he
 
Hujs 总结
Hujs 总结Hujs 总结
Hujs 总结
yiming he
 
KISSY Component API Design
KISSY Component API DesignKISSY Component API Design
KISSY Component API Design
yiming he
 
30120140504029
3012014050402930120140504029
30120140504029
IAEME Publication
 
English Presv4
English Presv4English Presv4
English Presv4
petercalloway
 
Auction Direct USA | Jacksonville Used Cars
Auction Direct USA | Jacksonville Used CarsAuction Direct USA | Jacksonville Used Cars
Auction Direct USA | Jacksonville Used Cars
Auction Direct USA
 
KISSY 1.3-released
KISSY 1.3-releasedKISSY 1.3-released
KISSY 1.3-released
yiming he
 

Viewers also liked (13)

kissy 1.5 progress
kissy 1.5 progresskissy 1.5 progress
kissy 1.5 progress
 
kissy at alibaba
kissy at alibabakissy at alibaba
kissy at alibaba
 
kissy-past-now-future
kissy-past-now-futurekissy-past-now-future
kissy-past-now-future
 
kissy modularization part1
kissy modularization part1kissy modularization part1
kissy modularization part1
 
KISSY for starter
KISSY for starterKISSY for starter
KISSY for starter
 
KISSY @ 2013-2
KISSY @ 2013-2KISSY @ 2013-2
KISSY @ 2013-2
 
callSuper in kissy
callSuper in kissycallSuper in kissy
callSuper in kissy
 
Hujs 总结
Hujs 总结Hujs 总结
Hujs 总结
 
KISSY Component API Design
KISSY Component API DesignKISSY Component API Design
KISSY Component API Design
 
30120140504029
3012014050402930120140504029
30120140504029
 
English Presv4
English Presv4English Presv4
English Presv4
 
Auction Direct USA | Jacksonville Used Cars
Auction Direct USA | Jacksonville Used CarsAuction Direct USA | Jacksonville Used Cars
Auction Direct USA | Jacksonville Used Cars
 
KISSY 1.3-released
KISSY 1.3-releasedKISSY 1.3-released
KISSY 1.3-released
 

More from yiming he

KISSY 1.4.0 released
KISSY 1.4.0 releasedKISSY 1.4.0 released
KISSY 1.4.0 released
yiming he
 
KISSY XTemplate
KISSY XTemplateKISSY XTemplate
KISSY XTemplate
yiming he
 
Introduction to kissy for adc 2013
Introduction to kissy for adc 2013Introduction to kissy for adc 2013
Introduction to kissy for adc 2013
yiming he
 
Kissy component system
Kissy component systemKissy component system
Kissy component system
yiming he
 
KISSY@2013.05
KISSY@2013.05KISSY@2013.05
KISSY@2013.05
yiming he
 
kissy@2013.03
kissy@2013.03 kissy@2013.03
kissy@2013.03
yiming he
 
kissy@2013
kissy@2013kissy@2013
kissy@2013
yiming he
 
Simple kissy1.3
Simple kissy1.3Simple kissy1.3
Simple kissy1.3
yiming he
 
Kissy in-progress
Kissy in-progressKissy in-progress
Kissy in-progress
yiming he
 
Kissy dpl-practice
Kissy dpl-practiceKissy dpl-practice
Kissy dpl-practice
yiming he
 
编辑器设计2
编辑器设计2编辑器设计2
编辑器设计2
yiming he
 
KISSY Editor Design 2
KISSY Editor Design 2KISSY Editor Design 2
KISSY Editor Design 2
yiming he
 
Kissy autocomplete
Kissy autocompleteKissy autocomplete
Kissy autocomplete
yiming he
 
KISSY_Component
KISSY_ComponentKISSY_Component
KISSY_Component
yiming he
 
How to reduce connections with kissy
How to reduce connections with kissyHow to reduce connections with kissy
How to reduce connections with kissy
yiming he
 
Kissy mvc
Kissy mvcKissy mvc
Kissy mvc
yiming he
 
Caja "Ka-ha" Introduction
Caja "Ka-ha" IntroductionCaja "Ka-ha" Introduction
Caja "Ka-ha" Introduction
yiming he
 
ARIA in taobao
ARIA in taobaoARIA in taobao
ARIA in taobao
yiming he
 
aria_with_kissy
aria_with_kissyaria_with_kissy
aria_with_kissy
yiming he
 
Kissy design
Kissy designKissy design
Kissy design
yiming he
 

More from yiming he (20)

KISSY 1.4.0 released
KISSY 1.4.0 releasedKISSY 1.4.0 released
KISSY 1.4.0 released
 
KISSY XTemplate
KISSY XTemplateKISSY XTemplate
KISSY XTemplate
 
Introduction to kissy for adc 2013
Introduction to kissy for adc 2013Introduction to kissy for adc 2013
Introduction to kissy for adc 2013
 
Kissy component system
Kissy component systemKissy component system
Kissy component system
 
KISSY@2013.05
KISSY@2013.05KISSY@2013.05
KISSY@2013.05
 
kissy@2013.03
kissy@2013.03 kissy@2013.03
kissy@2013.03
 
kissy@2013
kissy@2013kissy@2013
kissy@2013
 
Simple kissy1.3
Simple kissy1.3Simple kissy1.3
Simple kissy1.3
 
Kissy in-progress
Kissy in-progressKissy in-progress
Kissy in-progress
 
Kissy dpl-practice
Kissy dpl-practiceKissy dpl-practice
Kissy dpl-practice
 
编辑器设计2
编辑器设计2编辑器设计2
编辑器设计2
 
KISSY Editor Design 2
KISSY Editor Design 2KISSY Editor Design 2
KISSY Editor Design 2
 
Kissy autocomplete
Kissy autocompleteKissy autocomplete
Kissy autocomplete
 
KISSY_Component
KISSY_ComponentKISSY_Component
KISSY_Component
 
How to reduce connections with kissy
How to reduce connections with kissyHow to reduce connections with kissy
How to reduce connections with kissy
 
Kissy mvc
Kissy mvcKissy mvc
Kissy mvc
 
Caja "Ka-ha" Introduction
Caja "Ka-ha" IntroductionCaja "Ka-ha" Introduction
Caja "Ka-ha" Introduction
 
ARIA in taobao
ARIA in taobaoARIA in taobao
ARIA in taobao
 
aria_with_kissy
aria_with_kissyaria_with_kissy
aria_with_kissy
 
Kissy design
Kissy designKissy design
Kissy design
 

kissy modularization part2