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
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
250
支付宝小程序的开放架构
Avatar for yiminghe yiminghe
0
190
gitc2016 react based architecture
Avatar for yiminghe yiminghe
1
170
antd at qcon2016
Avatar for yiminghe yiminghe
1
240
react-based architecture
Avatar for yiminghe yiminghe
2
170
React Ecosystem At Ant Financial
Avatar for yiminghe yiminghe
4
2.3k
ant design preview
Avatar for yiminghe yiminghe
1
320
react best practice
Avatar for yiminghe yiminghe
3
220
react at alipay
Avatar for yiminghe yiminghe
43
4.5k

Other Decks in Technology

See All in Technology
Amazon ElastiCacheのコスト最適化を考える/Elasticache Cost Optimization
Avatar for quiver quiver
0
250
最速で価値を出すための プロダクトエンジニアのツッコミ術
Avatar for Kazuto Ohara kaacun
1
340
re:Inventで出たインフラエンジニアが嬉しかったアップデート
Avatar for nagisa_53 nagisa53
4
220
Zephyr RTOS の発表をOpen Source Summit Japan 2025で行った件
Avatar for misoji engineer iotengineer22
0
280
「AIでできますか?」から「Agentを作ってみました」へ ~「理論上わかる」と「やってみる」の隔たりを埋める方法
Avatar for Michiru Kato applism118
9
6.9k
一番人に近いコードレビューア CodeRabbit
Avatar for kinopee kinopeee
0
110
Databricks Free Edition講座 データサイエンス編
Avatar for Takaaki Yayoi taka_aki
0
230
Claude in Chromeで始める自律的フロントエンド開発
Avatar for morimorikochan diggymo
1
280
Vitest Highlights in Angular
Avatar for Rainer Hahnekamp rainerhahnekamp
0
110
Digitization部 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
6.7k
AWS Devops Agent ~ 自動調査とSlack統合をやってみた！ ~
Avatar for Kubo kubomasataka
2
250
名刺メーカーDevグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
1k

Featured

See All Featured
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon szymonslowik
1
900
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.1k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
5.2k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
61
49k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
26k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
181
10k
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
60
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
280
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
480
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
Visualization
Avatar for Eitan Lees eitanlees
150
17k
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.2k

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