Ember.js: Регрессия размера активов в версии 3.17.0

Могу подтвердить в свежем новом проекте Ember:

__2.16.0__

• поставщик: 692,58 КБ (176,09 КБ в сжатом виде)
• приложение: 9,82 КБ (2,15 КБ в сжатом виде)

__2.17.0__

• поставщик: 715,12 КБ (183,64 КБ в сжатом виде)
• приложение: 9,94 КБ (2,2 КБ в сжатом виде)

Сделал несколько поставщиков и посмотреть различия, кажется, вызвано некоторыми проблеск-VM обновления, например https://github.com/glimmerjs/glimmer-vm/commit/4c56c216465410f5bd6f4f53fb7d4508f8048f09#diff -64c3cabffb164d9a2c4bf2d427094e19 через https://github.com/emberjs/ ember.js / commit / 699439c0aaa1917754490efeb5751d10f77e5230

Тоже самое.

2.16.3

• vendor: 886KB (213KB brotli)
• приложение: 1.01MB (126KB brotli)

2.17.0

• поставщик: 907KB (219KB brotli)
• приложение: 1.15MB (137KB brotli)

Кроме того, я заметил снижение производительности на ~ 5% в наших интеграционных тестах при переходе с 2.16.3 на 2.17.0.

PS @ Turbo87 - может быть из-за HBS ? Я тоже этим пользуюсь. Могло ли оно как-то «сломаться» для новых шаблонов, созданных обновленной виртуальной машиной Glimmer?

@ boris-petrov - Не могли бы вы проверить это для нас? Я думаю, вы сможете удалить минификатор из своих приложений package.json ...

Похоже, это происходит из-за изменений в glimmer wireformat, которые немного увеличивают размеры шаблона. В частности, сравнение приложения: 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://github.com/glimmerjs/glimmer-vm/pull/972

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)

После константной строки перечисления до числа

 - 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 | Append, ..], а затем есть кортеж формата провода, который использует логический флаг, который может использовать 1 | 0 вместо этого.

К вашему сведению - https://github.com/emberjs/ember.js/pull/18941 направлен на большую часть роста по сравнению с 3,16 (хотя все еще выше на ~ 3%, над чем мы работаем).