使用CSS代码拆分释放最佳Web性能。 学习优化样式，减少加载时间并在全球范围内提供卓越用户体验的基本技术和工具。
CSS拆分规则：通过面向全球受众的智能代码拆分，彻底改变Web性能
在现代Web开发领域，性能至关重要。加载速度慢的网站会疏远用户，阻碍转化，并严重影响品牌的全球影响力。虽然JavaScript经常在优化讨论中占据主导地位，但经常被忽视的层叠样式表（CSS）巨头可能同样是一个重要的瓶颈。这就是“CSS拆分规则”（或更广泛地说是CSS代码拆分）的概念作为一项关键策略出现的地方。它不是正式的W3C规范，而是一种广泛采用的最佳实践，涉及将CSS智能地划分为更小、更易于管理的块，以优化加载和渲染过程。对于具有不同网络条件和设备能力的全球受众，采用此“CSS拆分规则”不仅仅是一种优化；对于在全球范围内提供始终流畅且引人入胜的用户体验来说，这是一种必然要求。
了解CSS代码拆分：不仅仅是“规则”
CSS代码拆分的核心是将大型的、单体的CSS文件分解为多个、更小、更有针对性的文件。“规则”方面意味着一个指导原则：仅加载当前视图或组件绝对需要的CSS。想象一个拥有数百个页面和复杂组件的庞大网站。如果不进行拆分，每次页面加载可能都需要下载整个样式表，其中包括站点中用户当时甚至看不到的部分的样式。这种不必要的下载会膨胀初始有效负载，延迟关键渲染，并消耗宝贵的带宽，这在互联网基础设施较慢的地区尤其有害。
传统的Web开发通常将所有CSS捆绑到一个大型文件style.css中。虽然在小型项目中易于管理，但随着应用程序的增长，这种方法很快变得难以为继。“CSS拆分规则”挑战了这种单一的思维模式，提倡一种模块化的方法，其中样式被解耦并按需加载。这不仅仅是关于文件大小；而是关于整个渲染管道，从浏览器最初的请求到屏幕上像素的最终绘制。通过战略性地拆分CSS，开发人员可以显着减少“关键渲染路径”，从而实现更快的首次内容绘制（FCP）和最大内容绘制（LCP）指标，这些指标是感知性能和用户满意度的关键指标。
为什么CSS代码拆分对于全球Web性能至关重要
实施CSS代码拆分的好处远远超出了仅仅减少文件大小的范围。它们全面地提升了Web体验，尤其是在考虑到多样化的全球用户群时。
大幅提升初始加载性能
- 减少初始有效负载：浏览器不再下载一个庞大的CSS文件，而是仅获取初始视图立即需要的样式。这大大减少了首次请求时传输的数据量，从而使用户能够更快地启动。对于数据计划有限或延迟较高的地区的用户来说，这可以转化为显着的成本节省和更少令人沮丧的体验。
- 更快的首次内容绘制（FCP）：FCP衡量何时在屏幕上绘制第一个像素的内容。通过仅提供初始渲染所需的关键CSS，浏览器可以更快地显示有意义的内容。这使得网站对用户来说感觉更快，即使在所有样式都加载完毕之前。在全球范围内，网络条件差异很大，快速的FCP可能是用户留在网站上或放弃网站之间的区别。
- 优化最大内容绘制（LCP）：LCP衡量何时最大的内容元素（如图像或文本块）变得可见。如果负责设置此元素样式的CSS隐藏在一个大型的、未优化的文件中，则LCP将被延迟。代码拆分确保关键内容的样式优先考虑，使主要内容出现得更快，并提高用户对页面加载速度的感知。
增强可扩展性和可维护性
随着应用程序的增长，它们的样式表也会增长。一个单一的、大型的CSS文件变得难以管理。一个区域的更改可能会无意中影响另一个区域，导致回归并增加开发时间。代码拆分促进了一种模块化的架构，其中样式与其影响的组件或页面紧密耦合。
- 基于组件的开发：在React、Vue和Angular等现代框架中，应用程序由可重用的组件构建。代码拆分允许每个组件携带自己的样式，确保在加载组件时，仅获取其相关的CSS。这种封装可以防止样式冲突，并使组件真正可移植。
- 更轻松的调试和开发：当样式被隔离时，调试变得更加简单。开发人员可以快速查明较小的、专用文件中的样式问题的根源，而不是筛选数千行全局CSS。这加快了开发周期，并减少了影响整个站点的错误的发生率。
- 减少“死”CSS：随着时间的推移，全局样式表会累积“死”或未使用的CSS规则。代码拆分，尤其是与PurgeCSS等工具结合使用时，通过仅包含特定视图或组件真正需要的内容来帮助消除这些未使用的样式，从而进一步减小文件大小。
改善不同网络中的用户体验
全球受众呈现出各种各样的网络速度和设备功能。光纤互联网的主要城市区域的用户与依赖较慢的移动连接的偏远乡村的用户体验将大不相同。
- 对网络延迟的弹性：较小的、并行CSS请求对高网络延迟更具弹性。与其进行一次长时间的下载，不如更快地完成多次较小的下载，尤其是在HTTP/2上，HTTP/2擅长多路复用并发流。
- 减少数据消耗：对于按流量计费的连接上的用户，减少传输的数据量是一个直接的好处。这在世界许多地方尤其重要，在这些地方，移动数据可能很昂贵或有限制。
- 一致的体验：通过确保最关键的样式在任何地方都能快速加载，代码拆分有助于提供更一致和可靠的用户体验，而无论地理位置或网络质量如何。这可以培养对网站的信任和参与度，从而建立更强大的全球品牌形象。
更好的缓存利用率
当大型的、单体的CSS文件发生更改时，即使是轻微的更改，浏览器也必须重新下载整个文件。通过代码拆分，如果仅更改了一个小组件的CSS，则只需重新下载该特定的小CSS文件。应用程序的其余CSS（如果未更改）将保留在缓存中，从而显着减少后续页面加载时间和数据传输。这种增量缓存策略对于优化全球范围内的回头客体验至关重要。
实施CSS代码拆分的常见场景
确定在何处以及如何拆分CSS是关键。以下是有效应用“CSS拆分规则”的常见场景：
基于组件的样式
在现代JavaScript框架（React、Vue、Angular、Svelte）中，应用程序围绕组件构建。理想情况下，每个组件都应是独立的，包括其样式。
- 示例：一个
Button组件应仅在页面上渲染Button时加载其样式（button.css）。类似地，一个复杂的ProductCard组件可能会加载product-card.css。 - 实施：通常通过CSS模块、CSS-in-JS库（例如，Styled Components、Emotion）或通过配置构建工具来提取组件特定的CSS来实现。
特定于页面或特定于路由的样式
应用程序中的不同页面或路由通常具有整个站点不共享的独特布局和样式要求。
- 示例：电子商务站点的“结帐页面”的样式可能与其“产品列表页面”或“用户个人资料页面”的样式大不相同。在产品列表页面上加载所有结帐样式是一种浪费。
- 实施：这通常涉及基于当前路由动态导入CSS文件，通常由路由库与构建工具配置结合使用来促进。
关键CSS提取（首屏样式）
这是一种专门的拆分形式，专注于立即视口。“关键CSS”是指在没有unstyled content闪烁 (FOUC) 的情况下渲染页面初始视图所需的最小CSS。
- 示例：导航栏、英雄部分以及页面加载后立即可见的基本布局。
- 实施：工具分析页面的HTML和CSS以识别和提取这些关键样式，然后将这些样式直接内联到HTML的
<head>标记中。这可确保在外部样式表完全加载之前，尽可能快地进行初始渲染。
主题和品牌样式
支持多种主题（例如，亮/暗模式）或不同品牌标识的应用程序可以从拆分中受益。
- 示例：一个允许为不同客户端进行白标的B2B SaaS平台。可以动态加载每个客户端的品牌样式。
- 实施：可以保持不同主题或品牌的样式表分开，并根据用户偏好或配置有条件地加载。
第三方库样式
外部库（例如，Material-UI、Bootstrap或图表库等UI框架）通常带有自己的扩展样式表。
- 示例：如果仅在分析仪表板上使用图表库，则应仅在该仪表板被访问时才加载其CSS。
- 实施：可以将构建工具配置为将特定于供应商的CSS放入其自己的捆绑包中，然后仅在加载该库的相应JavaScript捆绑包时才加载该捆绑包。
响应式设计断点和媒体查询
虽然通常在单个样式表中处理，但高级场景可能涉及根据媒体查询拆分CSS（例如，仅在满足这些条件时才加载专门用于打印或非常大的屏幕的样式）。
- 示例：可以使用
<link rel="stylesheet" media="print" href="print.css">加载特定于打印的样式（print.css）。 - 实施：在
<link>标记上使用media属性允许浏览器延迟下载与当前媒体条件不匹配的CSS。
实施CSS拆分规则的技术和工具
有效实施CSS代码拆分通常依赖于复杂的构建工具和巧妙的架构决策。
构建工具集成
现代JavaScript捆绑器是自动CSS代码拆分的骨干。它们处理您的源文件，了解依赖关系，并生成优化的输出捆绑包。
- Webpack：
mini-css-extract-plugin：这是将CSS从JavaScript捆绑包提取到单独的.css文件中的首选插件。这至关重要，因为默认情况下，Webpack通常将CSS直接捆绑到JavaScript中。optimize-css-assets-webpack-plugin（或Webpack 5+的css-minimizer-webpack-plugin）：用于缩小和优化提取的CSS文件，从而进一步减小其大小。SplitChunksPlugin：虽然主要用于JavaScript，但也可以配置SplitChunksPlugin来拆分CSS块，尤其是在与mini-css-extract-plugin结合使用时。它允许定义用于分离供应商CSS，公共CSS或动态CSS块的规则。- 动态导入：使用
import()语法表示JavaScript块（例如，import('./my-component-styles.css')）将告诉Webpack为该CSS创建一个单独的捆绑包，并按需加载。 - PurgeCSS：通常作为Webpack插件集成，PurgeCSS扫描您的HTML和JavaScript文件，以识别并删除捆绑包中未使用的CSS规则。这大大减小了文件大小，特别是对于Bootstrap或Tailwind CSS等框架，在这些框架中，可能存在许多实用程序类，但并非所有实用程序类都已使用。
- Rollup：
rollup-plugin-postcss或rollup-plugin-styles：这些插件允许Rollup处理CSS文件并将其提取到单独的捆绑包中，类似于Webpack的mini-css-extract-plugin。Rollup的优势在于为库和独立组件生成高度优化，更小的捆绑包，使其非常适合模块化CSS拆分。
- Parcel：
- Parcel提供零配置捆绑，这意味着它通常会自动处理CSS提取和拆分。如果您在JavaScript文件中导入CSS文件，Parcel通常会检测到它，对其进行处理并创建一个单独的CSS捆绑包。它对简单性的关注使其成为优先考虑快速开发的项目的有吸引力的选择。
- Vite：
- Vite在内部使用Rollup进行生产构建，并提供令人难以置信的快速开发服务器体验。它本质上支持CSS处理，并且像Parcel一样，旨在在使用标准CSS导入时默认将CSS提取到单独的文件中。它还可以与CSS模块和CSS预处理器无缝协作。
特定于框架和架构的方法
除了常规捆绑器外，集成到框架中的特定方法还提供了管理和拆分CSS的独特方法。
- CSS模块：
- CSS模块提供范围限定的CSS，这意味着类名的范围在本地范围内，以防止冲突。当您将CSS模块导入JavaScript组件时，构建过程通常会将该CSS提取到与该组件的捆绑包相对应的单独文件中。通过确保组件级样式隔离和按需加载，这本身就支持“CSS拆分规则”。
- CSS-in-JS库（例如，Styled Components、Emotion）：
- 这些库允许您使用带标记的模板文字或对象直接在JavaScript组件中编写CSS。一个关键的优势是样式会自动绑定到组件。在构建过程中，许多CSS-in-JS库都可以提取用于服务器端渲染的关键CSS，还可以生成唯一的类名，从而有效地在组件级别拆分样式。这种方法自然地与仅在存在相应组件时才加载样式的想法保持一致。
- 实用程序优先的CSS框架（例如，具有JIT/Purge的Tailwind CSS）：
- 虽然像Tailwind CSS这样的框架似乎通过具有单个庞大的实用程序样式表而与“拆分”的想法背道而驰，但它们现代的Just-In-Time（JIT）模式和清除功能实际上实现了类似的效果。JIT模式会在您编写HTML时按需生成CSS，仅包括您实际使用的实用程序类。当在生产构建中与PurgeCSS结合使用时，将删除任何未使用的实用程序类，从而生成一个非常小，高度优化的CSS文件，该文件有效地充当针对特定使用的类量身定制的“拆分”版本。这不是拆分为多个文件，而是拆分单个文件中未使用的规则，从而通过减少有效负载来实现类似的性能优势。
关键CSS生成工具
这些工具专门用于帮助提取和内联“首屏”CSS，以防止FOUC。
- Critters / Critical CSS：像
critters（来自Google Chrome Labs）或critical（一个Node.js模块）这样的工具会分析页面的HTML和链接的样式表，确定哪些样式对于视口至关重要，然后将这些样式直接内联到HTML的<head>中。然后可以异步加载其余CSS，从而减少渲染阻塞时间。这是提高初始加载性能的强大技术，尤其是在连接速度较慢的全球用户上。 - PostCSS插件：PostCSS是一种使用JavaScript插件转换CSS的工具。存在许多用于优化、自动添加前缀以及提取关键CSS或基于规则拆分样式表等任务的插件。
实施CSS拆分规则：一个实际的工作流程
采用CSS代码拆分涉及一系列步骤，从识别优化机会到配置构建管道。
1. 分析您当前的CSS加载
- 使用浏览器开发人员工具（例如，Chrome DevTools的“覆盖率”标签）来识别未使用的CSS。这将向您显示当前样式表在给定页面上实际使用了多少。
- 使用Lighthouse等工具分析您的页面加载性能。密切关注诸如FCP，LCP和“消除渲染阻塞资源”之类的指标。这将突出显示您当前CSS的影响。
- 了解您应用程序的架构。您是否正在使用组件？是否有不同的页面或路线？这有助于确定自然的拆分点。
2. 确定拆分点和策略
- 组件级别：对于基于组件的应用程序，旨在将其CSS与其相应的组件捆绑在一起。
- 路由/页面级别：对于具有不同路由的多页面应用程序或单页面应用程序，请考虑每个路由加载特定的CSS捆绑包。
- 关键路径：始终旨在提取和内联初始视口的CSS。
- 供应商/共享：将第三方库CSS和应用程序多个部分中使用的常见样式分离到缓存的供应商块中。
3. 配置您的构建工具
- Webpack：
- 在您的Webpack配置中安装和配置
mini-css-extract-plugin以提取CSS。 - 使用
SplitChunksPlugin为供应商CSS和动态CSS导入创建单独的块。 - 集成
PurgeCSS以删除未使用的样式。 - 为CSS文件或导入CSS的JavaScript文件设置动态
import()（例如，如果Component.js导入Component.css，则为const Component = () => import('./Component.js');）。
- 在您的Webpack配置中安装和配置
- 其他捆绑器：有关其特定的CSS处理配置，请查阅Parcel，Rollup或Vite的文档。许多产品都提供自动拆分或简单的插件。
4. 优化加载策略
- 内联关键CSS：使用工具生成关键CSS并将其直接嵌入到您的HTML
<head>中。 - 异步加载：对于非关键CSS，请异步加载它以防止渲染阻塞。一种常见的技术是使用
<link rel="preload" as="style" onload="this.rel='stylesheet'">或polyfill.io的loadCSS模式。 - 媒体查询：利用
<link>标记上的media属性有条件地加载CSS（例如，media="print"）。 - HTTP/2推送（谨慎使用）：虽然从技术上讲是可能的，但由于缓存问题和浏览器实施复杂性，HTTP/2推送已不受欢迎。浏览器通常更擅长预测和预加载资源。首先专注于浏览器本机优化。
5. 测试，监控和迭代
- 实施拆分后，请彻底测试您的应用程序是否具有FOUC或视觉回归。
- 使用Lighthouse，WebPageTest和其他性能监视工具来衡量对FCP，LCP和总体加载时间的影响。
- 监视您的指标，尤其是来自不同地理位置和网络条件的用户。
- 随着应用程序的发展，不断完善您的拆分策略。这是一个持续的过程。
全球受众的高级注意事项和最佳实践
虽然CSS拆分的核心概念很简单，但是实际的实现，特别是对于全球范围的受众，涉及细微的考虑。
平衡粒度：拆分的艺术
在最佳拆分和过度拆分之间存在一条细线。太多的微小CSS文件可能会导致过多的HTTP请求，尽管可以通过HTTP/2缓解，但仍然会产生开销。相反，太少的文件意味着更少的优化。“CSS拆分规则”不是关于任意碎片化，而是智能分块。
- 考虑模块联合：对于微前端架构，模块联合（Webpack 5+）可以动态加载来自不同应用程序的CSS块，从而允许真正独立的部署，同时共享常见样式。
- HTTP/2及更高版本：虽然HTTP/2的多路复用与HTTP/1.1相比减少了多个请求的开销，但它并没有完全消除它。为了获得最佳的全球性能，请争取获得平衡的捆绑包数量。HTTP/3（QUIC）进一步优化了这一点，但是浏览器支持仍在发展中。
防止未样式内容闪烁（FOUC）
当浏览器在加载必要的CSS之前渲染HTML时，会发生FOUC，从而导致未样式内容的瞬间“闪烁”。这是一个关键的用户体验问题，尤其是在网络速度较慢的用户上。
- 关键CSS：内联关键CSS是防止FOUC的最有效防御措施。
- SSR（服务器端渲染）：如果您使用的是SSR，请确保服务器以非阻塞方式渲染HTML，其中已嵌入或链接了必要的CSS。像Next.js和Nuxt.js这样的框架可以优雅地处理此问题。
- 加载器/占位符：虽然不是FOUC的直接解决方案，但是如果无法完全优化CSS加载，则使用骨架屏幕或加载指示器可以掩盖延迟。
缓存失效策略
有效的缓存对于全球性能至关重要。当CSS文件被拆分时，缓存失效变得更加精细。
- 内容哈希：将文件内容的哈希附加到其文件名（例如，
main.abcdef123.css）。当内容更改时，哈希也会更改，从而迫使浏览器下载新文件，同时允许较旧的版本无限期地保持缓存状态。这是现代捆绑器的标准做法。 - 基于版本的失效：不如哈希那样精细，但可以用于不经常更改的共享公共CSS。
服务器端渲染（SSR）和CSS
对于使用SSR的应用程序，正确处理CSS拆分至关重要。服务器需要知道在初始HTML有效负载中包含哪些CSS，以避免FOUC。
- 提取样式：CSS-in-JS库通常提供服务器端渲染支持，以提取服务器上渲染的组件使用的关键样式，并将它们注入到初始HTML中。
- SSR感知捆绑：必须配置构建工具以正确识别和包含服务器渲染的组件所需的CSS。
全球网络延迟和CDN策略
即使使用完美拆分的CSS，全球网络延迟也会影响交付。
- 内容交付网络（CDN）：将拆分的CSS文件分发到地理位置分散的服务器上。当用户请求您的站点时，CSS从最近的CDN边缘位置提供，从而大大减少了延迟。对于真正的全球受众，这是不可商议的。
- 服务工作者：可以积极地缓存CSS文件，为返回的用户提供即时加载，甚至可以离线。
衡量影响：全球成功的Web指标
CSS拆分工作的最终衡量标准是它对核心Web指标和其他性能指标的影响。
- 最大内容绘制（LCP）：直接受关键CSS加载的影响。更快的LCP意味着您的主要内容出现得更快。
- 首次内容绘制（FCP）：显示何时呈现第一段内容。对感知的速度有好处。
- 首次输入延迟（FID）：虽然主要是一个JavaScript指标，但繁重的CSS负载可能会间接阻塞主线程，从而影响交互性。
- 累积布局偏移（CLS）：加载不良的CSS（或延迟加载的字体）可能会导致布局偏移。关键CSS有助于防止这种情况。
- 使用实际用户监控（RUM）工具在全球范围内监视这些指标，以了解不同地区和设备上的实际用户体验。
挑战和潜在陷阱
尽管具有很高的优势，但实施“CSS拆分规则”并非没有挑战。
配置复杂性
设置高级Webpack或Rollup配置以进行最佳CSS拆分可能很复杂，需要深入了解加载器，插件和分块策略。不正确的配置可能导致重复的CSS，丢失的样式或性能下降。
依赖管理
确保每个组件或页面的CSS依赖项都已正确识别和捆绑可能很棘手。重叠的样式或共享的实用程序需要仔细管理，以避免跨多个捆绑包的重复，同时仍能实现有效的拆分。
样式重复的潜力
如果配置不正确，动态CSS导入或特定于组件的捆绑包可能会导致在多个文件中存在相同CSS规则的情况。尽管单个文件可能更小，但累积的下载大小可能会增加。像Webpack的SplitChunksPlugin这样的工具可以通过提取公共模块来帮助缓解这种情况。
调试分布式样式
当样式分布在许多小文件中时，调试样式问题可能会变得更具挑战性。浏览器开发人员工具对于识别特定规则来自哪个CSS文件至关重要。源地图在这里至关重要。
CSS代码拆分的未来
随着Web的发展，CSS优化技术也将随之发展。
- 容器查询：未来的CSS功能（例如容器查询）可能会启用更本地化的样式设置，从而可能会影响如何根据组件大小（而不仅仅是视口大小）来捆绑或加载样式。
- 浏览器本机CSS模块？：虽然是推测性的，但围绕Web组件和内置模块系统的持续讨论最终可能会导致对范围限定或组件级CSS的更多本机浏览器支持，从而减少对某些拆分方面的复杂构建工具的依赖。
- 构建工具的演变：捆绑器将继续变得更加智能，为高级方案提供更复杂的默认拆分策略和更简单的配置，从而进一步实现了全球开发人员对高性能Web开发的访问民主化。
结论：拥抱全球受众的可扩展性和性能
“CSS拆分规则”（理解为CSS代码拆分的战略应用）是任何旨在实现全球影响力和最佳性能的现代Web应用程序不可或缺的实践。这不仅仅是一种技术优化。这是我们处理样式设置方式的根本转变，从单一的样式表转变为模块化，按需交付模型。通过仔细分析您的应用程序，利用强大的构建工具并遵守最佳实践，您可以显着减少初始页面加载时间，增强各种网络条件下的用户体验，并构建更具可伸缩性和可维护性的代码库。在一个每一毫秒都至关重要的世界中，尤其是在用户从不同的基础架构访问您的内容时，掌握CSS代码拆分是向所有人，在任何地方提供快速，流畅和包容的Web体验的关键。
有关CSS代码拆分的常见问题
问题1：CSS代码拆分是否总是必要的？
对于小型，静态网站或CSS非常有限的应用程序，设置和管理代码拆分的开销可能超过了好处。但是，对于任何中等大小到大型应用程序，尤其是那些使用现代基于组件的框架构建或面向全球受众的应用程序，强烈建议这样做，并且通常是获得最佳性能所必需的。您的应用程序的CSS越大，拆分就越关键。
问题2：CSS代码拆分会影响SEO吗？
是的，间接地和积极地。像Google这样的搜索引擎优先考虑提供良好用户体验的快速加载网站。通过CSS代码拆分来改善核心Web指标（如LCP和FCP），您有助于提高搜索排名。更快的站点意味着搜索引擎抓取工具可以更有效地索引更多页面，并且用户不太可能跳出，从而向搜索算法发出积极的参与信号。
问题3：我可以手动拆分我的CSS文件吗？
虽然从技术上讲可以手动创建单独的CSS文件并在您的HTML中链接它们，但是对于动态应用程序，这种方法很快变得难以管理。您需要手动跟踪依赖项，确保关键CSS已内联并处理缓存失效。现代构建工具会自动执行此复杂过程，从而使其对于高效可靠的CSS代码拆分必不可少。手动拆分通常仅对于非常小的静态站点或特定的媒体查询是可行的。
问题4：CSS代码拆分和PurgeCSS之间有什么区别？
它们是互补的但截然不同。
- CSS代码拆分：将您的CSS划分为多个较小的文件（块），可以按需加载。它的目标是通过仅发送当前视图所需的CSS来减少初始有效负载。
- PurgeCSS（或类似的CSS的“树摇”工具）：分析您的项目以识别并删除样式表中未使用的CSS规则。它的目标是通过消除“死”代码来减小CSS文件的整体大小。
您通常会同时使用这两种方法：首先，使用PurgeCSS通过删除未使用的规则来优化每个CSS块，然后使用代码拆分来确保仅在必要时才加载这些优化的块。
问题5：HTTP/2（和HTTP/3）如何影响CSS拆分？
HTTP/2的多路复用功能允许通过单个TCP连接发送多个请求，从而减少了与许多小文件相关的开销（这是在HTTP/1.1下过度拆分之前的担忧）。这意味着您通常可以负担更多，更小的CSS文件，而不会受到太多性能损失。HTTP/3通过基于UDP的QUIC进一步完善了这一点，后者对数据包丢失和网络更改的弹性更高，从而使不稳定连接上的用户受益。但是，即使有了这些进步，仍然存在收益递减的点。目标仍然是智能拆分，而不仅仅是任意碎片化。
问题6：如果某些CSS确实是全局性的并且在所有地方都使用，该怎么办？
对于真正的全局样式（例如，重置CSS，基本排版或出现在每个页面上的核心品牌元素），通常最好将它们放入单个共享的“供应商”或“公共”CSS块中。浏览器和CDN可以积极缓存此块，这意味着用户只需下载一次即可。随后的导航将仅加载特定页面或组件的较小的动态CSS块。“CSS拆分规则”并不意味着没有共享CSS。这意味着最少共享CSS，其余的CSS有条件地加载。
问题7：如何使用拆分处理暗模式或主题设置的CSS？
这是CSS拆分的一个很好的用例。您可以为您的浅色主题（light-theme.css）和深色主题（dark-theme.css）创建单独的CSS文件。然后，根据用户偏好或系统设置动态加载适当的样式表。
- 基于JavaScript：使用JavaScript有条件地添加或删除基于用户设置的
<link>标记，或将类应用于激活正确主题样式的<body>元素。 - CSS
prefers-color-scheme：对于初始加载，您可以使用<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="dark-theme.css">和media="(prefers-color-scheme: light)" href="light-theme.css">，以使浏览器加载正确的主题。但是，对于没有完整页面重新加载的动态切换，通常需要使用JavaScript。
这种方法可确保用户仅下载他们需要的主题，从而显着减少了他们可能永远不会使用的主题的初始有效负载。
问题8：CSS预处理器（Sass，Less，Stylus）可以与拆分集成吗？
当然。CSS预处理器会编译为标准CSS。您的构建工具（Webpack，Rollup，Parcel，Vite）配置为使用加载程序/插件，这些插件首先编译您的预处理器代码（例如，.scss到.css），然后应用拆分和优化步骤。因此，您可以继续使用预处理器的组织优势，同时仍可以利用代码拆分来提高性能。