Tweet
Tweet

Slide 1

Slide 1 text

KISSY Modularization part 2 - optimzation [email protected]

Slide 2

Slide 2 text

之前浏览器下的问题 • 首屏闪烁 • 链接数过多

Slide 3

Slide 3 text

链接数

Slide 4

Slide 4 text

使用工具进行优化 • grunt-kmc • 合并文件 • 动态 combo

Slide 5

Slide 5 text

• 合并项目文件

Slide 6

Slide 6 text

合并文件 • 适合具备明确的入口文件 • Gruntfile.js

Slide 7

Slide 7 text

modules.js • 描述项目合并后文件外部依赖

Slide 8

Slide 8 text

index.js • 入口模块以及其依赖的本地模块

Slide 9

Slide 9 text

应用 • 引入 seed.js modules.js • 配置 combine true • http://localhost:8111/?concat=1

Slide 10

Slide 10 text

• 动态 combo

Slide 11

Slide 11 text

动态 combo • 适合多入口或无入口应用或需要后期动态加载 • Gruntfile.js

Slide 12

Slide 12 text

Module.js • 包含项目所有的模块的内部依赖与外部依赖

Slide 13

Slide 13 text

应用 • 引入 seed.js modules.js • 配置 combine true • http://localhost:8111/?combo=1

Slide 14

Slide 14 text

• 首屏闪烁

Slide 15

Slide 15 text

加载 css • 异步加载 css 造成闪烁

Slide 16

Slide 16 text

加载 css • 使用 importStyle 配置 modules.js 同步 combo 加载 css • 对首屏用到的所有模块调用 importStyle

Slide 17

Slide 17 text

大规模应用优化 • Gallery/mini 模块？ • 打包进项目入口文件 • 动态 combo • 合并 gallery/mini 模块的 modules.js 到项目 modules.js