ES6のComputedPropertyNameとトランスパイラ
ES6のComputed Property Nameは非常に便利だが、トランスパイラを併用すると問題が起きがちである。
それを確認していく。
Base
const SYMBOL = Symbol('foo-bar-baz'); const obj = { [SYMBOL]: 1, name: 'brn', job: 'engineer' }
typescript
var SYMBOL = Symbol('foo-bar-baz'); var obj = (_a = {}, _a[SYMBOL] = 1, _a.name = 'brn', _a.job = 'engineer', _a); var _a;
babel
'use strict'; var _obj; function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } var SYMBOL = Symbol('foo-bar-baz'); var obj = (_obj = {}, _defineProperty(_obj, SYMBOL, 1), _defineProperty(_obj, 'name', 'brn'), _defineProperty(_obj, 'job', 'engineer'), _obj);
これを見るとすぐわかるが、トランスパイルされたjs内では、
オブジェクトを一度構築してからプロパティを追加している。
SYMBOLプロパティは仕方ないが、他のプロパティも別途追加になっているため、(Babelはもっとひどくて、definePropertyになっている…)
例えば、v8ではDictionaryモードになってしまう。つまりパフォーマンスに重大な問題を引き起こす。
そのため、パフォーマンスクリティカルな場合はComputedPropertyの利用は避けよう。