angular 文档:澄清捆绑预算

mgdq6dx1  于 6个月前  发布在  Angular
关注(0)|答案(5)|浏览(54)

与功能请求相关的@angular/*包(s)是什么?

compiler-cli

描述

配置大小预算
  1. "initial - 用于引导应用程序的JavaScript所需的大小。默认情况下,警告值为500kb,错误值为1mb"
    这个描述不太清楚它的意思......它是否就是cli ng build输出中的“初始总”表中的值?如果是的话,我们可以在文档中提到这一点
  2. "baseline"
    我没有在我的预算中设置这个值......这是否意味着它默认为0?
    baseline的效果尚不清楚,我们可以添加一个示例代码片段到文档中,其中包含一个具有“baseline”值的“baseline”属性。
  3. "anyScript"
    我不确定它有多大用处,因为例如,我有很多懒加载的块,我希望它们保持小,但是我的vendor..js和main..js总是相对较大......请求:我们可以添加“anyLazyLoadedScript”属性吗?
  4. 同样,对于“bundle”、“name”等,如果有“outputHashing”: “all”,它们的用途如何?名称是否可以是正则表达式或通配符?例如:“main..js”,“vendor.,js”
  5. 请求属性“assets” ... 因此,我们可以预算资产文件夹的大小......例如,这里的字体可能非常大

建议的解决方案

参见描述......
例如:

"budgets": [
                {
                  "type": "initial",
                  "maximumError": "3.25mb"
                },
                {
                  "type": "bundle",
                  "name": "main.*.js",
                  "maximumError": "1.5mb"
                },
                {
                  "type": "bundle",
                  "name": "vendor.*.js",
                  "maximumError": "2mb"
                },
               {
                  "type": "anyLazyLoadedScript",
                  "maximumError": "1mb"
                },
                 {
                  "type": "anyComponentStyle",
                  "maximumError": "10kb"
                },
                {
                  "type": "assets",
                  "maximumError": "2.5mb"
                },
                {
                  "type": "all",
                  "maximumError": "3.75mb"
                }
              ]

考虑过的其他替代方案

由于目前可用的属性无法实现我想要的结果

fcipmucu

fcipmucu1#

初始

用于引导应用程序的JavaScript/CSS所需的大小。实际上,这与控制台中显示的Initial Total值相同。

基线

如果未设置,则默认为0。所有预算都相对于基线。Angular GDE的一位作者关于捆绑预算的文章非常好,并深入解释了基线。

anyScript

不确定它有多大用处,因为例如,我有很多懒加载的块,希望保持较小,但我的vendor..js和main..js始终会相对较大......请求:我们可以添加“anyLazyLoadedScript”属性吗?
正如名称所示,这用作“脚本”的预算。对于懒加载的块,您可以使用bundle预算,并使用懒加载块捆绑名称作为name
同样,“bundle”、“name”......如果有“outputHashing”: “all”,它的用途如何?名称是否可以是正则表达式或通配符?例如:“main..js”,“vendor.,js”。
捆绑包的名称和文件名是两个不同的值。main.*.js是文件名,而main是捆绑包名称。

资源预算

我喜欢这个想法,尽管有人认为资源是静态的,不像捆绑包那样,因此它们的大小不会改变。此外,从性能的Angular 来看,30kb的JS比30kb的图像更昂贵。
总的来说,我认为我们应该改进https://angular.io/guide/build#configuring-size-budgets中的文档。主要是以下几点;

  • 我们应该提到基线是如何工作的以及它们用于什么目的。
  • 如何为懒加载模块设置捆绑预算。
oiopk7p5

oiopk7p52#

你好,谢谢你的回复。
你是说通配符应该可以工作,例如:

  • { "type":"bundle","name":"vendor.*.js" }

因为这对我不起作用。
如果任何类型都可以扩展为可选地接受一个name属性,那么就可以限制任意文件/文件夹的大小。
例如:

  • { "type":"any", "name":"vendor.*.js" } (使用哈希生成的文件名)
  • { "type":"any", "name":"/assets" } (一个文件夹)

或者,一个新的类型 "file"

gywdnpxw

gywdnpxw3#

如文档所述,name选项仅适用于type=bundle,其值必须是捆绑包名称,而不是文件名。不支持通配符和文件名。

我认为,如果我们想要处理资源,添加一个新的type=asset可能是首选方法。需要考虑的是,资源通常具有静态属性且大小永不改变,而30Kb图像的成本与30 JavaScript文件的成本有很大差异。我的意思是,并非所有字节都相等。请参阅https://link.medium.com/QIcfrJBDOmb

ubof19bj

ubof19bj4#

了解......
是的,资产对加载第一页的时间影响不同。
你想让我为类型=资产打开一个问题功能请求吗?

1wnzp6jl

1wnzp6jl5#

分配P4,等待明确的文档更新。

相关问题