前端优化——减少http请求和减少请求资源大小

减少http请求等于合并请求资源,减少请求资源大小等于压缩资源。
复制代码

合并请求

合并请求是指将多个请求合并成一个请求,下图可直观看出多个请求的缺点

不合并请求缺点：

1. 增加了N-1个网络延迟
2. 受丢包问题影响更严重
3. 经过代理服务器时可能被断开

既然合并请求如此之好，为何不写一个大的js将所有的js合并到一起？合并请求也是有缺点的现在大量的单页面应用Vue/React 合并js后会比之前的js大，从而会增加首屏渲染的时间 ，也会导致一部分缓存失效，重新请求所有js脚本的情况。所以我们可以见机行事(^__^) 。

1. 可以将公共库进行合并
2. 可以将不同页面的js合并

当然了这些合并在webpack和fis3都是可以实现的。

压缩资源

压缩资源是指在html/js/css文件中有些字符是对渲染无意义的比如（空格/换行符/注释）

压缩后减小了文件的体积从而减少了文件的下载速度，也起到了代码保护的作用。
复制代码

html压缩可以通过：

1. 在线网站
2. gzip工具进行压缩

css压缩的好处除此之外，还可以将无效的代码删除以及css语义合并。

css压缩的方式：

1. 通过在线网站压缩
2. 使用html-minifier对css进行压缩
3. 使用clean-css对css进行压缩

js压缩的方式：

1. 通过在线网站压缩
2. 使用html-minifier对js进行压缩
3. 使用uglifyjs2对js进行压缩

转载于:https://juejin.im/post/5c7b9890e51d45457d1988b9