如何在Angular Application

Question

希望你们都做得很好。

我在Angular应用程序中使用SCSS和Bootstrap，正如我们所知，一旦Angular应用程序运行，它就会将这些SCSS文件转换为它的CSS版本。

如何检查应用程序整体生成的CSS文件大小，因为我需要显示一些优化任务报告。

任何想法。我尝试使用谷歌搜索和Stack Overflow，但无法找到所需的解决方案。我甚至无法在浏览器的网络选项卡中看到任何CSS文件。

有任何建议吗？

Answer 1

您应首先在“投放网络”标签中，然后重新加载页面。重新加载后，单击CSS过滤器，然后您将看到应用程序中包含的所有CSS列表，文件大小。

Answer 2

假设您正在为项目使用Angular CLI，它在内部使用webpack ......

构建项目后。在项目根目录中生成dist目录。仔细查看它，您将找到它可能生成的所有.js和.css个包。

注意 - 大小会根据您的构建类型而有所不同。对于生产构建，尺寸将是最小的，对于其他类型的构建，如果有的话，尺寸可能不同。

Answer 3

我没有在网络中发现任何css，如上面的答案，但我做了一个技巧。

我去了webpack文件夹，在那里我发现了一个生成的CSS。 （通过随机CSS Selecto搜索）。

我右键单击并将其保存在桌面上。如果检查此CSS文件的属性，则会以KB为单位显示大小。