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
Google系サービスで文字起こしから勝手にカレンダーを埋めるエージェントを作った話
Avatar for RisaTube risatube
0
190
わからなくて良いなら、わからなきゃだめなの？
Avatar for kota oue kotaoue
1
370
フロントエンド刷新 4年間の軌跡
Avatar for nus3 yotahada3
0
500
JAWS DAYS 2026 AWS知識・技術力を使って隠された旗をゲットせよ！〜出張版「ごーとんカップ」〜 解説編
Avatar for 株式会社カミナシ kaminashi
0
100
WebアクセシビリティをCI/CDで担保する ― axe DevTools × Playwright C#実践ガイド
Avatar for tomokusaba tomokusaba
2
180
詳解 強化学習 / In-depth Guide to Reinforcement Learning
Avatar for PRIN Lab prinlab
0
300
Tebiki Engineering Team Deck
Avatar for Tebiki, Inc. tebiki
0
27k
AlloyDB 奮闘記
Avatar for hatappi hatappi
0
150
2026年もソフトウェアサプライチェーンのリスクに立ち向かうために / Product Security Square #3
Avatar for GMO Flatt Security flatt_security
1
660
OpenClaw を Amazon Lightsail で動かす理由
Avatar for Uechi Shingo uechishingo
0
200
アーキテクチャモダナイゼーションを実現する組織
Avatar for SatohJohn satohjohn
1
1.1k
OCHaCafe S11 #2 コンテナ時代の次の一手：Wasm 最前線
Avatar for oracle4engineer oracle4engineer
PRO
2
150

Featured

See All Featured
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.4k
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
200
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
640
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
52k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.6k
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
310
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.3k
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
220
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
0
460
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.8k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
400

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