追求极致的网站访问速度，是网站体验良好的基础。我的博客网站，经过网络优化和渲染模板优化，在流畅的网络下，已经达到了一秒上下。为了让用户在 1-3s 内看到网站，先从庞大的库下手。
jQuery
http://jquery.com
安装 & 定制
1
2
3
| git clone git://github.com/jquery/jquery
cd query
npm run build
|
会在 jquery/dist 生成编译好的文件，可通过 jquery/src/jquery.js 定制需要的模块
注意 jquery/src/jquery.js 不能有注释文件， grunt 会报错。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
| // jquery/src/jquery.js
[
"./core",
"./ajax/load",
"./queue",
"./queue/delay",
"./serialize",
"./selector",
"./traversing",
"./callbacks",
"./data",
"./attributes",
"./manipulation",
"./manipulation/_evalUrl",
// !!以上都是基础组件
"./event",
"./exports/global",
"./event/ajax",
"./event/focusin"
"./core/ready",
"./ajax",
"./ajax/xhr",
"./ajax/script",
"./ajax/jsonp",
"./css",
"./css/hiddenVisibleSelectors",
"./deprecated",
"./dimensions",
"./effects",
"./effects/animatedSelector",
"./offset",
"./wrap",
"./deferred",
"./deferred/exceptionHook",
"./exports/amd",
"./event/alias",
]
|
定制大小比较
只添加 选择器和事件监听即可 gzip 大概 24KB
| 定制内容 |
min 大小(Byte) |
gzip 大小(Byte) |
| default |
87277 |
30285 |
| default - sizzle |
69526 |
24366 |
| only event |
80002 |
28016 |
| only event - sizzle |
62465 |
22091 |
Zepto
http://zeptojs.com
Zepto 是与 jQuery 接口兼容的库
安装 & 定制
1
2
3
4
| git clone https://github.com/madrobby/zepto
cd zepto
npm install
MODULES="zepto event ajax data" npm run dist
|
可以在 https://github.com/madrobby/zepto#zepto-modules 找到可选列表
定制大小比较
只添加 选择器和事件监听 gzip 大概 10KB
| 定制内容 |
min 大小(Byte) |
gzip 大小(Byte) |
| default |
26697 |
10028 |
| event ajax data |
26964 |
10156 |
可以看见其实差别很小，其中 default 并没有包含全部 zepto 的功能
Bootstrap
http://getbootstrap.com
安装 & 定制
1
2
3
4
5
6
| git clone https://github.com/twbs/bootstrap
cd bootstrap
npm install
gem install bundler // 安装 ruby 的 bundler
bundle install // 安装 ruby 依赖库
npm run dist
|
详细的编译流程可参考 https://getbootstrap.com/docs/4.0/getting-started/build-tools/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| // bootstrap/scss/bootstrap.scss
@import "functions";
@import "variables";
@import "mixins";
// @import "print";
// @import "reboot";
// @import "type";
// @import "images";
// @import "code";
@import "grid";
// @import "tables";
// @import "forms";
// @import "buttons";
// @import "transitions";
// @import "dropdown";
// @import "button-group";
// @import "input-group";
// @import "custom-forms";
// @import "nav";
// @import "navbar";
// @import "card";
// @import "breadcrumb";
// @import "pagination";
// @import "badge";
// @import "jumbotron";
// @import "alert";
// @import "progress";
// @import "media";
// @import "list-group";
// @import "close";
// @import "modal";
// @import "tooltip";
// @import "popover";
// @import "carousel";
// @import "utilities";
|
定制大小比较
1
2
3
4
| 定制内容 | min 大小(Byte) | gzip 大小(Byte)
default | 124962 | 18703
bootstrap-grid | 21780 | 2597
custom-grid(只编译 grid) | 10823 | 1839
|
PureCSS
https://purecss.io
PureCSS 是 类似 Bootstrap 的 UI 库
定制大小比较
本身就很小，可以不编译，可以和 Bootstrap 的模块混合使用， purecss.io 有提供相关示例。
| 组件名称 |
min 大小(Byte) |
gzip 大小(Byte) |
| Default |
16449 |
4072 |
| Base |
2195 |
1221 |
| Grids |
2346 |
930 |
| Forms |
7025 |
1599 |
| Buttons |
2026 |
964 |
| Tables |
1055 |
636 |
| Menus |
2471 |
941 |
总结
本次对上面四库做了不完整对比，旨在指出其实主力库是可以变得苗条的，快速的。因为主力库本身考虑的场景多，在基础兼容上是最优的。
关于 jQuery 和 Zepto ，可以看到核心部分， Zepto 小一倍左右，在项目可控的情况下，用 Zepto 是比较优先的选择。其实 jQuery 也可以用，只是因为太过庞大，在不追求速度和功能全面上，可以使用，但特殊使用场景较少。
关于 Bootstrap 和 PureCSS， 可以看到 Bootstrap 的定制化 grid 与purecss 的 Base + Grids 几乎相同大小，测试过 flexboxgrid 库，其实也都差不多。
何必增加记名字的负担，可以主力用 Bootstrap，然后参考 PureCSS 的其它模块设计，做一个扩展了自己代码的定制化库，在 Webpack 时代，应该是一件轻松的事情。