Upgrade to Pro — share decks privately, control downloads, hide ads and more …

kissy modularization part2

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
290
支付宝小程序的开放架构
Avatar for yiminghe yiminghe
0
220
gitc2016 react based architecture
Avatar for yiminghe yiminghe
1
190
antd at qcon2016
Avatar for yiminghe yiminghe
1
250
react-based architecture
Avatar for yiminghe yiminghe
2
190
React Ecosystem At Ant Financial
Avatar for yiminghe yiminghe
4
2.3k
ant design preview
Avatar for yiminghe yiminghe
1
340
react best practice
Avatar for yiminghe yiminghe
3
230
react at alipay
Avatar for yiminghe yiminghe
43
4.6k

Other Decks in Technology

See All in Technology
AIエージェントがあれば技術書なんてすぐ書けるでしょ→無理でした
Avatar for watany watany
2
270
大 AI 時代におけるC# の事情 ～ぶっちゃけトークを交えながら～
Avatar for neno nenonaninu
0
120
Playwright × AI Agent でE2Eテストはどう変わるか AI駆動テストの可能性と実用検証の結果
Avatar for Taiga Oyu taiga7543
2
800
書籍セキュアAPIについて
Avatar for RiiiM(りむ) riiimparm
0
250
副作用のある Lambda でも Lambda Power Tuning は使えるのか / lambda-power-tuning-side-effects
Avatar for koukihosaka koukihosaka
1
140
AI時代におけるエンジニアの新たな役割──FDEとクオリアの探求/登壇資料（戸井田 裕貴）
Avatar for Hacobu hacobu
PRO
0
320
データと地図で読む 大井町の「かわるもの、かわらないもの」
Avatar for じゅんじゅん yoshiyama_hana
0
150
そのドキュメント、自動化しませんか？
Avatar for yuk yuksew
1
410
AI工学特論: MLOps・継続的評価
Avatar for Asei Sugiyama asei
5
1.2k
Amplify Gen2でbackend.tsにCDKを定義する/しない事によるCDKの挙動の違いとユースケース
Avatar for Makky12 smt7174
1
490
インシデント事例と
パッケージの全量解析に学ぶ
ソフトウェアサプライチェーンの守り方 / supply-chain-attack-defense
Avatar for GMO Flatt Security flatt_security
0
890
AIが当たり前の組織で エンジニアはどう育つか
Avatar for Motoshi Nishihira nishihira
1
970

Featured

See All Featured
Side Projects
Avatar for Sacha Greif sachag
455
43k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.4k
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
1
440
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
280
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
240
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.8k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.2k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
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