项目中引用的jquery插件比较多 怎么优化?
假如我的某个html文件必须引用很多插件
例如:jquery.js
bootstrap.js
select2.js
picturefill.js
jquery.scrollTo.js
jquery-validation.js
...
在后台管理系统中,为了实现各种各样的需求时,我会引入对应的jquery插件。但是总感觉这样访问会很卡!我也不知道怎么进一步优化性能,希望有人帮我出出主意。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(6)
最近在研究,前端怎么优化。
我来说说我的方案把。
首先,你是在一个html文件中,需要引入各种js。
首先你要知道,那几个js文件你会全局,引用的。jq可以作为全局引用,放在html模版的herd中,当然是压缩过后的js文件。
好的,接下来你有很多js文件,那么就有两种方案了。
方案一使用seajs或requirejs,来引入js文件。
那么这就会有另一个问题,产生,每次html页面打开的时候,就必须先跑一遍,模块化管理(seajs或requirejs)的js文件,然后在main入口中,引入依赖文件,最后再跑你的手写的js文件。这种方案,在你本地开发是很好的,每个js都是单独的模块,加载方便,修改也方便,但是优化的角度来说,多跑了一遍模块化管理的js,就是不合理的,优化,在我现在的理解就是,减少文件体积,减少http请求,减少ajax请求。
方案二,使用r.js,或者gulp或grunt中的来合并js文件
将所有你会用的js文件都合并成为一个js文件,当然书写的话,就要求封包,模块化,放置命名冲突。
在通过script引入html文件(这种做法是不是比较low,但是这种low的方法,也比较高效)
是可以使用,r.js这是根据require的依赖,来合并打包你的js文件。
也可以使用gulp、grunt中的合并压缩,来制作。
r.JS的话,根据依赖来压缩,省了写file.js配置文件,方便一点,但是可控性不是很强。
使用grunt、gulp,就要求你对每一个html文件,所引用的js文件都十分清楚。每次上传到服务器的时候,都要跑一遍。万一合并错误,就坑了。
还有一种fis,是百度出的前端集成方案,可控性非常差,基本要按照fis的规则来,开始很喜欢,后来感觉到,不是每一个项目,都必须按照fis来做的,特别是比较low的项目,用fis光修改就特别麻烦了。
粗俗见解,请大神勿喷,有更好的方法,十分求教。
我也没有优化经历,
不过我一般是这样做的。
1、把脚本放在body最下面,这样可以在内容加载完后才加载;
2、是用模块管理工具,可以按需加载。
3、用cdn加速
其他再高深的方法我也不懂了
uglify
您指的优化是大小方面 楼上的朋友说用uglify 是可以优化的
sea.js
,require.js
按需加载,异步加载,另外你也可以参考这个