项目中引用的jquery插件比较多 怎么优化?

发布于 2022-09-01 12:36:36 字数 275 浏览 12 评论 0

假如我的某个html文件必须引用很多插件
例如:jquery.js
bootstrap.js
select2.js
picturefill.js
jquery.scrollTo.js
jquery-validation.js
...

在后台管理系统中,为了实现各种各样的需求时,我会引入对应的jquery插件。但是总感觉这样访问会很卡!我也不知道怎么进一步优化性能,希望有人帮我出出主意。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(6

温暖的光 2022-09-08 12:36:36

最近在研究,前端怎么优化。
我来说说我的方案把。
首先,你是在一个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光修改就特别麻烦了。

粗俗见解,请大神勿喷,有更好的方法,十分求教。

秉烛思 2022-09-08 12:36:36

我也没有优化经历,
不过我一般是这样做的。
1、把脚本放在body最下面,这样可以在内容加载完后才加载;
2、是用模块管理工具,可以按需加载。
3、用cdn加速

其他再高深的方法我也不懂了

尛丟丟 2022-09-08 12:36:36

uglify

泛滥成性 2022-09-08 12:36:36

您指的优化是大小方面 楼上的朋友说用uglify 是可以优化的

怎樣才叫好 2022-09-08 12:36:36
  1. 合并压缩
  2. 懒加载按需加载 sea.js , require.js
指尖上的星空 2022-09-08 12:36:36

按需加载,异步加载,另外你也可以参考这个

http://gtmetrix.com/
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文