在 Angular 中导入全局 css 文件会导致 Webpack 发出巨大的模块包

Posted 2023-03-06

【中文标题】在 Angular 中导入全局 css 文件会导致 Webpack 发出巨大的模块包

【英文标题】：Importing a global css file in Angular causes Webpack to emit huge module bundles

【发布时间】：2018-03-13 06:31:00

【问题描述】：

我们在 angular-cli 生成的 Angular 应用程序中使用了一堆全局样式和导入，定义在 styles.scss 中（文件以 /* You can add global styles to this file, and also import other style files */ 开头，如果这看起来很熟悉的话）。

但是，当这一行被添加到文件的顶部时：

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

webpack 构建生成大小为兆字节的包。导入指的是一个 1120 行长的 css 文件（已编译，未压缩）。

这可能与我们已弹出配置有关，因为我们很快需要自定义一些 angular-cli 尚不支持的设置。使用以下命令执行弹出：

ng eject --aot -e dev -dev

ng eject --aot -e prod -prod

然后在各自的构建中使用配置文件。

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

公司范围的样式是使用 yarn 从设置了 artifactory 的本地注册表下载的，但它们像任何其他包一样愉快地位于 node_modules 中，所以我认为这与问题无关。

【参考方案1】：

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

将大全局文件的导入替换为更具体的文件（用于变量和混合）将包减少到正常大小。