# 资源的合并与压缩

# http 请求的过程以及潜在的性能优化

需要优化 http 请求相关,首先需要知道一个 http 请求到底经历了哪些过程(可以看 http 模块):

在这里插入图片描述

可以看到有下面的一些优化点:

  • 减少 dns 查询时间
  • 网络请求的过程走最近的网络环境(cdn 加速)
  • 相同的静态资源进行缓存
  • 减少 http 请求大小
  • 减少 http 请求次数
  • 服务端渲染

# HTML 压缩

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

# 如何进行 HTML 压缩

  • 使用在线网站进行压缩
  • 使用 nodejs 的 html-minfier 工具
  • 后端模板引擎渲染压缩 (ejs 模板等)

# css 压缩

主要做下面工作:

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

# 如何进行 css 压缩

  • 使用在线网站压缩
  • 使用 html-minifier 对 HTML 中的 css 进行压缩
  • 使用 clean-css 对 css 进行压缩

# js 压缩与混乱

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

# 如何进行 js 压缩和混乱

  • 使用在线网站进行压缩
  • 使用 html-minifier 对 HTML 中的 js 进行压缩
  • 使用 uglifyjs2 对 js 进行压缩

# 文件合并

在这里插入图片描述

可以看到不合并请求可能会导致下面问题:

  • 文件与文件之间有插入的上行请求,增加了 N-1 个网络延迟
  • 受丢包问题影响更严重
  • 经过代理服务器时可能会被断开

文件合并存在的问题:

  • 首屏渲染问题
  • 缓存失效问题

多个文件压缩在一起可能会导致首屏加载慢的问题,以及如果其中一个文件改变那么根据文件生成的 hash 等字符串改变或重新请求资源,导致缓存失效。 我们可以优化:

  • 公共库合并
  • 不同页面的合并
  • 根据实际应用进行文件合并

如何进行文件合并:

  • 使用在线网站进行文件合并
  • 使用 nodejs 实现文件合并(不同的构件工具)

评 论:

更新: 11/21/2020, 7:00:56 PM