Qiankun 样式隔离可省则省，但小心别踩坑

2024-02-18 04:58:27

Qiankun简介
作为当前最受欢迎的微前端框架之一，Qiankun的诞生旨在为开发者提供一种能够实现多应用协同开发且保证独立运行的解决方案。
通常，微前端框架需要解决两个关键问题：

应用运行独立性问题
应用样式隔离问题

值得一提的是，在项目构建中，Qiankun为开发人员提供了两种注册微应用的方法：
*沙盒应用（sandbox）：这种方式下，微应用以沙盒的方式运行，有着独立的全局状态，能够较好地解决样式隔离的问题。
*非沙盒应用（nosandbox）：非沙盒应用与沙盒应用的主要区别在于，在运行时二者的全局状态是共享的。Qiankun的非沙盒应用并未预设应用之间的样式隔离，可能导致一些样式问题。

Qiankun样式隔离方案的利弊

Qiankun的样式隔离方案提供两种选择，样式隔离方案和非样式隔离方案。

*样式隔离方案：

利：StyleSheet在隔离模式下，应用的样式仅在它自己的作用域内生效，有效避免了应用之间的样式污染。
弊：会增加构建包的体积，因为所有的样式文件都会被拷贝到子应用中。

*非样式隔离方案：

利：能够减小构建包的体积，因为样式文件无需拷贝到子应用中。
弊：当样式没有正确地作用于应用的元素时，很容易出现样式污染的问题。

何时使用样式隔离方案

Qiankun 样式隔离方案虽好，但并非所有场景都需要用到它。
在项目开发过程中，我们应当根据具体情况来决定是否需要使用样式隔离方案。以下列出了需要用到样式隔离方案的几种常见场景：

当子应用间存在样式冲突时。
当需要控制子应用样式的范围时。
当需要对子应用的样式进行定制时。

使用样式隔离方案时容易踩的坑

构建产物中容易产生大量重复的样式。由于Qiankun的样式隔离方案会将所有的样式文件拷贝到子应用中，当存在多个子应用时，这些样式文件就会在构建产物中重复出现，可能会增加构建产物的体积。
在不同应用之间可能会产生样式冲突。如果在不同的应用中使用了相同的样式规则，可能会导致样式冲突，因为不同的应用可能使用了不同的样式隔离方案。
使用样式隔离方案后，可能会使样式调试变得困难。由于样式隔离方案会将所有的样式文件拷贝到子应用中，当需要调试样式时，就需要在不同的子应用中寻找相应的样式文件，可能会增加调试的难度。