茅塞顿开系列——webpack、parcel、gulp、grunt作用与效率对比

一、基础解释：

实际项目中，为什么多个css、js文件要实现合并与压缩？

       Web性能优化最佳实践中最重要的一条是减少HTTP请求。而减少HTTP请求的最主要的方式就是，合并并压缩JavaScript和CSS文件。

　　关于编写CSS时，我们应注意通过一些细节来控制CSS文件的大小，比如：全局样式、继承样式、缩写样式，空格、注释等；同时你也可以通过在线工具对你的CSS文件进行压缩，来减少CSS文件的大小，但压缩后的CSS文件在可维护性、识别性方面变的特别弱。但更复杂的情况是，如果你的页面里面引用了多个CSS、多个JS文件时就可能处理不好。

       多个CSS、多个JS文件进行自动合并、压缩的原理：你的网站引用了a.css和b.css两个css文件，php或javascrip程序则将a.css和b.css自动合并、压缩成c.css文件。

这样做有两大好处：
1、页面加载的时候只请求程序合并压缩后的c.css文件，这就减少了http对css文件的请求次数！
2、不用对a.css和b.css进行压缩，保持了a.css和b.css的易编辑性、易识别性。

（1）JS压缩和混淆：

压缩：删除代码中所有注释、跳格符号、换行符、无用的空格，从而压缩JS文件大小；

混淆：经过编码将变量和函数原命名改为毫无意义的命名以防他人窃取JS源码。

作用：

【1】帮助开发人员减小文件体积；

【2】减小了网络传输和宽带占用；

【3】减小了服务器的处理压力；

【4】提高了页面渲染显示的速度；

【5】避免网站上的JS源码被他人窃取。

（2）CSS压缩

压缩：删除空格、去掉换行、去掉多余分号等；

还可以通过CSS代码合并、CSS代码优化、CSS初始化等减少代码量从而减少文件大小。

作用：

【1】帮助开发人员减小文件体积；

【2】减小了网络传输和宽带占用；

【3】减小了服务器的处理压力；

【4】提高了页面渲染显示的速度。

-----------------------------------------待我续更--------------------------------------------------