为什么将类移动到共享css文件会增加包的大小

这适用于角度为11的应用。我有一个共享css文件，包含在以下几个组件中：

@Component({
  selector: 'app-my-x-selector',
  templateUrl: './my-component-x.html',
  styleUrls: ['component-x.css', 'shared.css']
})

将以下测试类添加到其中一个组件的css文件会增加 捆绑包大小为61字节，与添加的源代码段的大小相匹配。但是将类移动到共享css会将包大小增加140字节。为什么？似乎Angular有效地为每个包含共享css文件的组件克隆了类，imho严格限制了共享css文件，如果没有违背共享css的目的的话

.tr-test00 {
    display: block;
    margin-left: 45rem;
    padding-left: 3rem;
}

---

@是的，想象一下你有两个简单的组件，像.css一样

  //component-one
  template: `<h1>Hello</h1>`,
  styles: [`h1 { color:blue }`]

  //component-two
  template: `<h1>By</h1>`,
  styles: [`h1 { color:red }`]

并创建一个类似.html的

<hello _ngcontent-bwn-c39="">
  <h1 _ngcontent-edf-c40="">Hello</h1> //<--this is the component one
</hello>

<other_ngcontent-bwn-c42="">
   <h1 _ngcontent-edf-c41="">By</h1> //<--this is the component two
</other>

而且.html也是

<hello _ngcontent-bwn-c39>
   <h1 _ngcontent-edf-c40>Hello</h1> //<--this is the component one
</hello>

<other _ngcontent-bwn-c48>
   <h1 _ngcontent-edf-c41>By</h1> //<--this is the component two
</other>

把你的零件装在一个小盒子里

<div class="common">
    <h1>Hello</h1>
</div>

<div class="common">
    <h1>By</h1>
</div>

你好
通过

它的.html看起来像

   <hello _ngcontent-jxl-c46="">
      <div class="common">
         <h1>Hello</h1>
      </div>
   </hello>

   <other _ngcontent-jxl-c46="">
       <div class="common">
          <h1>By</h1>
       </div>
    </other>

你好
通过

.common h1{
   color:green
}

<div class="common">
    <h1>Hello</h1>
</div>

<div class="common">
    <h1>By</h1>
</div>

   <hello _ngcontent-jxl-c46="">
      <div class="common">
         <h1>Hello</h1>
      </div>
   </hello>

   <other _ngcontent-jxl-c46="">
       <div class="common">
          <h1>By</h1>
       </div>
    </other>