バンドル最適化マニアクス at tfconf

treeshake, DCE, terser mangling

1. όϯυϧ࠷దԽϚχΞΫε @mizchi | Plaid, Inc at Techfeed Conference 2022
2. JS Ͱ͔͍ͬͱਏ͘ͳ͍ʁ
3. JS Ͱ͔͍ͬͱ͖… » ։ൃ࣌ » खݩͷϏϧυαΠΫϧ͕஗͍ » npm install Ͱ CI ͕஗͍ » Ϣʔβʔମݧ » μ΢ϯϩʔυͰىಈ·Ͱ͕஗ͯ͘ਏ͍ » CPU ࠅ࢖ͰόοςϦ͕ਏ͍
4. ϑϩϯτΤϯυվળ㲈Ϗϧυվળ
5. ୭͕ԿΛվળ͢Δͷ͔ʁ » ΞϓϦέʔγϣϯ։ൃऀ: ϚΫϩνϡʔχϯά » Chunk Split / Treeshake » ϥΠϒϥϦ։ൃऀ: ϚΠΫϩνϡʔχϯά » Treeshakable ͳ API ͷఏڙ » mangling
6. ࠓ೔࿩͢಺༰ » جૅฤ: օ͕஌Δ΂͖ Treeshake+DCE » ্ڃฤ: ϥΠϒϥϦ։ൃऀͷͨΊͷϚΠΫϩνϡʔχϯά
7. جૅฤ: Treeshake + DCE
8. ESM Treeshake όϯυϥ(rollup/webpack)͕ ESM ͷະ࢖༻ import Λ࡟আ͢Δػ ೳ import {a, b} from "x"; console.log(a); // όϯυϧ࣌ʹ b ͕ফ͑Δ ※ ͨͩ͠ side effect (ޙड़) ͕ͳ͍લఏ
9. Treeshake ͷલఏΛ཈͑Δ τοϓϨϕϧͰ෭࡞༻Λى͜͢ͱ Treeshake Ͱ͖ͳ͘ͳΔ // test_shakable.js const offset = new Date().getTimezoneOffset(); export const getOffset = () => offset; $ npx agadoo test_shakable.js # Rich-Harris/agadoo Failed to tree-shake test_shakable.js » new Date().getTimezoneOffset() ͕ Side Effect » جຊతʹτοϓϨϕϧͰ࣮ߦ͞ΕΔίʔυΛॻ͔ͳ͍
10. DCE: Dead Code Elimination ະ࢖༻ίʔυΛ࡟আ͢Δ֤छ minifier ͷػೳ // source if(false){ unused; } export const x = true ? f() : -1; function f(){ return 1; unused;} // ΠϯϥΠϯల։ // out export const x=1;
11. Treeshake+DCEͷ࣮ફ
12. ݕূ༻ rollup.config.js import ts from "rollup-plugin-ts"; import { terser } from "rollup-plugin-terser"; import replace from "@rollup/plugin-replace"; export default { plugins: [ ts({/* ུ */}), replace({ "process.env.NODE_ENV": JSON.stringify('production') }), terser(/* ུ */), ], }
13. ࠓճͷιʔείʔυ import { prod, dev } from "./sub"; // prod=0, dev=1 export const ex = process.env.NODE_ENV === "production" ? prod : dev;
14. 1. ఆ਺ల։ » process.env.NODE_ENV=production import { prod, dev } from "./sub"; export const ex = "production" === "production" ? prod : dev;
15. 2. ఆ਺ಉ࢜ͷධՁ » "production"==="production" => true import { prod, dev } from "./sub"; export const ex = true ? prod : dev;
16. 3. DCE » true?prod:dev => prod import { prod } from "./sub"; export const ex = prod;
17. 4. Bundle with Treeshake » prod=0 ͷΈల։ const prod = 0; export const ex = prod;
18. 5. terser compress » ϩʔΧϧม਺໊Λѹॖ const o=0;export{ex as o}
19. Treeshake+DCE ͷ࢖͍ํ » ؀ڥ͝ͱʹఆ਺ల։Ͱ if(false){...} ͳ Dead Code Λ࡞Δ » ϥΠϒϥϦ࡞ऀ: treeshakable ͳ API ઃܭΛ͢Δ » αΠζࢹ఺ͩͱϝιουνΣʔϯ͸ආ͚Δ » ϥΠϒϥϦར༻ऀ: ඞཁͳίʔυ͚ͩ import » ಛʹ import * as ... Λආ͚Δ » Ұ෦ͷϥΠϒϥϦ͸ NODE_ENV=production ͰϏϧυ࣌࠷దԽ
20. ϚΠΫϩνϡʔχϯά্ڃฤ
21. terser ͱ஥ྑ͘ͳΔ » ΊͬͪΌݡ͍͜ͱΛ͢Δ͚Ͳҙ֎ͱ͙͢ఘΊΔͷͰ໨ࢹֶͯ͠΅͏ » https://try.terser.org/ ͕༑ୡ » ެ։ API Ҏ֎͸શ෦ 1~2 จࣈʹ͢Δؾ࣋ͪͰ
22. compress: Կ͕୹͘ͳΔ͔ʁ // source const long_long_name_1: string = 'a'; const long_long_name_2: string = 'b'; export const exported_name_is_not_shrinkable = long_long_name_1 + long_long_name_2; // out const o="ab";export{o as exported_name_is_not_shrinkable}; » ϩʔΧϧม਺͸֎ʹग़ͳ͍ͷͰ compress ର৅ (module લఏ) » export ͞ΕΔ໊લ͸୹͘ͳΒͳ͍
23. compress: ϝϯόΞΫηε͸َ໳ //source const x = { _private_value: 1, f() { return this._private_value;}, unused_prop2: 2, unused_prop3: 3, }; export const f = x.f; // out const e={_private_value:1,f(){return this._private_value}, unused_prop2:2,unused_prop3:3}.f;export{e as f};
24. compress: ΦϒδΣΫτΛ΍ΊΔͱ //source const private_value = 1; const unused_prop2 = 2; const unused_prop3 = 3; export const f = () => private_value; // out const o=()=>1;export{o as f};
25. ͞Βʹൃలฤ: ෳ਺ճ minify // source const x = { A: { B: { v: 2, C: { D: { v:4, E: { F: { v: 6 } } }}} }}; console.log(x.A.B.v,x.A.B.C.D.v,x.A.B.C.D.E.F.v); /*1*/ const v={B:{v:2,C:{D:{v:4,E:{F:{v:6}}}}}};console.log(v.B.v,v.B.C.D.v,v.B.C.D.E.F.v); /*2*/ const v={v:2,C:{D:{v:4,E:{F:{v:6}}}}};console.log(v.v,v.C.D.v,v.C.D.E.F.v); /*3*/ const o=2,v={D:{v:4,E:{F:{v:6}}}};console.log(o,v.D.v,v.D.E.F.v); /*4*/ const o={v:4,E:{F:{v:6}}};console.log(2,o.v,o.E.F.v); /*5*/ const o=4,c={F:{v:6}};console.log(2,o,c.F.v); /*6*/ console.log(2,4,6); » terser ͸ΞΫηεઌͷఆ਺൑ఆΛઙ͔͘͠΍ͬͯͳ͍ʂ » compress: { passes: 6 } (default: 1)
26. શ෦ఆ਺ԽͳΜͯ଱͑ΒΕͳ͍ਓ΁ mangle.properties.regex ͕࠷ޙͷखஈ // rollup plugins terser({ mangle: { properties: { regex: "^_" } } }), ਖ਼نදݱΛຬͨͨ͠ϓϩύςΟΛ mangle ର৅ʹ͢Δ ຊ౰ʹ ^_ ͕ϓϥΠϕʔτ͔Ͳ͏͔͸ਓ͕ؒ֬ೝ͠·͠ΐ͏
27. ϚΠΫϩνϡʔχϯά: TS ฤ (LTͰ͸࣌ؒແ͍ͷͰεΩοϓ)
28. TS: enum Λආ͚Δ // source enum XXX { AAA, BBB } XXX[XXX.AAA]; // out var XXX; (function (XXX) { XXX[XXX["AAA"] = 0] = "AAA"; XXX[XXX["BBB"] = 1] = "BBB"; })(XXX || (XXX = {})); XXX[XXX.AAA];
29. TS: const enum Λ࢖͏ // source const enum XXX { AAA, BBB } console.log(XXX.AAA, XXX.BBB); // out console.log(0,1); » "preserveConstEnum": false ͰݩΩʔΛফͤΔ » ݩΩʔ͕࢒Βͳ͍ͷͰ XXX[XXX.AAA] Ͱ͖ͳ͍
30. TS: private ͸ҙຯͳ͍ class C { constructor(private __private_x: number) {} private _private_method() { return this.__private_x;} public f() { return this._private_method();} } console.log(new C(1).f()); // out console.log(new class{constructor(t){this.__private_x=t}_private_method() {return this.__private_x}f(){return this._private_method()}}(1).f()); » terser ͸ TS ͷܕ৘ใͷ౎߹ͳΜͯ஌Βͳ͍
31. TS: ߏ଄ମʹ named tuple Λ࢖͏ type Range = [start: number, end: number]; const range: Range = [1, 3]; const inRange = (x: number, [start, end]: Range) => { return start <= x && x <= end; } » ݻఆ௕ͷ഑ྻͷϝϯόʹ໊લΛ͚ͭΔ͜ͱ͕Ͱ͖Δ » ϓϩύςΟ໊͕ index ͳͷͰม਺໊ͷίετ͕গͳ͍ » (3 ݸҎ্ͩͱਓ͕ؒ͠ΜͲ͘ͳͬͯ͘Δ)
32. TS: ύϑΥʔϚϯεͷͨΊͷ tsconfig.json { "compilerOptions": { "target": "es2019", // 2017 Ҏ߱͸ async await Λม׵͠ͳ͍ "importHelpers": true, // tslib Λ࢖͏ "preserveConstEnums": false, // enum ͷΠϯϥΠϯల։Λڧ੍ "noUnusedLocals": true, // ະ࢖༻ม਺ͷܯࠂ "noUnusedParameters": true, // ະ࢖༻Ҿ਺ͷܯࠂ "importsNotUsedAsValues": "error", // import type ͷڧ੍ } }
33. ࣮ફ݁Ռͷ঺հ
34. ࣮ફ݁Ռ: @mizchi/mints » αΠζಛԽͷ TypeScript ίϯύΠϥ: 8.1 kb(gzip) // npm install --save @mizchi/mints import { transformSync } from "@mizchi/mints"; const out = transfromSync("const x: number = 1;"); console.log(out.code); // const x=1;
35. Ͳ͏΍ͬͯখ͔ͨ͘͞͠ » ࣗ࡞ύʔαίϯϏωʔλͰ named tuple ͷߏจఆٛΛు͘ » ߏจఆٛΛ cbor ͰόΠφϦʹѹॖ » ϥϯλΠϜʹ͸όΠφϦΛΠϯϥΠϯԽ » ϕϯνऔΔͱ֎෦ binary Λ fetch ͢ΔΑΓஅવ଎͔ͬͨ » (ASIະରԠͰ prettier Λલఏ)
37. Shakerphobia ͷ঺հ » ੿࡞ https://shakerphobia.netlify.app/ » bundlephobia Ͱ͸Θ͔Βͳ͍ treeshake ޙͷαΠζΛܭଌ » skypack + webworker + rollup Ͱϒϥ΢β಺ͰϏϧυ
38. ·ͱΊ » ͳΜʹͤΑ Treeshake ͷཧղ͕େࣄ » terser ͸ϝϯόΞΫηεʹऑ͍ » ಛʹΦϒδΣΫτ಺ఆ਺Λආ͚Α͏ » ࠷ऴखஈͱͯ͠ mangle.properties.regex » ϥΠϒϥϦ࡞ऀ͸ґଘπϦʔ্ͷෛՙ͔ͩΒؤுΕ (কདྷతʹ͸ TS ܕ৘ใ࢖ͬͯ Side Effect ൑ఆ͢Δ minifier ͕ग़Δͱࢥ͏͚Ͳɺݱঢ়ͳ͍Ͱ͢)
39. ͓ΘΓ