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
210
支付宝小程序的开放架构
Avatar for yiminghe yiminghe
0
180
gitc2016 react based architecture
Avatar for yiminghe yiminghe
1
150
antd at qcon2016
Avatar for yiminghe yiminghe
1
210
react-based architecture
Avatar for yiminghe yiminghe
2
150
React Ecosystem At Ant Financial
Avatar for yiminghe yiminghe
4
2.2k
ant design preview
Avatar for yiminghe yiminghe
1
280
react best practice
Avatar for yiminghe yiminghe
3
200
react at alipay
Avatar for yiminghe yiminghe
43
4.3k

Other Decks in Technology

See All in Technology
AIとともに進化するエンジニアリング / Engineering-Evolving-with-AI_final.pdf
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
140
Geminiとv0による高速プロトタイピング
Avatar for Shinya Masadome（東京AI祭） shinya337
0
200
AWS Organizations 新機能！マルチパーティ承認の紹介
Avatar for yhana yhana
1
220
CI/CD/IaC 久々に0から環境を作ったらこうなりました
Avatar for Kaz Watanabe kaz29
1
200
asken AI勉強会(Android)
Avatar for 佐藤忠 tadashi_sato
0
140
「良さそう」と「とても良い」の間には 「良さそうだがホンマか」がたくさんある / 2025.07.01 LLM品質Night
Avatar for Shumpei Miyawaki smiyawaki0820
1
430
CursorによるPMO業務の代替 / Automating PMO Tasks with Cursor
Avatar for Motoyoshi Kosei motoyoshi_kakaku
2
790
Zephyr RTOSを使った開発コンペに参加した件
Avatar for misoji engineer iotengineer22
0
130
ネットワーク保護はどう変わるのか？re:Inforce 2025最新アップデート解説
Avatar for Shun Tokuyama tokushun
0
150
急成長を支える基盤作り〜地道な改善からコツコツと〜 #cre_meetup
Avatar for すてにゃん stefafafan
0
150
LangChain Interrupt & LangChain Ambassadors meetingレポート
Avatar for os1ma os1ma
2
220
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
Avatar for かわうそ kawauso
1
170

Featured

See All Featured
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
5
230
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
82
9.1k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.6k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
51
8.5k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
24
1.7k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
42
7.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
800
Scaling GitHub
Avatar for Zach Holman holman
459
140k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k

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