#__PURE__に入門

#̲̲PURE̲̲に入門 kazuhi̲ra

普段あまり 人前で話さないので

貴重な機会を ありがとうございます

・東京在住 ・生まれ育ちは関西 ・SUZURIの開発 kazuhi̲ra ・好きなメソッド ・String.prototype.repeat()

・東京在住 ・生まれ育ちは関西 ・SUZURIの開発 kazuhi̲ra ・好きなメソッド ・さぼ

・東京在住 ・生まれ育ちは関西 ・SUZURIの開発 kazuhi̲ra ・好きなメソッド ・console.log(ʼ🌵ʼ.repeat(10))

最近

会社の新卒研修 サポート

Reactの話が 中心

そうすると

この辺の話を することになる

知識としては 知っている

しかし

これは bundleされた 最後の姿

中間成果物を 見たことがない

やってみよう

やった

……？

#̲̲PURE̲̲

誰？

#̲̲PURE̲̲に入門 kazuhi̲ra

検索する

Pure Annotation

for dead code elimination

さらにいろいろ検索

̲̲PURE̲̲に携わるツール 2種類

・コメント(#̲̲PURE̲̲)入れる係 ・コンパイラが担う ・Babel, SWCなど ・コメント使う係 ・mini erが担う fi ・terser, uglify-jsなど

コメント入れる係

Babel

babel-traverse/src/scope/index.ts

いろいろなpure判定 fi if (isIdenti er(node)) if (isClass(node)) if (isClassBody(node)) if (isBinary(node)) if (isArrayExpression(node) || isTupleExpression(node)) if (isObjectExpression(node) || isRecordExpression(node)) if (isMethod(node)) if (isProperty(node)) if (isUnaryExpression(node)) if (isTaggedTemplateExpression(node)) if (isTemplateLiteral(node))

pureの定義 未使用ならその呼び出しを 削除できるもの

条件にマッチしたら ̲̲PURE̲̲挿入

コメント入れる係 完

コメント使う係

fi mini er

input: { function foo() { var u = pure(1); var x = pure(2); var y = pure(x); var z = pure(pure(side_effects())); return pure(3); } }

input: { function foo() { var u = pure(1); var x = pure(2); var y = pure(x); var z = pure(pure(side_effects())); return pure(3); } }

input: { function foo() { var u = pure(1); var x = pure(2); var y = pure(x); var z = pure(pure(side_effects())); return pure(3); } } output: { function foo() { side_effects(); return pure(3); } }

input: { function foo() { var u = pure(1); var x = pure(2); var y = pure(x); var z = pure(pure(side_effects())); return pure(3); } } output: { function foo() { side_effects(); return pure(3); } }

まとめ

(口頭で)