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

kissy modularization part2

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for yiminghe yiminghe
February 21, 2014
Technology
1.7k
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
280
支付宝小程序的开放架构
Avatar for yiminghe yiminghe
0
210
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
生成AI時代に信頼性をどう保ち続けるか - Policy as Code の実践
Avatar for akitok akitok_
1
400
Gaussian Splattingの表現力を拡張する — 高周波再構成とインタラクションへのアプローチ —
Avatar for GPU UNITE gpuunite_official
0
180
セキュリティ対策、何からはじめる？ CloudNative環境の脅威モデリングと リスク評価実践入門 #cloudnativekaigi
Avatar for varu3 varu3
5
920
みんなの考えた最強のデータ基盤アーキテクチャ'26前期〜前夜祭〜ルーキーズ_資料_遠藤な
Avatar for Naoya Endo endonanana
0
350
そのSLO 99.9%、本当に必要ですか？ 〜優先度付きSLOによる責任共有の設計思想〜 / Is that 99.9% SLO really necessary? Design philosophy of shared responsibility through prioritized SLOs
Avatar for VTRyo vtryo
0
740
SLI/SLO、「完全に理解した」から「チョットデキル」へ
Avatar for maru maruloop
5
510
Claude Codeウェビナー資料 - AWSの最新機能をClaude Codeで高速に検証する
Avatar for ONOYAMA Shodai oshanqq
0
760
会社説明資料｜株式会社ギークプラス ソフトウェア事業部
Avatar for ギークプラス ソフトウェア事業部 geekplus_tech
0
250
データモデリング通り #5オンライン勉強会： AIに『ビジネスの文脈』を教え込むデータモデリング
Avatar for データ横丁 datayokocho
0
280
サイボウズ、プラットフォームエンジニアリング始めるってよ ― プラットフォームチームの事業貢献と組織アラインメントの強化
Avatar for Shin'ya Ueoka ueokande
0
110
20260515 ID管理は会社を守る大切な砦！〜🔰情シス向け〜
Avatar for OpenID Foundation Japan oidfj
0
550
20260515 ログイン機能だけではないアカウント管理を全体で考える～サービス設計者向け～
Avatar for OpenID Foundation Japan oidfj
0
600

Featured

See All Featured
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
290
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
690
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
200
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
130
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
370
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.6k

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