JS/CSS 文件合并的必要性

在我们扒站学习的时候，或多或少都会遇到有些网站仅引用了2-3个JS文件吧，其中有一个js一般命名为library.js或者library.min.js，这个文件一般在几百KB左右，有的能达到1-2MB左右，这个其实就是我们平时常用的一些JS框架或者JS库合并后的一个文件。合并成这一个文件主要的原因有以下几点：

效率优化

我们在开发一个WEB工程的时候，常常需要引用大量的JS库，例如Vue，jQuery，以及相关的一些插件等，这些JS可能来自许多提供者。而在页面访问时，每次访问资源都要发起一个http请求，因此，即使文件已经缓冲，也需要发出一次http请求来确认文件是否被改变过。

如果js个数比较少，那么问题不大，但是当JS文件数目比较多的时候，就有可能会导致页面访问效率下降。如果能把所有的js都合并为一个文件，那么就可以节省几百毫秒，甚至几秒的时间，视网络状况而定。如果不需要做任何人为处理，就节省下来这些时间，无疑是相当有意义的。

JS顺序问题

如果说，效率问题还只是用户体验的问题，而JS引入顺序问题，就会导致你的页面是否可以执行的问题。我们知道，如果JS如果有依赖其它JS库，则被依赖的JS库就要放在依赖的JS库的前面，否则就会发生js错误。当引用的JS库比较小的时候，问题当然不大，但是做企业应用的时候，要用到的JS非常多，甚至在开发后期或维护期还会增加新的JS，这时稍有不慎，就会出现JS引入顺序问题。

为此，我们可以把工程中所有引用的JS资源都根据依赖关系，按一定的顺序合并放在一个JS文件中引用，同时由于所有的JS都只放入一个文件，因此，只会发出一次HTTP请求，我们再配合第三提供了文件压缩传输功能，可以保证最小的网络传输量，减少服务器带宽。

在什么情况下合并？

我们需要结合实际的应用场景来选择性的合并JS，一般来说是将网站中共用的一些JS合并，例如我的博客在所有的页面中都会用到jquery.js require.js wow.js，那么我就可以选择把这几个JS进行合并，减少HTTP请求

其他优化

CSS合并

除了JS以外，也可以把CSS进行合并，但也需要根据CSS原本的引入顺序进行合并，避免样式错误等问题

图片合并

对于网站中一些尺寸较小的图片，例如512X512像素以下的图片，可以把他们按照一定的排列顺序合并为一张，例如我博客中的浏览器内核检测页，里面会用到非常多的浏览器图片，我把它们都按照一定的排列顺序排列在一起

然后使用css的background设置背景图，然后通过设置background-position来调整背景图的位置，就可以大幅度减少HTTP请求，代码如下：

.bl_list .layui-card-body .header {
	width: 54px;
	height: 54px;
	float: left;
	overflow: hidden;
	box-sizing: border-box;
	background-image: url("https://ooo.0x0.ooo/2023/11/26/Ortwai.png");
	background-repeat: no-repeat;
	background-size: 1000% auto;
	background-origin: content-box;
	background-position: 0px 0px;
}

.bl_list .header.bl-0 {
	background-position: calc(0 * 54px) 0px;
}