Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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
240
支付宝小程序的开放架构
Avatar for yiminghe yiminghe
0
190
gitc2016 react based architecture
Avatar for yiminghe yiminghe
1
170
antd at qcon2016
Avatar for yiminghe yiminghe
1
230
react-based architecture
Avatar for yiminghe yiminghe
2
160
React Ecosystem At Ant Financial
Avatar for yiminghe yiminghe
4
2.3k
ant design preview
Avatar for yiminghe yiminghe
1
310
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
意外とあった SQL Server 関連アップデート + Database Savings Plans
Avatar for Takuya Shibata stknohg
PRO
0
310
ガバメントクラウド利用システムのライフサイクルについて
Avatar for 高橋広和 techniczna
0
190
re:Invent 2025 ふりかえり 生成AI版
Avatar for TakaakiKakei takaakikakei
1
200
AWSセキュリティアップデートとAWSを育てる話
Avatar for cm-usuda-keisuke cmusudakeisuke
0
250
Kubernetes Multi-tenancy: Principles and Practices for Large Scale Internal Platforms
Avatar for hhiroshell hhiroshell
0
120
コンテキスト情報を活用し個社最適化されたAI Agentを実現する4つのポイント
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
0
870
AI 駆動開発勉強会 フロントエンド支部 #1 w/あずもば
Avatar for 1ft-seabass 1ftseabass
PRO
0
350
WordPress は終わったのか ～今のWordPress の制作手法ってなにがあんねん？～ / Is WordPress Over? How We Build with WordPress Today
Avatar for tbshiki tbshiki
1
730
MLflowで始めるプロンプト管理、評価、最適化
Avatar for Databricks Japan databricksjapan
1
210
Karate+Database RiderによるAPI自動テスト導入工数をCline＋GitLab MCPを使って2割削減を目指す！ / 20251206 Kazuki Takahashi
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
730
評価駆動開発で不確実性を制御する - MLflow 3が支えるエージェント開発
Avatar for Databricks Japan databricksjapan
1
160
年間40件以上の登壇を続けて見えた「本当の発信力」/ 20251213 Masaki Okuda
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
130

Featured

See All Featured
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.8k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
9
1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
196
70k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
36
6.2k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.9k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.2k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.2k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
13k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
54k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
10
720

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