Question

我们在{-1}}中定义的angular-cli生成的Angular应用程序中使用了一堆全局样式和导入（如果看起来很熟悉，则文件以styles.scss开头）。 / p>

但是，当此行添加到文件顶部时：

/* You can add global styles to this file, and also import other style files */

webpack构建产生大小为兆字节的捆绑包。导入是指1120行长的css文件（已编译，未编译）。

我们已经弹出配置可能是相关的，因为我们需要立即定制一些设置，即angular-cli还没有支持。使用以下命令执行弹出：

@import '~@company/company-wide-styles'

然后在相应的版本中使用配置文件。

可能导致这些巨大文件大小的原因是什么？使用导入行，构建中生成的文件至少加倍大小！

公司范围广泛的样式是从设置有神器的本地注册表中下载的纱线，但他们很高兴地坐在node_modules中，就像任何其他包一样，所以我不认为这与问题有关。

Answer 1

事实证明我们的scss文件中有很多不必要的导入。在几乎每个文件中，都导入了全局ng eject --aot -e dev -dev ng eject --aot -e prod -prod。我只能得出结论，这导致了整个应用程序中的大量代码重复。

使用更具体的文件（对于变量和mixin）替换大型全局文件的导入会将捆绑包减少到正常大小。