如何检查角度应用程序中CSS加载的大小

希望你们都做得很好

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

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

任何想法。我尝试了谷歌搜索和这里的堆栈溢出，但找不到所需的解决方案。我甚至在浏览器的网络选项卡中看不到任何CSS文件

---

有什么建议吗？

您应该先进入“网络”选项卡，然后重新加载页面。一旦你重新加载它，点击CSS过滤器，你就会看到你的应用程序中包含的所有CSS列表，以及文件大小

您应该先进入“网络”选项卡，然后重新加载页面。一旦你重新加载它，点击CSS过滤器，你就会看到你的应用程序中包含的所有CSS列表，以及文件大小

假设您的项目使用Angular CLI，该项目在内部使用webpack

一旦你建立了一个项目。在项目根目录中生成一个

dist

目录。查看一下它，您会发现它可能生成的所有

.js

和

.css

捆绑包

---

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

假设您的项目使用Angular CLI，它在内部使用webpack

一旦你建立了一个项目。在项目根目录中生成一个

dist

目录。查看一下它，您会发现它可能生成的所有

.js

和

.css

捆绑包

---

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

我没有发现像上面答案那样在网络中生成的css，但我做了一个技巧

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

---

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

我没有发现任何像上面答案那样在网络中生成的CSS，但我做了一个技巧

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

---

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

你可以在你的包中检查它。我对它有点陌生。您能详细说明一下吗？您使用的是哪种捆绑工具？网页包？你可以在你的包里查一下。我对它有点陌生。您能详细说明一下吗？您使用的是哪种捆绑工具？网页包？是的，我可以看到资产目录下的SCSS文件夹，但我看不到任何从SCSS转换的CSS文件。一个问题。当前SCSS文件夹大小约为90KB。一旦这个SCS将被转换成CSS，我想大小会更大，对吗？你必须检查

dist

目录中捆绑和转换的文件。不是

资产

资产。遵循以下步骤。打开终端>转到项目根目录>npm运行生成。它将生成一个dist目录<代码>cd区

ls-la

。查看大小。是的，我可以看到资产目录下的SCSS文件夹，但我看不到任何从SCSS转换的CSS文件。一个问题。当前SCSS文件夹大小约为90KB。一旦这个SCS将被转换成CSS，我想大小会更大，对吗？你必须检查

dist

目录中捆绑和转换的文件。不是

资产

资产。遵循以下步骤。打开终端>转到项目根目录>npm运行生成。它将生成一个dist目录<代码>cd区

ls-la

。请参见尺寸。