Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

kissy modularization part2

Avatar for yiminghe yiminghe
February 21, 2014
Technology
1.8k
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
350
支付宝小程序的开放架构
Avatar for yiminghe yiminghe
0
280
gitc2016 react based architecture
Avatar for yiminghe yiminghe
1
200
antd at qcon2016
Avatar for yiminghe yiminghe
1
260
react-based architecture
Avatar for yiminghe yiminghe
2
200
React Ecosystem At Ant Financial
Avatar for yiminghe yiminghe
4
2.3k
ant design preview
Avatar for yiminghe yiminghe
1
360
react best practice
Avatar for yiminghe yiminghe
3
250
react at alipay
Avatar for yiminghe yiminghe
43
4.6k

Other Decks in Technology

See All in Technology
長い仕事を任せる (Workflows、クラウドセッション、Kiro Web) | 目指せ Kiro マスター 10
Avatar for Riku INADA inariku
PRO
3
160
ライフワーク「猫でもわかるDirectConnect」
Avatar for Hiroo Katoh kentapapa
0
310
顧客合意を取りながら進めるAWSコスト削減の実践
Avatar for OPTiM optim
0
150
セキュリティ専任チームなしで攻撃を先回りするSREが実践したSIEM on Amazon OpenSearch Service
Avatar for サイバーセキュリティクラウド cscengineer
PRO
1
730
視野はAIに、視座は人に / ai-for-breadth-humans-for-perspective
Avatar for Yukiya Nakagawa nkzn
6
3.2k
[JAWS Festa 2026]一番いい仕事は、請求書に現れない / jawsfesta2026
Avatar for sh_fk2 sh_fk2
2
430
慶應義塾大学 AI実践05 論文執筆の仕組み化
Avatar for Semantic Machine Intelligence Lab., Keio Univ. keio_smilab
PRO
7
3.8k
AWS構成から考えるWebセキュリティ ― WordPressの構築経験から考える公開範囲と更新運用【JAWS FESTA 2026 in AKITA】
Avatar for サイバーセキュリティクラウド cscengineer
PRO
2
390
81天的 AI Agent 軟體開發團隊治理實務分享
Avatar for 小朱 regionbbs
0
140
AI時代に求められる優秀なTechLeadの振る舞い
Avatar for pospome pospome
11
16k
会社説明資料_最新版
Avatar for 株式会社出前館 demaecan
0
32k
新米を「売り越さない」、Aurora DSQLで作る在庫ゼロ死守の限定ドロップEC
Avatar for Yuuki Yamashita yama3133
0
200

Featured

See All Featured
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
630
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
3
800
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
760
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
1
520
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.4k
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
680
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
500
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
520
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
1
370
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
640

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