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
220
支付宝小程序的开放架构
Avatar for yiminghe yiminghe
0
190
gitc2016 react based architecture
Avatar for yiminghe yiminghe
1
150
antd at qcon2016
Avatar for yiminghe yiminghe
1
210
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
280
react best practice
Avatar for yiminghe yiminghe
3
200
react at alipay
Avatar for yiminghe yiminghe
43
4.3k

Other Decks in Technology

See All in Technology
Infrastructure as Prompt実装記 〜Bedrock AgentCoreで作る自然言語インフラエージェント〜
Avatar for Yusuke Shimizu yusukeshimizu
1
150
Backlog AI アシスタントが切り開く未来
Avatar for vvatanabe vvatanabe
1
160
生成AI活用のROI、どう測る？ DMM.com 開発責任者から学ぶ「AI効果検証のノウハウ」 / ROI of AI
Avatar for Masato Ishigaki / 石垣雅人 i35_267
3
120
Amazon Q と『音楽』-ゲーム音楽もAmazonQで作成してみた感想-
Avatar for いのうえ senseofunity129
0
160
Telemetry APIから学ぶGoogle Cloud ObservabilityとOpenTelemetryの現在 / getting-started-telemetry-api-with-google-cloud
Avatar for 逆井（さかさい） k6s4i53rx
0
160
[OCI Technical Deep Dive] OracleのAI戦略(2025年8月5日開催)
Avatar for oracle4engineer oracle4engineer
PRO
1
230
「Roblox」の開発環境とその効率化 ～DAU9700万人超の巨大プラットフォームの開発 事始め～
Avatar for Keita Tanji keitatanji
0
140
AIに頼りすぎない新人育成術
Avatar for CUEBiC Inc. cuebic9bic
3
320
Segment Anything Modelの最新動向：SAM2とその発展系
Avatar for TakatoYoshikawa tenten0727
0
910
開発 × 生成AI × コミュニケーション：GENDAの開発現場で感じたコミュニケーションの変化 / GENDA Tech Talk #1
Avatar for GENDA genda
0
290
AIに目を奪われすぎて、周りの困っている人間が見えなくなっていませんか？
Avatar for an cap120
1
690
UDDのススメ - 拡張版 -
Avatar for マグロ隊長kinTV maguroalternative
1
610

Featured

See All Featured
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
358
30k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
33
8.8k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
58
9.5k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
525
40k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
44
2.4k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
73
5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
139
34k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.2k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
5.9k

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