网站静态资源优化方案

[yaolifeng0629]

Description

• 问题：

  • 目前网站的大多数图片，要么直接放到源代码中，要么后台返回 url，对于图片大小无法做限制，体验感很差且加载过慢等等。

• 方案：

  • 对于非关键的图片资源可放入到图床中，使用 CDN 的方式来使用。
  • 例如，可使用类似于阿里的 ImageView 规则 ，这样前端在一些非关键地方的图片做一些大小上的限制，更有利于网站体验。

---

• 示例：

  假设你有一个图片 URL https://example.com/image.jpg，你可以通过在 URL 后面添加参数来应用上述规则。例如：

  https://example.com/image.jpg?x-oss-process=image/resize,w_200,h_200/rotate,a_90/format,png
  

  这个 URL 会将图片缩放到 200x200 像素，顺时针旋转 90 度，并转换为 PNG 格式。

  • 组合使用

  你可以将多个规则组合在一起使用，通过 / 分隔。例如：

  https://example.com/image.jpg?x-oss-process=image/resize,w_200,h_200/crop,w_100,h_100,x_50,y_50/rotate,a_45/format,webp
  

  这个 URL 会将图片先缩放到 200x200 像素，然后从 (50, 50) 开始裁剪一个 100x100 像素的区域，顺时针旋转 45 度，最后转换为 WebP 格式。