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.7k
1

kissy modularization part2

part2 of kissy modularization tutorials

Avatar for yiminghe

yiminghe

February 21, 2014

More Decks by yiminghe

See All by yiminghe
小程序终端技术架构
Avatar for yiminghe yiminghe
0
280
支付宝小程序的开放架构
Avatar for yiminghe yiminghe
0
210
gitc2016 react based architecture
Avatar for yiminghe yiminghe
1
190
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
【Gen-AX】20260530開催_JJUG CCC 2026 Spring
Avatar for Gen-AX株式会社 genax
0
410
チームで実践する AI-DLC 思考の軌跡を残すチェックポイント設計
Avatar for Belong inc. belongadmin
0
2.5k
Databricks 月刊サービスアップデート 2026年05月号
Avatar for ちょし tyosi1212
0
200
タクシーアプリ『GO』の実践的データ活用
Avatar for GO Inc. dev mot_techtalk
2
130
Claude code Orchestra
Avatar for Taisei Ozaki ozakiomumkj
3
940
速さだけじゃない！ VoidZero ツールが移行先に選ばれる理由
Avatar for mizdra mizdra
PRO
6
740
MIERUNE JCT 発表資料「宇宙から伊能忠敬ごっこ」
Avatar for じゃらしまる syuchimu
0
170
[モダンアプリ勉強会]今更聞けないGit/GitHub入門
Avatar for つくぼし tsukuboshi
0
240
PHP と TypeScript の型システム比較：AI 時代の「型」は誰のためにあるのか？ #frontend_phpcon_do / frontend_phpcon_do_2026
Avatar for shogogg shogogg
1
240
AI フレンドリーなエラー監視を TypeScript で実現する
Avatar for Shinobu Hayashi shinyaigeek
2
250
AI Adaptable なテストを整える工夫 / Ways to Make Your Tests AI-Adaptable
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
2
210
Terraformモジュールは、なぜ「魔境」化するのか
Avatar for hayama hayama17
1
180

Featured

See All Featured
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
4k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
1.9k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9.1k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
55k
HDC tutorial
Avatar for Michiel Stock michielstock
2
690
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
940
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
170
Done Done
Avatar for chrislema chrislema
186
16k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.9k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
8.5k
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
65
56k

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