Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
kissy modularization part2
Search
yiminghe
February 21, 2014
Technology
1
1.7k
kissy modularization part2
part2 of kissy modularization tutorials
yiminghe
February 21, 2014
Tweet
Share
More Decks by yiminghe
See All by yiminghe
小程序终端技术架构
yiminghe
0
230
支付宝小程序的开放架构
yiminghe
0
190
gitc2016 react based architecture
yiminghe
1
150
antd at qcon2016
yiminghe
1
220
react-based architecture
yiminghe
2
160
React Ecosystem At Ant Financial
yiminghe
4
2.2k
ant design preview
yiminghe
1
290
react best practice
yiminghe
3
210
react at alipay
yiminghe
43
4.4k
Other Decks in Technology
See All in Technology
綺麗なデータマートをつくろう_データ整備を前向きに考える会 / Let's create clean data mart
brainpadpr
2
120
Flaky Testへの現実解をGoのプロポーザルから考える | Go Conference 2025
upamune
1
420
VCC 2025 Write-up
bata_24
0
180
Escaping_the_Kraken_-_October_2025.pdf
mdalmijn
0
140
多様な事業ドメインのクリエイターへ 価値を届けるための営みについて
massyuu
1
300
SREとソフトウェア開発者の合同チームはどのようにS3のコストを削減したか?
muziyoshiz
1
100
LLMアプリケーション開発におけるセキュリティリスクと対策 / LLM Application Security
flatt_security
7
1.9k
業務自動化プラットフォーム Google Agentspace に入門してみる #devio2025
maroon1st
0
190
自動テストのコストと向き合ってみた
qa
0
170
Azure Well-Architected Framework入門
tomokusaba
1
310
extension 現場で使えるXcodeショートカット一覧
ktombow
0
210
OpenAI gpt-oss ファインチューニング入門
kmotohas
2
1k
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.2k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Producing Creativity
orderedlist
PRO
347
40k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
How to Ace a Technical Interview
jacobian
280
24k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Transcript
KISSY Modularization part 2 - optimzation
[email protected]
之前浏览器下的问题 • 首屏闪烁 • 链接数过多
链接数
使用工具进行优化 • grunt-kmc • 合并文件 • 动态 combo
• 合并项目文件
合并文件 • 适合具备明确的入口文件 • Gruntfile.js
modules.js • 描述项目合并后文件外部依赖
index.js • 入口模块以及其依赖的本地模块
应用 • 引入 seed.js modules.js • 配置 combine true •
http://localhost:8111/?concat=1
• 动态 combo
动态 combo • 适合多入口或无入口应用或需要后期动态加载 • Gruntfile.js
Module.js • 包含项目所有的模块的内部依赖与外部依赖
应用 • 引入 seed.js modules.js • 配置 combine true •
http://localhost:8111/?combo=1
• 首屏闪烁
加载 css • 异步加载 css 造成闪烁
加载 css • 使用 importStyle 配置 modules.js 同步 combo 加载
css • 对首屏用到的所有模块调用 importStyle
大规模应用优化 • Gallery/mini 模块? • 打包进项目入口文件 • 动态 combo •
合并 gallery/mini 模块的 modules.js 到项目 modules.js