需求背景
图片从cdn 获取，第一次加载时候图片闪烁问题，即用户首次打开小程序，图片图标下载很慢，用户体验感不好(因为大多数用户只使用一次，所以很有必要优化)。所以需要转成图片组件放在本地。项目使用 Taro2 开发。
项目 cdn 图片资源都是 http2(有并发请求)，请求域名 html 服务端渲染那块是 http1.1(并发有限，串行)。
方案可行性
考虑使用 svgr 将 svg 资源做成组件(最终没配置出来，不知道哪里出问题了，代码可以看参考资料中的仓库,Taro 官方 demo)
-
缩小尺寸。
svg到react组件的转换减少了一些多余的svg样式。 -
由于
sVg图像现在与js捆绑在一起，所以浏览器不会发出额外的请求来获取svg图像。
考虑使用 base64 配置压缩小图片
- 项目中大部分图片是较小的图片(
10k以内)
项目用到的图片不多，对于较大图片，直接手工操作压缩(其实也可以用一些插件)
- 考虑使用
Tinypng压缩png图片
方案
项目用到的图片资源不多，可以采用手动压缩
1、选择本地图片，大部分资源可以通过内置的压缩设置(10kb)转成 base64
2、大的(超过 10kb 很多，如几百 k) svg 资源使用 svgr 做成组件
3、其他资源(如大的 png)使用 Tinypng (或其他软件)压缩
过程
以下是我做方案的过程
1、预期 svg 格式大部分使用 svgr 处理， png 等其他格式使用 base64 编码以及图片压缩
因为大部分 svg 资源(小于压缩临界比 10k)是直接通过 src 引用的，而部分大 svg 资源需要通过组件化引用。所以需要具名导出(组件化)以及默认导出(src)
2、把 png 资源都用 svg 替代(figma 导出)，需要 UI 配合或自己用工具转换，(成本较大)
3、大文件本身的压缩，大文件数目不多，可以手动压缩 tinypng(不能压缩 svg) 或者其他插件。110kb 左右可以压成 27kb 左右。如果压缩后还是不理想，考虑将 png 格式换成 svg，使用 svrg 处理。
png 压缩效果较理想,(tinypng.com)
svg 压缩效果不理想(compress-or-die.com/svg)
参考文档
| 描述 | 链接 |
|---|---|
| 讲解录屏 | www.bilibili.com/video/BV1wA… |
| [Taro入门：5] 加载图片资源 | juejin.cn/post/696936… |
使用 svgr | blog.logrocket.com/how-to-use-… |
使用 scgr | blog.bitsrc.io/transform-a… |
Taro 使用第三方工具 | docs.taro.zone/docs/extern… |
CRA 创建的项目，webpack5 | gitee.com/zhu_zhi_kan… |
taro3 测试 svgr ，webpack5 | gitee.com/zhu_zhi_kan… |
taro3 测试 svgr ，webpack4 | gitee.com/zhu_zhi_kan… |
备注
静态资源目录可以调整得更规范些，之后的资源需要按照该规范引入(之前存在各处 cdn 当中，现在和代码放在一起，目录结构暂且和之前保持一致，后续层次比较混乱，后续可以优化)。
同时需要注意负优化问题，如 base64 设置过多后，返回的页面过大，得不偿失，所以需要均衡设置策略。
后记
虽然最后还是没有弄成功 svgr 的配置，但是折腾这个花了 3/4 的时间(6、7个小时)，包括解决 node-sass、python2.7 版本问题(项目需要 node 版本为 14.18.1，版本较低，有很多坑)，以及建立仓库对照测试 svgr，Taro3& webpack4|webpack5。
环境配置、工程化是非常吃经验，吃理解的东西，尤其是一些老项目，慢慢随着没人维护，没人讨论，很多坑得踩，希望能帮别人减少点踩坑时间吧：
解决 node-sass 报错、windows-build-tools 安装，没有找到 python2.7看这篇。
看着这两张图片(archived、deprecated)，想起我踩了这么久的坑，心力交瘁，有一种无法描述的感觉。萧索?物是人非?传承?旧的不去新的不来?
开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 4 天，点击查看活动详情
