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
260
支付宝小程序的开放架构
Avatar for yiminghe yiminghe
0
200
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
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
230
react at alipay
Avatar for yiminghe yiminghe
43
4.5k

Other Decks in Technology

See All in Technology
Oracle Base Database Service 技術詳細
Avatar for oracle4engineer oracle4engineer
PRO
15
95k
サンタコンペ2025完全攻略 ～お前らの焼きなましは遅すぎる～
Avatar for terry-u16 terryu16
1
540
研究開発部メンバーの働き⽅ / Sansan R&D Profile
Avatar for Sansan, Inc. sansan33
PRO
4
22k
Serverless Agent Architecture on Azure / serverless-agent-on-azure
Avatar for miyake miyake
1
110
俺の失敗を乗り越えろ！メーカーの開発現場での失敗談と乗り越え方 ～ゆるゆるチームリーダー編～
Avatar for Satoshi Deishi spiddle
0
400
男（監査）はつらいよ - Policy as CodeからAIエージェントへ
Avatar for Kengo Suzuki ken5scal
4
630
Lookerの最新バージョンv26.2がやばい話
Avatar for Yuta Ozaki waiwai2111
1
140
バクラクのSREにおけるAgentic AIへの挑戦/Our Journey with Agentic AI
Avatar for SadayoshiTada taddy_919
1
470
20260222ねこIoTLT　ねこIoTLTをふりかえる
Avatar for フクイ poropinai1966
0
300
AWS CDK の目玉新機能「Mixins」とは / cdk-mixins
Avatar for k.goto gotok365
2
290
AWS Bedrock Guardrails / 機密情報の入力・出力をブロックする — Blocking Sensitive Information Input/Output
Avatar for Kazuhito Nakayama kazuhitonakayama
2
180
Sansan Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
4k

Featured

See All Featured
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
78
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
120
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.4k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
0
550
Leo the Paperboy
Avatar for Maya Tellez mayatellez
4
1.5k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
190
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
720
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
140
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
140
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
180
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
220

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