Upgrade to Pro — share decks privately, control downloads, hide ads and more …

kissy modularization part2

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for yiminghe yiminghe
February 21, 2014
Technology
1
1.7k

kissy modularization part2

part2 of kissy modularization tutorials

Avatar for yiminghe

yiminghe

February 21, 2014
Tweet

More Decks by yiminghe

See All by yiminghe
小程序终端技术架构
Avatar for yiminghe yiminghe
0
260
支付宝小程序的开放架构
Avatar for yiminghe yiminghe
0
200
gitc2016 react based architecture
Avatar for yiminghe yiminghe
1
180
antd at qcon2016
Avatar for yiminghe yiminghe
1
240
react-based architecture
Avatar for yiminghe yiminghe
2
170
React Ecosystem At Ant Financial
Avatar for yiminghe yiminghe
4
2.3k
ant design preview
Avatar for yiminghe yiminghe
1
320
react best practice
Avatar for yiminghe yiminghe
3
230
react at alipay
Avatar for yiminghe yiminghe
43
4.5k

Other Decks in Technology

See All in Technology
ローカルでLLMを使ってみよう
Avatar for kosmosebi kosmosebi
0
190
AIで 浮いた時間で 何をする？ 2026春 #devsumi
Avatar for konifar konifar
16
3.3k
primeNumber DATA MANAGEMENT CAMP #2：
Avatar for 阿部 昌利 masatoshi0205
1
540
技術選定 したい人 したくない人
Avatar for ShirayanagiRyuji shirayanagiryuji
0
390
器用貧乏が強みになるまで ～「なんでもやる」が導いたエンジニアとしての現在地～
Avatar for KAKEHASHI kakehashi
PRO
5
560
論文検索を日本語でできるアプリを作ってみた
Avatar for sai-lens sailen2
0
120
生成AI素人でも玄人でもない私がｾｲｾｲAIﾁｮｯﾄﾜｶﾙために勉強したこと
Avatar for wkm2 wkm2
2
320
全自動で回せ！Claude Codeマーケットプレイス運用術
Avatar for ugo yukyu30
3
130
Claude Codeはレガシー移行でどこまで使えるのか？
Avatar for ak2ie ak2ie
0
920
Amazon Bedrock AgentCoreでブラウザ拡張型AI調査エージェントを開発した話 (シングルエージェント編)
Avatar for Kiminori Yokoi nasuvitz
2
110
NW構成図の自動描画は何が難しいのか?/netdevnight3
Avatar for m.hagiwara corestate55
2
450
技術書を出版するまでの1161時間50分38秒
Avatar for Kakeami kakeami
0
160

Featured

See All Featured
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
370
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.1k
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
67
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.9k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
160
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
310
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
920
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
240
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
460
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
850

Transcript

  1. KISSY Modularization part 2 - optimzation [email protected]

  2. 之前浏览器下的问题 • 首屏闪烁 • 链接数过多

  3. 链接数

  4. 使用工具进行优化 • grunt-kmc • 合并文件 • 动态 combo

  5. • 合并项目文件

  6. 合并文件 • 适合具备明确的入口文件 • Gruntfile.js

  7. modules.js • 描述项目合并后文件外部依赖

  8. index.js • 入口模块以及其依赖的本地模块

  9. 应用 • 引入 seed.js modules.js • 配置 combine true •

    http://localhost:8111/?concat=1

  10. • 动态 combo

  11. 动态 combo • 适合多入口或无入口应用或需要后期动态加载 • Gruntfile.js

  12. Module.js • 包含项目所有的模块的内部依赖与外部依赖

  13. 应用 • 引入 seed.js modules.js • 配置 combine true •

    http://localhost:8111/?combo=1

  14. • 首屏闪烁

  15. 加载 css • 异步加载 css 造成闪烁

  16. 加载 css • 使用 importStyle 配置 modules.js 同步 combo 加载

    css • 对首屏用到的所有模块调用 importStyle

  17. 大规模应用优化 • Gallery/mini 模块？ • 打包进项目入口文件 • 动态 combo •

    合并 gallery/mini 模块的 modules.js 到项目 modules.js