调整 angular.json 中的预算大小

Question

当我运行时，我收到了一堆警告ng build --prod。例如

...

WARNING in budgets, maximum exceeded for C:/Users/Phil/Documents/myapp/myapp - offical-dev/src/app/profile/profile.component.css. Budget 6 kB was exceeded by 895 bytes.


WARNING in budgets, maximum exceeded for initial. Budget 2 MB was exceeded by 2.94 MB.

我知道我可以轻松进入 angular.json 并调整这些预算阈值，但我不知道这是否是一个坏主意。我应该对提高这些预算有任何顾虑吗？

  "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "65kb"
                }
              ]
            },

我通过将 anyComponentStyle 类型设置为 65 来做到这一点，以使 CSS 预算警告消失，但这是否会产生性能问题，或者我应该调整它们以满足我的应用程序的大小而不用担心它？

Answer 1

默认预算是为了确保应用程序在大多数设备上加载速度相当快。

然而，对于您的应用程序来说，足够快的速度取决于您。

如果它是一个流量很大的网上商店或信息网站，用户可能会离开或转到下一个可能的网站，如果它没有在预期的时间范围内（通常<2秒）加载，则加载时间至关重要，您应尽量使应用程序尽可能小。

如果您的应用程序是具有很多功能的企业应用程序，用户可以等待几秒钟来最初加载页面，那么您可以调整预算。

特别是关于 CSS 预算，我建议您重新考虑应用程序的架构。特定组件的任何 css 都会在运行时通过 javascript 注入到应用程序中。因此，您应该尽可能少地保留它。

如果您当前的组件具有超过 65kb 的 css，您可能应该将其中大部分转移到通用主题文件中，例如 styles.css。该文件将被编译成静态 css 文件，该文件将由浏览器直接加载，而不是通过 javascript 注入，因此效率更高。

概括：

限制是最佳实践，但如果您知道自己在做什么，则可以忽略它。大多数 CSS 应该静态注入，因此可能不会达到您的限制。