Ember.js: v3.17.0의 자산 크기 회귀

새로운 불씨 프로젝트에서 확인할 수 있습니다.

__2.16.0__

• 공급 업체 : 692.58 KB (176.09 KB gzipped)
• 앱 : 9.82KB (2.15KB gzipped)

__2.17.0__

• 공급 업체 : 715.12 KB (183.64 KB gzipped)
• 앱 : 9.94KB (2.2KB gzipped)

일부 공급 업체의 차이점을했고 약간 희미한 빛-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 브로 틀리)

2.17.0

• 공급 업체 : 907KB (219KB brotli)
• 앱 : 1.15MB (137KB 브로 틀리)

또한 통합 테스트에서 2.16.3에서 2.17.0으로 성능이 ~ 5 % 저하되는 것을 확인했습니다.

PS @ Turbo87 - HBS minifier 때문일까요? 나는 또한 그것을 사용하고 있습니다. 업데이트 된 Glimmer VM에 의해 생성 된 새 템플릿에 대해 어떻게 든 "손상"될 수 있습니까?

@ boris-petrov-우리를 위해 그것을 확인하는 마음? 앱 package.json 에서 minifier를 제거 할 수 있어야한다고 생각합니다 ...

이것은 템플릿 크기를 약간 부 풀리는 희미한 와이어 형식의 변경으로 인한 것 같습니다. 특히 앱에서 diff를 수행하는 것은 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)

const enum 문자열을 숫자로

 - 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 개 더 있습니다. 병합 [Append, 1 | 0, ...]을 [TrustingAppend | Append, ..] 그런 다음 1을 사용할 수있는 부울 플래그를 사용하는 와이어 형식 튜플이 있습니다. 대신 0.

FYI- https: //github.com/emberjs/ember.js/pull/18941은 3.16에 비해 대부분의 성장을 처리합니다 (우리가 작업중인 약 3 %는 여전히 더 크지 만).