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

Question

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

关于页面加载速度应该我

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

所以一页可能有:

<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>

另一个有:

<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>

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

所以每个页面都会引用:

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

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

Answer 1

通常最好将这些文件组合在一起并提供一个文件,您可以设置缓存标题,以便客户端保留它,而不是每页请求它.请记住,如果一个jQuery选择没有找到任何东西,它不会做任何事情,这样不是只要您使用的脚本的每一页相当一部分了一项重要协议,这只是罚款,它有不匹配的选择.

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