组件库CSS按需引入方案分析

fishThing
176 阅读3分钟

许多朋友的项目中都包含组件库，但是在实现按需引入的时候，可能更多的都是考虑逻辑，而忽略的样式本身也要实现按需引入，所以本篇文章，将会详细探讨一下组件库中 CSS 实现按需引入的方案，以 React 为例

在市面上众多组件库中，CSS 按需引入的方式按照本质大概分为三种：

1. 样式和逻辑分离：

过程

在打包后，每个组件的输出文件都包括单独的 JS 文件和 CSS 文件，不过在 JS 中并不引入 CSS 文件，所以使用者在不加任何处理的情况下，需要分别添加每个组件的逻辑和样式代码，如下：

import { Button } form "My-Ui/Button/Button.js"
import "My-Ui/Button/Button.css"

这样肯定会为使用者带来较大的心理负担，所以市面上针对于此也开发了插件：babel-plugin-import，可以在编译阶段辅助生成引入样式的 import 语句

优点

  1. 不限制组件库的技术栈，因为 CSS 文件是完全单独独立的，同一份样式文件可以作用于多个框架的组件库中

  2. 可以对外部直接提供less等样式文件，便于组件库样式一键切换

缺点

  1. 需要使用者手动引入 CSS 文件

2. 样式和逻辑结合：

过程

天然支持样式的按需引入，使用时只需要引入对应的逻辑文件即可，目前有两种方案：

  1. CSS In JS：例如 Style-Component 等 CSS in JS 方案，天然与逻辑文件进行绑定
  2. 将 CSS 打包到 JS 中：在组件库开发时使用 import引入样式文件，在 Webpack 中可通过style-loader将 CSS 代码打包进逻辑文件中

优点

  1. 便于使用者操作，只需要import组件即可使用
  2. 天然支持按需加载，因为样式与逻辑都在同一个文件之中

缺点

  1. 无论是 CSS in JS 还是 CSS 打包进 JS，所引用的插件都会有额外的运行时，会略微影响组件库的性能

3. 样式和逻辑关联：

过程

在组件库开发时与 CSS 打包至 JS 中相似，依旧使用 import 引入样式文件，不过打包后会生成独立的逻辑与样式文件，但是打包会在逻辑文件中保留对应的 import语句

优点

1.使用者只需要 import组件即可使用

  1. 支持按需加载

缺点

  1. 如果使用了 CSS 预处理语言，打包编译的流程会更加复杂，因为需要让逻辑文件通过import关联正确的 CSS 文件

总结

样式与逻辑分析样式与逻辑结合样式和逻辑关联
开发打包流程中等简单复杂
输出文件样式与逻辑文件逻辑文件样式与逻辑文件
使用方法分别引入 JS 和 CSS 文件只引入 JS只引入 JS
按需加载需要插件，如：babel-plugin-import支持支持
性能影响无带额外 runtime无

其实关于这几种方案的区别还可以从 SSR 和性能优化的影响两方面去说，不过大部分同学的组件库项目都不涉及这两方面，所以这里就不进行赘述，想要详细了解的可以参考文章：React组件库CSS样式方案分析

avatar
文章
阅读
粉丝