Google首页案例学习
- HTML压缩
- CSS压缩
- JS的压缩和混乱
- 文件合并
- 开启gzip
HTML压缩
HTML代码压缩就是压缩这些在文本文件中有意义，但是在HTML中不显示的字符，包括空格、制表符、换行符等，还有一些其他意义的字符，如HTML注释也可以被压缩
如何进行HTML压缩
- 使用在线网站进行压缩
- Node.js提供了
html-minifier工具(Node.js的压缩方案： 1构建阶段 2服务端) - 后端模版引擎渲染压缩
CSS压缩
- 无效代码删除
- css语义合并
如何进行css压缩
- 使用在线网站进行压缩
- 使用
html-minifier对html中的css进行压缩 - 使用clean-css对css进行压缩
JS压缩与混乱
- 无效字符的删除
- 剔除注释
- 代码语义的缩减和优化
- 代码保护
如何进行JS压缩
- 使用在线网站进行压缩
- 使用
html-minifier对html中的js进行压缩 - 使用 uglifyjs2 对js代码进行压缩
文件合并
不合并带来的弊端：
- 文件与文件之间有插入的上行请求，增加了 N-1 个网络延迟
- 受丢包问题影响更严重
- 经过代理服务器时可能会被断开
合并所带来的问题思考：
- 首屏渲染问题
- 缓存失效问题
改良方案：
- 公共库合并
- 不同页面的合并
- 见机行事，随机应变
如何进行文件合并
- 使用在线网站进行文件合并
- 使用Node.js实现文件合并(webpack、gulp)