资源合并与压缩

发表于 | 分类于

参考资料：
[什么是 CDN–阿里云][1]

  • 理解减少 HTTP 请求数量和减少请求资源大小的两个优化点
  • 掌握压缩与合并的原理
  • 掌握通过在线网站和 fis3 两种实现压缩的与合并的方法

HTTP 请求过程及潜在的性能优化点

❓ 浏览器的一个请求从发送到返回都经历了什么？

❓ DNS 是否可用通过魂村减少 DNS 查询时间

❓ 网络请求的过程走最近的网络环境？

❓ 相同的静态资源是否可用缓存

❓ 是否减少请求 HTTP 请求大小？

❓ 减少 HTTP 请求

❓ 服务端渲染

Google 首页案例学习

  • HTML 压缩
  • CSS 压缩
  • JS 的压缩和混淆
  • 文件合并
  • 开启 gzip

HTML 压缩

HTML 代码压缩就是压缩这些在文本文件中有意义，但是在 HTML 中不显示的字符，包括空格、制表符、换行符等，还有一些其他有意义的字符，如 HTML 注释也可以压缩。

压缩的方法：

  • 使用在线网站进行压缩
  • nodejs 提供了 html-minifier 工具
  • 后端模板引擎渲染压缩

CSS 压缩

  • 无效代码删除
  • css 语义合并

压缩的方法：

  • 使用在线网站进行压缩
  • nodejs 提供了 html-minifier 工具
  • 使用 clean-css

JS 的压缩和混淆

  • 无效字符的删除
  • 剔除注释
  • 代码语义的缩减和优化
  • 代码保护

压缩的方法：

  • 使用在线网站进行压缩
  • nodejs 提供了 html-minifier 工具
  • 使用 uglifyjs2

文件合并

![][2]

文件合并的弊端：

  • 首屏渲染问题
  • 缓存失效问题 - 增加 MD5 戳，用来标识文件是否更改 - 采用文件合并会存在大面积缓存失效

文件合并的策略：

  • 公共库合并
  • 不同页面的合并 - 单页应用被路由到的时候才去请求 JS
  • 见机行事，随机应变

合并的方法：