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
230
支付宝小程序的开放架构
Avatar for yiminghe yiminghe
0
190
gitc2016 react based architecture
Avatar for yiminghe yiminghe
1
150
antd at qcon2016
Avatar for yiminghe yiminghe
1
220
react-based architecture
Avatar for yiminghe yiminghe
2
160
React Ecosystem At Ant Financial
Avatar for yiminghe yiminghe
4
2.2k
ant design preview
Avatar for yiminghe yiminghe
1
290
react best practice
Avatar for yiminghe yiminghe
3
210
react at alipay
Avatar for yiminghe yiminghe
43
4.4k

Other Decks in Technology

See All in Technology
Access-what? why and how, A11Y for All - Nordic.js 2025
Avatar for Geisy Domiciano gdomiciano
1
110
OCI Network Firewall 概要
Avatar for oracle4engineer oracle4engineer
PRO
1
7.8k
研究開発部メンバーの働き⽅ / Sansan R&D Profile
Avatar for Sansan, Inc. sansan33
PRO
3
20k
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
Avatar for Preferred Networks pfn
PRO
1
880
Green Tea Garbage Collector の今
Avatar for zchee zchee
PRO
2
390
生成AIを活用したZennの取り組み事例
Avatar for igarashi ryosukeigarashi
0
200
綺麗なデータマートをつくろう_データ整備を前向きに考える会 / Let's create clean data mart
Avatar for BrainPad brainpadpr
2
110
LLMアプリケーション開発におけるセキュリティリスクと対策 / LLM Application Security
Avatar for GMO Flatt Security flatt_security
7
1.9k
GC25 Recap+: Advancing Go Garbage Collection with Green Tea
Avatar for Takuto Nagami logica0419
1
410
社内お問い合わせBotの仕組みと学び
Avatar for Tomoyuki Nishimura nish01
0
380
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
Avatar for ファインディ株式会社（イベント資料アップ用） findy_eventslides
1
390
KAGのLT会 #8 - 東京リージョンでGAしたAmazon Q in QuickSightを使って、報告用の資料を作ってみた
Avatar for arap / 0air 0air
0
200

Featured

See All Featured
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
36
2.5k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
229
22k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
352
21k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
9
580
Visualization
Avatar for Eitan Lees eitanlees
148
16k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
37
2.9k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
5
190
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k

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