目录
目标
- 理解减少http请求数量和减少请求资源大小两个优化要点
- 掌握压缩与合并的原理
- 掌握通过在线网站和fis3两种实现压缩与合并的方法
浏览器的一个请求从发送到返回都经历了什么？
HTML压缩
一个简单的计算：
google的流量，占到整个互联网的40%，如果google每1MB请求减少一个字节，每年可以节省500TB流量
如何进行html压缩
- 使用在线网站进行压缩
- nodejs提供了html-minifier工具
- 后端模板引擎渲染压缩
CSS压缩
处理原则
- 无效代码删除
- CSS语义合并
如何进行CSS压缩
- 使用在线网站进行压缩
- 使用html-minifier对html中的css进行压缩
- 使用clean-css对css进行压缩
JS压缩与混乱
处理原则
- 无效字符的删除
- 剔除注释
- 代码语义的缩减和优化
- 代码保护
如何进行JS压缩和混乱
- 使用在线网站进行压缩
- 使用html-minifier对html中的js进行压缩
- 使用uglifyjs2对js进行压缩
文件合并
优点
- 文件与文件之间有插入的上行请求，增加了N-1个网络延迟
- 受丢包问题影响更严重
- keep-alive 经过代理服务器时可能会被断开
缺点
- 首屏渲染问题
- 缓存失效问题
解决办法
- 公共库合并
- 不同页面的合并
- 见机行事，随机应变
如何进行文件合并
- 使用在线网站进行文件合并
- 使用nodejs实现文件合并
新闻列表页面实战
新闻列表页面代码开发
使用网站进行压缩与合并
使用fis进行自动化的压缩与合并
fis3使用
使用过程
- 单文件编译过程
- 打包过程
