资源合并与压缩

什么是web前端

CS架构访问的是本地的资源

Web前端是动态地、增量地访问、加载资源的一个过程

请求过程中一些潜在的性能优化点 :joy:

• dns是否可以通过缓存减少dns查询时间？
• 网络请求的过程走最近的网络环境？
• 相同的静态资源是否可以缓存？
• 能否减少请求http请求大小？
• 减少http请求

• 服务端渲染

  
  

资源的合并与压缩

目的：

• 减少http请求数量
• 减少请求资源的大小

常见方式

• html压缩 （提升效果不太明显）
• css压缩
• js的压缩和混乱
• 文件合并
• 开启gzip

压缩

html压缩	css压缩	JS压缩
使用在线网站进行压缩	无效代码删除	无效字符的删除
nodejs提供了html-minifier工具	css语义合并	剔除注释
后端模板引擎渲染压缩		代码语义的缩减和优化
		代码保护

其中，CSS压缩和JS压缩是比较重要的，JS的压缩和混乱可以保护业务逻辑

合并

不合并文件的问题

image

合并文件

问题

• 首屏渲染问题 （合并后JS文件较大）
  • 使用框架的时候（如vue、react），页面的渲染是依赖于JS的，如果合并的JS较大，那么首屏渲染时间会比较大（如果没有使用SSR服务端渲染）
• 缓存失效问题

建议合并场景

• 公共库合并
• 不同页面的合并
• 见机行事，随机应变