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
230
支付宝小程序的开放架构
Avatar for yiminghe yiminghe
0
190
gitc2016 react based architecture
Avatar for yiminghe yiminghe
1
150
antd at qcon2016
Avatar for yiminghe yiminghe
1
220
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
290
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
【NoMapsTECH 2025】AI Edge Computing Workshop
Avatar for ITO Akihiro akit37
0
220
AWSを利用する上で知っておきたい名前解決のはなし（10分版）
Avatar for nagisa_53 nagisa53
10
3.2k
Unlocking the Power of AI Agents with LINE Bot MCP Server
Avatar for LINE Developers Thailand linedevth
0
110
AI時代を生き抜くエンジニアキャリアの築き方 (AI-Native 時代、エンジニアという道は 「最大の挑戦の場」となる) / Building an Engineering Career to Thrive in the Age of AI (In the AI-Native Era, the Path of Engineering Becomes the Ultimate Arena of Challenge)
Avatar for JaeSoon Jeong jeongjaesoon
0
220
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
Avatar for Toro_Unit (Hiroshi Urabe) torounit
0
130
「Linux」という言葉が指すもの
Avatar for Satoru Takeuchi sat
PRO
4
140
react-callを使ってダイヤログをいろんなとこで再利用しよう！
Avatar for shinaps shinaps
2
260
5分でカオスエンジニアリングを分かった気になろう
Avatar for Aja9tochin pandayumi
0
250
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
Avatar for nwiizo nwiizo
7
860
Android Audio: Beyond Winning On It
Avatar for Atsushi Eno atsushieno
0
2.4k
スマートファクトリーの第一歩 〜AWSマネージドサービスで 実現する予知保全と生成AI活用まで
Avatar for wanda ganota
2
280
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
Avatar for Yuto Osawa osawa
1
360

Featured

See All Featured
Fireside Chat
Avatar for paigeccino paigeccino
39
3.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
30
9.7k
How GitHub (no longer) Works
Avatar for Zach Holman holman
315
140k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
43
7.6k
The Language of Interfaces
Avatar for Des Traynor destraynor
161
25k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
15k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
53
2.9k
Side Projects
Avatar for Sacha Greif sachag
455
43k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.2k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
29
5.5k

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