Ember.js: Regresi ukuran aset di v3.17.0

Dapat mengonfirmasi dalam proyek bara baru yang baru:

__2.16.0__

• vendor: 692,58 KB (176,09 KB dalam format zip)
• aplikasi: 9,82 KB (gzip 2,15 KB)

__2.17.0__

• vendor: 715,12 KB (183,64 KB dalam format gzip)
• aplikasi: 9,94 KB (2,2 KB dalam format zip)

Apakah beberapa vendor berbeda dan tampaknya disebabkan oleh beberapa pembaruan glimmer-vm, misalnya https://github.com/glimmerjs/glimmer-vm/commit/4c56c216465410f5bd6f4f53fb7d4508f8048f09#diff -64c3cabffb164d9a2c4bf192djs70 / ember.js / commit / 699439c0aaa1917754490efeb5751d10f77e5230

Sama disini.

2.16.3

• vendor: 886KB (213KB brotli)
• aplikasi: 1.01MB (126KB brotli)

2.17.0

• vendor: 907KB (219KB brotli)
• aplikasi: 1,15MB (137KB brotli)

Selain itu, saya melihat penurunan kinerja ~ 5% dalam pengujian integrasi kami dari 2.16.3 menjadi 2.17.0.

PS @ Turbo87 - mungkinkah karena minifier HBS ? Saya juga menggunakannya. Mungkinkah itu "rusak" entah bagaimana untuk template baru yang dibuat oleh VM Glimmer yang diperbarui?

@ boris-petrov - Keberatan memeriksanya untuk kami? Saya pikir Anda harus dapat menghapus penambang dari aplikasi Anda package.json ...

Sepertinya ini berasal dari perubahan format kawat kilau yang membengkak sedikit ukuran template. Secara khusus melakukan perbedaan pada aplikasi adalah https://github.com/glimmerjs/glimmer-vm/blob/11cc83b2adf220bef298a1a6298c9e4e750c9fe1/packages/%40glimmer/interfaces/lib/compile/wire-format.d.ts#L76

@rwjblue - Saya yakin @krisselden benar - ini tidak ada hubungannya dengan ember-hbs-minifier . Saya mencoba aplikasi Ember baru dengan bantuan berikut:

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

Dan dua komponen:

other-component.hbs

{{some-component foo=1}}

some-component.hbs

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

3.16.3 diproduksi untuk dua komponen:

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}",

Hal yang sama untuk 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\"]}",

Saya tidak akan menyebutnya sebagai "bug", hanya saja tidak terlalu bagus. Semakin besar aplikasi yang Anda miliki, semakin besar template yang didapat.

Perubahan format kabel tampaknya terkait dengan pekerjaan yang dilakukan di sini: https://github.com/glimmerjs/glimmer-vm/pull/972

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

Ember 3.16

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

Ember 3.17

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

Setelah const enum string ke angka

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

Menghapus data loc

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

Ratakan ekspresi Get + GetPath + GetContextualFree

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

Saya memanfaatkan, jika Anda tidak keberatan menjalankan aplikasi Anda untuk memberi tahu saya bagaimana tambalan itu dilakukan

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

dan untuk 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
  }
}

untuk kita:

{
  '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
  }
}

Tambalan itu mewakili sebagian besar gagasan buah gantung rendah yang saya miliki. Saya punya beberapa ide lagi, tetapi berdasarkan hasil sejauh ini, tidak akan memulihkan sisa regresi. Refaktor yang menyebabkan kemunduran besar dan memungkinkan beberapa arah masa depan dan saya memiliki waktu terbatas.

Saya punya 2 ide yang lebih sederhana, ratakan [Lampirkan, 1 | 0, ...] ke [TrustingAppend | Tambahkan, ..] lalu ada tuple format kabel yang menggunakan flag boolean yang bisa menggunakan 1 | 0 sebagai gantinya.

FYI - https://github.com/emberjs/ember.js/pull/18941 membahas sebagian besar pertumbuhan vs 3,16 (meskipun masih lebih besar ~ 3%, yang sedang kami kerjakan).