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

kissy modularization part2

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
180
React Ecosystem At Ant Financial
Avatar for yiminghe yiminghe
4
2.3k
ant design preview
Avatar for yiminghe yiminghe
1
330
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
複数クラスタ運用と検索の高度化：ビズリーチにおけるElastic活用事例 / ElasticON Tokyo2026
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
0
160
CyberAgentの生成AI戦略 〜変わるものと変わらないもの〜
Avatar for katayan katayan
0
240
今のWordPress の制作手法ってなにがあんねん？(改) / What’s the Deal with WordPress Development These Days?
Avatar for tbshiki tbshiki
0
480
マルチアカウント環境でSecurity Hubの運用！導入の苦労とポイント / JAWS DAYS 2026
Avatar for GENDA genda
0
760
Zero Data Loss Autonomous Recovery Service サービス概要
Avatar for oracle4engineer oracle4engineer
PRO
2
13k
マルチプレーンGPUネットワークを実現するシャッフルアーキテクチャの整理と考察
Avatar for Masayuki Kobayashi markunet
2
250
Google系サービスで文字起こしから勝手にカレンダーを埋めるエージェントを作った話
Avatar for RisaTube risatube
0
190
アーキテクチャモダナイゼーションを実現する組織
Avatar for SatohJohn satohjohn
2
980
JAWSDAYS2026_A-6_現場SEが語る 回せるセキュリティ運用～設計で可視化、AIで加速する「楽に回る」運用設計のコツ～
Avatar for s-hata shoki_hata
0
3k
「Blue Team Labs Online」入門 - みんなで挑むログ解析バトル
Avatar for Noriaki Hayashi v_avenger
0
180
猫でもわかるKiro CLI(AI 駆動開発への道編)
Avatar for Hiroo Katoh kentapapa
0
220
OCHaCafe S11 #2 コンテナ時代の次の一手：Wasm 最前線
Avatar for oracle4engineer oracle4engineer
PRO
2
140

Featured

See All Featured
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
5.3k
HDC tutorial
Avatar for Michiel Stock michielstock
1
550
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
3.7k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
130
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
1
10k
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
200
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
470
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
1.8k
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
150
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
1
480

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