Ember.js: v3.17.0中的资产规模回归

创建于 2020-03-05  ·  14评论  ·  资料来源: emberjs/ember.js

我们在其中一个应用程序中注意到Ember v3.17.0版本大大增加了我们的资产规模:

之前

  • dist / assets / app.js:613.18 KB(压缩后的78.46 KB)
  • dist / assets / vendor.js:2.34 MB(压缩后的558.13 KB)

  • dist / assets / app.js:690.43 KB(压缩后的89.22 KB)
  • dist / assets / vendor.js:2.42 MB(压缩后的572.39 KB)

/ cc @pzuraq @rwjblue

Bug Regression

最有用的评论

仅供参考-https: //github.com/emberjs/ember.js/pull/18941解决了3.16增长的大部分问题(尽管仍在增长约3%,我们正在努力)。

所有14条评论

可以在一个新的余烬项目中进行确认:

__2.16.0__

  • 供应商:692.58 KB(176.09 KB压缩)
  • 应用程序:9.82 KB(压缩后的2.15 KB)

__2.17.0__

  • 供应商:715.12 KB(已压缩183.64 KB)
  • 应用:9.94 KB(压缩为2.2 KB)

是否做了一些供应商差异,这似乎是由glimmer-vm更新引起的,例如https://github.com/glimmerjs/glimmer-vm/commit/4c56c216465410f5bd6f4f53fb7d4508f8048f09#diff -64c3cabffb164d9a2c4bf2d427094e19 /通过https://github.com ember.js / commit / 699439c0aaa1917754490efeb5751d10f77e5230

同样在这里。

2.16.3

  • 供应商:886KB(213KB brotli)
  • 应用程式:1.01MB(126KB brotli)

2.17.0

  • 供应商:907KB(219KB brotli)
  • 应用程式:1.15MB(137KB brotli)

另外,我注意到在集成测试中性能从2.16.3降到2.17.0约5%。

PS @ Turbo87-可能是因为HBS缩小器吗? 我也在用更新的Glimmer VM生成的新模板是否可能以某种方式“中断”?

@ boris-petrov-介意为我们检查一下吗? 我认为您应该可以从应用程序package.json删除该缩小器...

看起来这是由于微光线格式的更改而造成的,该更改使模板尺寸有些膨胀。 特别是在应用程序上进行比较是https://github.com/glimmerjs/glimmer-vm/blob/11cc83b2adf220bef298a1a6298c9e4e750c9fe1/packages/%40glimmer/interfaces/lib/compile/wire-format.d.ts#L76

@rwjblue-我相信@krisselden是正确的-这与ember-hbs-minifier 。 我使用以下助手尝试了一个全新的Ember应用程序:

import Helper from '@ember/component/helper';
export default Helper.helper(() => true);

和两个组件:

other-component.hbs

{{some-component foo=1}}

some-component.hbs

{{some-helper 1 2 3 @foo}}

3.16.3为两个组件生成的:

other-component.hbs

block: "{\"symbols\":[],\"statements\":[[1,[28,\"some-component\",null,[[\"foo\"],[1]]],false],[0,\"\\n\"]],\"hasEval\":false}",

some-component.hbs

block: "{\"symbols\":[\"@foo\"],\"statements\":[[1,[28,\"some-helper\",[1,2,3,[23,1,[]]],null],false],[0,\"\\n\"]],\"hasEval\":false}",

对于3.17相同:

other-component.hbs

block: "{\"symbols\":[],\"statements\":[[1,0,0,0,[31,2,14,[27,[26,0,\"CallHead\"],[]],null,[[\"foo\"],[1]]]],[1,1,0,0,\"\\n\"]],\"hasEval\":false,\"upvars\":[\"some-component\"]}",

some-component.hbs

block: "{\"symbols\":[\"@foo\"],\"statements\":[[1,0,0,0,[31,2,11,[27,[26,0,\"CallHead\"],[]],[1,2,3,[27,[24,1],[]]],null]],[1,1,0,0,\"\\n\"]],\"hasEval\":false,\"upvars\":[\"some-helper\"]}",

我不会称其为“错误”,这不是很好。 您拥有的应用程序越大,模板就越大。

有线格式的更改似乎与此处完成的工作有关: https :

灰烬3.16

- dist/assets/ember-observer.js: 706.89 KB (66.89 KB gzipped)

灰烬3.17

 - dist/assets/ember-observer.js: 743.7 KB (69.63 KB gzipped)

将const枚举字符串转换为数字后

 - dist/assets/ember-observer.js: 739.58 KB (69.44 KB gzipped)

删除位置数据

 - dist/assets/ember-observer.js: 723.55 KB (68.06 KB gzipped)

展平Get + GetPath + GetContextualFree表达式

- dist/assets/ember-observer.js: 721.99 KB (68.04 KB gzipped)

如果您不介意在您的应用程序上运行以告知补丁程序如何工作,我就制作了一个实用程序

https://www.npmjs.com/package/ember-template-size

$ npx ember-template-size .
npx: installed 11 in 1.766s
{
  '3.16.3': {
    version: '3.16.3',
    original: 793656,
    compiled: 1223295,
    brotli: 242598,
    gzip: 242606
  },
  '3.17.0-patched': {
    version: '3.17.0-patched',
    original: 793656,
    compiled: 1299096,
    brotli: 258803,
    gzip: 258826
  },
  '3.17.0': {
    version: '3.17.0',
    original: 793656,
    compiled: 1624741,
    brotli: 294760,
    gzip: 294780
  }
}

以及https://github.com/rust-lang/crates.io

{
  '3.16.3': {
    version: '3.16.3',
    original: 73613,
    compiled: 143264,
    brotli: 32477,
    gzip: 32608
  },
  '3.17.0-patched': {
    version: '3.17.0-patched',
    original: 73613,
    compiled: 160526,
    brotli: 34663,
    gzip: 34803
  },
  '3.17.0': {
    version: '3.17.0',
    original: 73613,
    compiled: 183711,
    brotli: 36903,
    gzip: 37070
  }
}

为我们:

{
  '3.16.3': {
    version: '3.16.3',
    original: 281240,
    compiled: 450040,
    brotli: 98120,
    gzip: 98142
  },
  '3.17.0-patched': {
    version: '3.17.0-patched',
    original: 281240,
    compiled: 494042,
    brotli: 105152,
    gzip: 105178
  },
  '3.17.0': {
    version: '3.17.0',
    original: 281240,
    compiled: 596287,
    brotli: 117757,
    gzip: 117784
  }
}

该补丁最能代表我的想法。 我还有更多想法,但是根据到目前为止的结果,将无法恢复其余的回归。 导致回归的重构很大,可以为将来提供方向,我的时间有限。

我还有2个简单的想法,展平[追加,1 | 0,...]放入[TrustingAppend | 追加,..],然后有线格式元组,该元组使用可以使用1 | |的布尔标志。 改为0。

仅供参考-https: //github.com/emberjs/ember.js/pull/18941解决了3.16增长的大部分问题(尽管仍在增长约3%,我们正在努力)。

此页面是否有帮助?
0 / 5 - 0 等级

相关问题

SaladFork picture SaladFork  ·  4评论

stevesims picture stevesims  ·  3评论

lukemelia picture lukemelia  ·  3评论

MichalBryxi picture MichalBryxi  ·  3评论

dfreeman picture dfreeman  ·  4评论