引子

组件化项目可能会存在这样的问题：不同组件引用相同的图片，这种情况怎么处理？相同的图片是存储一份还是存储多份？

方案1

存储一份，比如我们可以打造一个基础组件，这个组件用来存储该项目用到的所有图片，其他组件直接引用该组件内的图片。

  • 优点：只存储了一份图片，适合项目内图片重用多、且图片较大的情况；
  • 弊端：
    • 维护麻烦，假如该项目有 20 个 iOS 开发，那么这 20 个 iOSer 可能同时都会修改图片组件，很容易引发冲突，另外开发人员的职责也不够清晰；
    • 图片组件复用度低，比如新开启的一个项目需要使用组件 a，组件 a 有引用图片组件，但一般不会直接复用原有项目的图片组件（原项目图片组件内的图片很多），需要另外新建一个图片组件；

方案2

存储多份，每个组件都将各自使用的图片以 bundle 的形式存储在组件内部，各自负责，我知道的有几个公司也都是以这个方案为主，包括我目前公司也是这么处理的。

  • 优点：
    • 解耦合，方便维护；
    • 组件方便复用，比如公司多个项目使用了相同的功能组件，直接拿过去用即可，不用担心图片显示问题；
  • 弊端：会牺牲一些内存，但图片小的话影响可以忽略不计；

iconfont

上述两个方案各有优缺点，那么还有没有优化空间呢？在耦合度和内存之间找寻一个适当的点？

其实还可以使用 iconfont 矢量图，可以在网站 https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2 上下载一些图片素材，然后将图片素材中的 .ttf 文件拉到项目中，不再使用 @2x，@3x 这种图片格式，而是通过 iconfont 的形式创建图片。

通过 iconfont 创建图片有什么好处呢？

  • 瘦包，字体文件比图片文件要小很多，因此在内存方面会有所改善；
  • 增加复用性，开发可以根据设计图灵活修改图片颜色，即一个 .ttf 文件可能会使用多次；
  • iconfont 相对图片文件更为保真；
  • 维护成本相对较低，直接让设计同学帮忙做好图标，后续如果有颜色或者大小修改，直接修改代码即可，开发和设计都更为方便；

目前暂未发现明显的缺陷，看网上有人说，iconfont 图标的绘制规则有一些限制，比如渐变、模糊、阴影这些可能会导致上传 iconfont 失败，但这个影响不大。

在 iOS 开发中，iconfont 的使用较为简单，可以直接参考以下博客：