1 资源的合并与压缩
资源合并 => 减少http的请求数量
资源压缩 => 减少请求资源的大小
2. 压缩
2.1 Html压缩
HTML代码压缩就是压缩这些在文本文件中有意义(编辑代码时有意义),但是在 HTML 中不显示的字符,包括空格,制表符,换行符等,还有一些其他意义的字符,如 HTML注释 也可以被压缩。
2.2 Css压缩
-
无效代码删除
-
Css语义合并
2.3 Js的压缩和混乱
-
无效字符删除,例如回车,空格
-
剔除注释
-
代码语义的缩减和优化,比如一些变量的长度的缩短,对无效代码的优化
-
代码保护,js压缩使代码混乱,不可读
-
删除log
一般来说,css 和 js的压缩的意义比html更有意义
2.4 如何压缩
- 运用在线网站压缩
- 利用一些压缩工具,比如node.js提供的html-minifier对html压缩
- 利用构建工具,例如grunt,glup,webpack等
- 现在大多都用webpack进行构建压缩
3 文件合并
如上图
不合并的缺陷
- 文件与文件之间有插入的上行请求,增加了N-1个网络延迟
- 受丢包问题影响更严重
- 经过代理服务器时可能会被断开
合并之后存在的问题
- 首屏渲染的问题 合并后的文件显然会比合并前大,如果渲染依赖 js 的话,如果js 请求慢的话,就会有影响。
- 缓存失效的问题 几个被合并的js中任一个js有变动,都会导致合并文件有变动,会导致合并 js 失效,前面的可能只会导致a.js失效
如何优化
- 公共库合并一个文件,业务代码的合并,公共库改动不大
- 不同页面的合并,单页应用,当路由到某个页面的时候,才去加载这个页面
- 浏览器同一域名下并发请求数量是有限的,从这方面讲合并是有必要的
- 开启gzip