Ember.js: v3.17.0でのアセットサイズの回帰

新鮮な新しい残り火プロジェクトで確認できます：

__2.16.0__

• ベンダー：692.58 KB（176.09 KB gzip圧縮）
• アプリ：9.82 KB（2.15 KB gzip圧縮）

__2.17.0__

• ベンダー：715.12 KB（183.64 KB gzip圧縮）
• アプリ：9.94 KB（2.2 KB gzip圧縮）

いくつかのベンダーの差分を行なったし、いくつかのかすか-VMの更新、例えばに起因すると思わhttps://github.com/glimmerjs/glimmer-vm/commit/4c56c216465410f5bd6f4f53fb7d4508f8048f09#diff経由-64c3cabffb164d9a2c4bf2d427094e19 https://github.com/emberjs/ 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ミニファイアが原因で

@ 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);

そして2つのコンポーネント：

other-component.hbs

{{some-component foo=1}}

some-component.hbs

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

3.16.3は2つのコンポーネント用に作成されました。

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 ：

https://github.com/glimmerjs/glimmer-vm/pull/1056

残り火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)

constenum文字列を数値にした後

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

locデータの削除

 - 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)

パッチがどのように機能するかを知らせてくれるアプリで実行してもかまわない場合は、utilを作成しました

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％大きくなっています）。