jQuery Builder:jQuery 库的精简之道

最近在做一个手机主题,为了用上看似华丽的Ajax 特效,不得不用上jQuery(不要问我为什么不用原生js,要是我会写就不用那么费劲了)。但众所周知Jquery 库是日渐臃肿,就最新的版本,min版本(压缩版)就有90多kb,在手机上是不能承受的痛啊。于是思考着对jQuery库进行精简压缩。

jQuery 的替代方案

搜索一下,说道可以采用不少替代方案,比如下面的几个(来自互联网,原始出处未详):

Zepto.js Zepto.js 是支持移动WebKit浏览器的JavaScript框架,具有与jQuery兼容的语法。2-5k的库,通过不错的API处理绝大多数的基本工作。 官网:http://zeptojs.com/ jQuery 精简版 jQuip jQuip 是目的是将 jQuery 项目拆分成各个小模块,根据需要包含相应的 JS 模块,以减小浏览器加载 JS 的大小。核心文件 jquip.js 只有 4.28KB (最小化和gzip压缩过) 只有 jQuery 的 13%。该核心库已经包含 jQuery 中最常用的功能,其他的功能可通过插件方式引入。在 IE7 以及之前版本的 IE 上速度提升 7~8 倍。

由于技术不过关,上面两个试了下都失败了,看来要找替代方案是没戏了(有待学习)。虽然没有系统学习Jquery,但旁门左道那么久了也大概知道Jquery 就是模块化“定制”的,因此要说精简压缩、按需使用还是有戏的。循着这个思路,最终找到了这个jQuery Builder。

jQuery Builder:Jquery 库的精简之道

先丢上给地址:

官网:http://projects.jga.me/jquery-builder/ Github 地址:https://github.com/jgallen23/jquery-builder

jQuery Builder lets you easily build a version a custom version of jQuery without downloading the source, grabbing the submodules, installing grunt and building yourself.这个是官方介绍,后半句不是很懂。

个人感觉jQuery Builder 给个人定制属于自己的专属模块集合的jQuery ,打个比喻,就一个“仓库”而言,里面的“货物”不一定每件都是需要的,因此应该按需使用,不用的就抛弃掉。jQuery 是模块化组成,一个小项目里面不大可能全用上这些模块(比如我那个手机主题,就ajax、css、effect 大概就这么几个模块需要),那么该去掉不需要的,重新打包生成自己的私人定制jQuery,如此一来,体积必然减少。

用法:

打开http://projects.jga.me/jquery-builder/,选择需要的jQuery 版本(最好勾选minify),然后选择需要的模块,点击 “build” 按钮,生成的窗口地址下载过来,然后引用到自己的项目中。

如果不清楚该选择(删除)那些模块怎么办? 那只能一个个做减法尝试了(哈哈,我也是这么干的)

一般来说,build后 的jquery 库体积都有所减少,特别你本身用的功能也不多的时候,像Jeff 的手机主题最终用到了50kb左右——减少了快一半。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IT大咖说

Redux助力美团点评前端进阶之路

摘要 都说Redux好,但Redux到底好在哪,它真的解决了业务中遇到的问题吗? 因为在业务中引入Redux而带来的额外成本是否让你苦恼过? 会不会是我们打开R...

34740
来自专栏阮一峰的网络日志

搭建了一个图片库

但是,事实上,这个网志的所有图片链接都是有效的,没有一个链接是坏的。无法显示只是因为被屏蔽了,只要你不在中国大陆,所有图片都能看到。

91630
来自专栏Flutter入门

Android 屏幕录制GIF脚本

因为一直需要将Android手机上的效果录制下来,转成gif,然后上传到博客上。 原来都需要手动操作好几次,所以索性的写了一个脚本来配合使用。

29510
来自专栏PHP在线

现代Web开发需要学习的15大技术

将近4年前,我写了一篇名为《Future of Web and Mobile: HTML5, CSS3 and Javascript》的博客文章,其中我提到了...

56190
来自专栏知晓程序

晓实战 | 这样编辑小程序富文本,又快又方便!

我们会定期邀请优秀的开发者,从实践的角度,亲自分享他们使用知晓云(cloud.minaapp.com)开发的实战经验,如果你也想分享你的小程序实战经验,欢迎加入...

14130
来自专栏進无尽的文章

ReactNative| 开发环境的搭建及工程的创建

下载最新版的Node.js后,一步一步安装即可。注意下载后的文件为 pkg 文件而不是 dmg。

20030
来自专栏练小习的专栏

使用自定义标记来构建页面

在用html5来搭建页面的时候,为了兼容不支持html5标记的浏览器,需要把html5标记全部createElement一遍。

24160
来自专栏Web 开发

Mac下面的IE8测试环境

微软提供的IE测试虚拟机里面,Window7的自带的最小版本IE是IE8,so,从IE8测试走起。Vista是个短命的产品,至于XP,让他退役吧。

15000
来自专栏Blogbyme

【每日推荐】一款绿色轻快的截图软件

亲爱的读者朋友们,博主的每日推荐终于开始更新啦~~是不是很高兴呢? ? 什么?你不知道有每日推荐? ?   点我去了解一下吧。

15150
来自专栏Gcaufy的专栏

小程序开发仿微信界面 DEMO

在前几篇文章中给大家介绍了WePY 的原理、实践与探究,相信大家对WePY 有一个初步的了解,本篇将讲述基于wepy如何一步步开发出一个仿微信界面的小程序DEM...

11.6K30

扫码关注云+社区

领取腾讯云代金券