减少http请求等于合并请求资源,减少请求资源大小等于压缩资源。
复制代码
合并请求
合并请求是指将多个请求合并成一个请求,下图可直观看出多个请求的缺点
不合并请求缺点:- 增加了N-1个网络延迟
- 受丢包问题影响更严重
- 经过代理服务器时可能被断开
既然合并请求如此之好,为何不写一个大的js将所有的js合并到一起?合并请求也是有缺点的现在大量的单页面应用Vue/React 合并js后会比之前的js大,从而会增加首屏渲染的时间 ,也会导致一部分缓存失效,重新请求所有js脚本的情况。所以我们可以见机行事(^__^) 。
- 可以将公共库进行合并
- 可以将不同页面的js合并
当然了这些合并在webpack和fis3都是可以实现的。
压缩资源
压缩资源是指在html/js/css文件中有些字符是对渲染无意义的比如(空格/换行符/注释)
压缩后减小了文件的体积从而减少了文件的下载速度,也起到了代码保护的作用。
复制代码
html压缩可以通过:
- 在线网站
- gzip工具进行压缩
css压缩的好处除此之外,还可以将无效的代码删除以及css语义合并。
css压缩的方式:
- 通过在线网站压缩
- 使用html-minifier对css进行压缩
- 使用clean-css对css进行压缩
js压缩的方式:
- 通过在线网站压缩
- 使用html-minifier对js进行压缩
- 使用uglifyjs2对js进行压缩