追求极致的网站访问速度,是网站体验良好的基础。我的博客网站,经过网络优化和渲染模板优化,在流畅的网络下,已经达到了一秒上下。为了让用户在 1-3s 内看到网站,先从庞大的库下手。
jQuery
http://jquery.com
安装 & 定制
git clone git://github.com/jquery/jquery
cd query
npm run build
会在 jquery/dist
生成编译好的文件,可通过 jquery/src/jquery.js
定制需要的模块
注意
jquery/src/jquery.js
不能有注释文件, grunt 会报错。
// 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 接口兼容的库
安装 & 定制
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
安装 & 定制
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/
// 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";
定制大小比较
定制内容 | 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 时代,应该是一件轻松的事情。