每页不同的小js文件VS. 1x站点范围的js文件?

时间:2022-09-16 11:18:03

Different pages of my site have different js needs (plugins mainly), some need a lightbox, some dont, some need a carousel, some dont etc.

我的网站的不同页面有不同的js需求(主要是插件),有些需要灯箱,有些不需要,有些需要旋转木马,有些不需要等等。

With regards to pageloading speed should i

关于页面加载速度应该我

option 1 - reference each js file when it is needed:

选项1 - 在需要时引用每个js文件:

so one page might have:

所以一页可能有:

<script type="text/javascript" src="js/carousel/scrollable.js"></script>    
<script type="text/javascript" src="js/jquery.easydrag.js"></script>
<script type="text/javascript" src="js/colorbox/jquery.colorbox-min.js"></script>

and another have:

另一个有:

<script type="text/javascript" src="st_wd_assets/js/carousel/scrollable.js"></script>   
<script type="text/javascript" src="st_wd_assets/js/typewatch.js"></script>

option 2 - combine and compress into one site_wide.js file:

选项2 - 组合并压缩到一个site_wide.js文件中:

so each page would reference:

所以每个页面都会引用:

<script type="text/javascript" src="js/site_wide.js"></script>

there would be unused selectors/event listeners though, how bad is this? I would include any plugin notes/accreditations at the top of the site_wide.js file

会有未使用的选择器/事件监听器,这有多糟糕?我会在site_wide.js文件的顶部包含任何插件备注/认证

2 个解决方案

#1


7  

It's usually best to combine these and serve one file, which you set the cache headers so that the client holds onto it, not requesting it each page. Remember that if a jQuery selector doesn't find anything, it doesn't do anything so that's not a major deal as long as you're using a good portion of your script each page, it's just fine that it has selectors without matches.

通常最好将这些文件组合在一起并提供一个文件,您可以设置缓存标题,以便客户端保留它,而不是每页请求它。请记住,如果一个jQuery选择器没有找到任何东西,它就不会做任何事情,所以只要你在每个页面使用你的脚本的很大一部分就不是什么大不了的事,只要它有没有匹配的选择器就可以了。

Make sure it's being cached by the client though, of all your work is for naught. Also make sure it's served minified and gzipped. And last, look at hosting your main libraries from a CDN.

确保它被客户端缓存,但是你的所有工作都是徒劳的。还要确保它被缩小和压缩。最后,看看从CDN托管您的主要库。

#2


2  

Combine them into one large and minified external file, and include that in every page. After the first page load, the browser will cache it, so the user will only download it once.

将它们组合成一个大而缩小的外部文件,并将其包含在每个页面中。第一页加载后,浏览器将缓存它,因此用户只会下载一次。

#1


7  

It's usually best to combine these and serve one file, which you set the cache headers so that the client holds onto it, not requesting it each page. Remember that if a jQuery selector doesn't find anything, it doesn't do anything so that's not a major deal as long as you're using a good portion of your script each page, it's just fine that it has selectors without matches.

通常最好将这些文件组合在一起并提供一个文件,您可以设置缓存标题,以便客户端保留它,而不是每页请求它。请记住,如果一个jQuery选择器没有找到任何东西,它就不会做任何事情,所以只要你在每个页面使用你的脚本的很大一部分就不是什么大不了的事,只要它有没有匹配的选择器就可以了。

Make sure it's being cached by the client though, of all your work is for naught. Also make sure it's served minified and gzipped. And last, look at hosting your main libraries from a CDN.

确保它被客户端缓存,但是你的所有工作都是徒劳的。还要确保它被缩小和压缩。最后,看看从CDN托管您的主要库。

#2


2  

Combine them into one large and minified external file, and include that in every page. After the first page load, the browser will cache it, so the user will only download it once.

将它们组合成一个大而缩小的外部文件,并将其包含在每个页面中。第一页加载后,浏览器将缓存它,因此用户只会下载一次。