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

Other Decks in Technology

See All in Technology
重厚長大企業で、顧客価値をスケールさせるためのプロダクトづくりとプロダクト開発チームづくりの裏側 / Developers X Summit 2025
Avatar for モンゴル (mongolyy) mongolyy
0
190
マルチドライブアーキテクチャ: 複数の駆動力でプロダクトを前進させる
Avatar for Kenichi SUZUKI knih
0
10k
プロダクト負債と歩む持続可能なサービスを育てるための挑戦
Avatar for SansanTech sansantech
PRO
1
930
ECS組み込みのBlue/Greenデプロイを動かしてELB側の動きを観察してみる
Avatar for 矢儀丈博 yuki_ink
3
410
事業状況で変化する最適解。進化し続ける開発組織とアーキテクチャ
Avatar for recruiting@caddi.jp caddi_eng
1
7.1k
TypeScript×CASLでつくるSaaSの認可 / Authz with CASL
Avatar for Jumpei Sakatsu saka2jp
2
130
膨大なデータをどうさばく？ Java × MQで作るPub/Subアーキテクチャ
Avatar for igu zenta
0
120
巨大モノリスのリプレイス──機能整理とハイブリッドアーキテクチャで挑んだ再構築戦略
Avatar for ZOZO Developers zozotech
PRO
0
300
組織の“見えない壁”を越えよ！エンタープライズシフトに必須な3つのPMの「在り方」変革 #pmconf2025
Avatar for Masakazu Inaba masakazu178
1
880
"'TSのAPI型安全”の対価は誰が払う？不公平なスキーマ駆動に終止符を打つハイブリッド戦略
Avatar for Hal hal_spidernight
0
120
OSだってコンテナしたい❗Image Modeが切り拓くLinux OS運用の新時代
Avatar for Masataka Tsukamoto tsukaman
0
130
ローカルVLM OCRモデル + Gemini 3.0 Proで日本語性能を試す
Avatar for Gota gotalab555
1
150

Featured

See All Featured
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.4k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
73
11k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7.2k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
1.6k
Code Review Best Practice
Avatar for Trisha Gee trishagee
72
19k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
10k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6.1k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
697
190k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k

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