Angular 2组件样式加载机制及多实例CSS重复加载疑问

1. Angular 2中组件样式的加载机制是怎样的？ #

Angular 2（也就是现在我们常说的Angular v2+版本）的组件样式采用了封装式的加载与作用域控制，具体流程是这样的：

• 当你在组件中通过styles数组写内联样式，或者用styleUrls引入外部CSS文件时，Angular在编译阶段会对这些样式做特殊处理——给每个样式选择器自动添加一个唯一的属性选择器后缀（比如[_ngcontent-xys456]）。这个后缀会和组件模板里的所有DOM元素绑定，确保你的组件样式只会作用于当前组件的元素，不会“跑出去”污染全局样式。
• 加载时机方面，组件样式会和组件的逻辑代码一起被打包（如果你用Angular CLI的话，默认是打包到对应组件的chunk里）。当这个组件第一次被初始化渲染时，处理后的样式会被插入到页面<head>标签内的<style>标签中。
• 另外，这种封装是可配置的：默认是ViewEncapsulation.Emulated（模拟封装，也是最常用的）；你可以设置ViewEncapsulation.None关闭封装，让样式变成全局生效；也可以用ViewEncapsulation.Native借助浏览器原生Shadow DOM实现隔离，但现在这个选项用得比较少了。

2. 同一组件多实例的CSS加载、体积与全局CSS的效率问题 #

组件多实例时CSS会重复加载吗？ #

完全不会！不管你在页面上创建多少个同一组件的实例，Angular只会加载一次该组件的样式。因为在编译打包阶段，组件的样式已经被处理成一个独立的样式块，当第一个组件实例初始化时，这个样式块就被插入到<head>里了，后续的所有实例都会复用已经存在的样式，不会重复插入或请求。

会增大页面体积、延长加载时间吗？ #

既然不会重复加载，那自然不会因为多实例额外增加页面体积或者拖慢加载速度。不过要注意：如果你的组件样式本身冗余度很高，或者多个组件都重复写了相同的通用样式（比如重置样式、通用布局），那整体打包体积还是会变大，但这是样式复用的问题，和组件多实例没关系。

将CSS移至全局CSS文件是否更高效？ #

这得分场景讨论，不能一刀切：

• 适合移到全局的情况：如果是通用样式（比如全局重置样式、主题色、全应用通用的按钮/输入框基础样式），放到全局CSS里更高效——只需要加载一次，避免不同组件重复写相同代码，减少打包体积。
• 不适合移到全局的情况：组件专属的样式绝对不适合放全局。全局CSS没有组件封装的特性，很容易出现样式冲突；而且当应用规模变大时，你很难追踪某个全局样式到底影响了哪些组件，维护成本会飙升。另外，在Angular的懒加载路由场景下，全局CSS是应用启动时就加载的，如果全局CSS体积很大，会增加首屏加载时间；而组件样式是和所在路由的chunk一起懒加载的，能做到按需加载，反而更高效。

关于使用styleUrls引入样式的建议 #

用styleUrls引入组件样式是Angular官方推荐的方式，好处很多：

• 样式和组件高度耦合，维护起来很方便，组件迁移时样式也能一起带走。
• 借助Angular的样式封装，从根源上避免样式污染问题。
• 配合Angular CLI的打包优化（比如CSS压缩、树摇），能有效控制最终的打包体积。

如果你的多个组件里有很多重复的样式，建议把这些通用样式抽成共享样式文件，然后在需要的组件里通过styleUrls引入，或者在angular.json里配置全局引入（仅限真正的全局样式），这样既能保证样式复用，又不失去组件样式的封装性。

内容的提问来源于stack exchange，提问作者shiva