# 组件库相关知识
# 组件库支持图片构建
# 背景
作为一个业务组件库,组件用到图片的可能性较大,例如默认背景图、logo 等。
最近在开发分享海报(sharePoster)组件的时候,就需要用到一些默认图片。开发的时候一般看的都是文档(storybook),是由 webpack 打包的,默认会处理静态资源,看起来没什么问题。
但是在发布的时候,我们并没有对静态资源的处理,而是保留了图片,构建后的代码也是保留了对图片的引用。
到了业务项目里面就有可能出问题了,我们项目对静态资源的处理很可能是不包含 node_modules 的,这时候就没有 loader 处理组件库对图片的引用了。
# 解决方案
# 方案一
业务项目中,增加对 school-web-ui 组件库静态资源引用的配置。
优点:成本最小。
缺点:
- 需要每个业务都对组件库的静态资源引用进行配置,感觉比较繁琐,
- 不清楚配置的情况下,遇到报错还得排查,浪费时间。
# 方案二
组件库引用图片的时候,全部先上传 cdn,引用 cdn 的地址。
优点:
- 业务无感。
- 减少组件库体积(图片还是比较占空间的)。
缺点:
- 需要提前了解这个约定,如果不知道这个约定,开发的时候没问题,要等到发布后,业务使用的时候才可能出现 bug,有不确定性。
- 引用图片都需要上传,影响开发体验,重复上传还会浪费 cdn 资源。
- cdn 的图片不允许跨站访问,开发环境是 localhost,还需要配置 nginx 跟 host。
# 方案三
组件库增加对图片的构建。
构建流程:
上面由红色框框出来的部分就是组件库在构建的时候增加的流程。
优点:
- 组件库开发无感
- 业务无感
- 减少组件库体积(上传后的图片会被删除)
- 合理利用资源,文件 hash 作为唯一标识,重复引用的资源能得到复用。
缺点:增加构建流程,构建时间变长。