はてなブログのブログ表示に必要なJSを1/6にした話

2023/11/16 Hatena Engineer Seminar #27「パフォーマンスチューニング編」

Transcript

1. ͸ͯͳϒϩάͷϒϩάදࣔʹ ඞཁͳJSΛ1/6ʹͨ͠࿩ id: nanimono_demonai 2023/11/16 Hatena Engineer Seminar #27ʮύϑΥʔϚϯενϡʔχϯάฤʯ
2. 1. ࣗݾ঺հ 2. ύϑΥʔϚϯεͷࢦඪͱܭଌ 3. ͸ͯͳϒϩάͷJS 4.͸ͯͳϒϩάͷJSͷ࡟ݮํ๏ 5. ύϑΥʔϚϯεվળ 6. ϑΟʔνϟʔϑϥά࣮ݱ
3. ࣗݾ঺հ • id: nanimono_demonai • @NanimonoDaemon • େֶͰ͸ػցֶशͷݚڀ • ʮגࣜձࣾ͸ͯͳʯʹ2020೥ʹब৬ • ීஈ͸TypeScript/React/CSSͷ৘ใΛ௥͍ͬͯΔ 3
4. ͸ͯͳϒϩάͷ঺հίʔφʔ • ͸ͯͳϒϩά͸ϦϦʔε͔Β12೥໨ʂ • ʮAIλΠτϧΞγετʯػೳΛΫϩʔζυβެ։ • AIΛ༻͍ͯɺຊจͷ಺༰͔Β͸ͯͳϒϩάͰઃఆͰ͖Δ3ͭͷλΠτϧ ʮݟग़͠ɾλΠτϧཁૉɾSNS޲͚λΠτϧʯͦΕͧΕͷλΠτϧΛఏҊ 4 ೥قͷ͋ΔϓϩμΫτͷ࠷ۙͷ࿩ ࢥ͍͸ݴ༿ʹɻ ͸ͯͳϒϩά͸ɺ͋ͳͨͷࢥ͍΍ߟ͑Λ࢒ͨ͠Γɺ
 ͞·͟·ͳਓ͕௲ͬͨଟ༷ͳՁ஋؍ʹ৮ΕͨΓͰ͖Δ৔ॴͰ͢ɻ
5. ࠷ۙͷ͸ͯͳϒϩά • ͸ͯͳϒϩάͷύϑΥʔϚϯεΛվળ 5 https://staff.hatenablog.com/entry/2023/07/07/122734 ͸ͯͳϒϩάͷӾཡମݧվળͷऔΓ૊Έʹ͍ͭͯ ࠷͍͔ۙͭ͘ͷվળࢪࡦΛϦϦʔε͍ͨ͠·ͨ͠ɻ • ৽ணهࣄɺ஫໨هࣄϞδϡʔϧͳͲͷը૾ͷ஗ԆಡΈࠐΈ • ϒϩάͷදࣔʹඞཁͳJavaScriptΛݟ௚ͯ͠ϑΝΠϧαΠζΛ࡟ݮ • ͦͷଞࡉ͔͍վળ JSΛݮΒͨ͠ํ๏Λ঺հ
6. ύϑΥʔϚϯεվળ • දࣔΛշదʹ͢Δ • දࣔޙͷཁૉͷͣΕΛܰݮ͢Δ • Accessibility • ϖʔδͷදࣔ଎౓Λ্͛Δ • Ԡ౴଎౓Λ্͛Δ • ίϯςϯπͷදࣔ଎౓Λ্͛Δ • Ϣʔβʔ͕ૢ࡞Ͱ͖Δ·Ͱͷ࣌ؒΛ୹͘͢Δ • etc… 6 ͸ͯͳϑΥτϥΠϑͷը૾Λදࣔ͢Δࡍʹɺը໘ʹζϨ͕ੜ͡ͳ͍Α͏มߋ͠·͠ ͨ - ͸ͯͳϒϩά։ൃϒϩά ը૾ͷදࣔͰը໘͕ζϨͳ͍Α͏มߋͨ͜͠ͱͰɺ͸ͯͳϒϩάͷԿ ͕վળ͞Εͨͷ͔
7. 2. ύϑΥʔϚϯεͷࢦඪͱܭଌ 
8. ϖʔδύϑΥʔϚϯεͷࢦඪ: Ұ෦ • ఻౷తͳࢦඪ • TTFB (s) - Time To First Byte: ϖʔδͷμ΢ϯϩʔυ։࢝࣌ؒ • Page Weight (byte) -ϖʔδͷαΠζ • ϖʔδಡΈࠐΈ׬ྃͷࢦඪ • FCP (s) -First Contentful Paint : ࠷ॳͷ”ίϯςϯπ”͕දࣔ͞Εͨ࣌ؒ • LCP (s) - Largest Contentful Paint: ࠷େͷ”ίϯςϯπ”ͷදࣔ࣌ؒ • Speed Index (s) - ϖʔδͷදࣔ׬ྃ཰ΛՃຯͨ͠දࣔ࣌ؒ • ϖʔδͷԠ౴ੑͷࢦඪ • FID (s) - First Input Delay: ࠷ॳͷૢ࡞ՄೳʹͳΔ·Ͱͷ࣌ؒ • TTI (s) - Time to Interactive: ૢ࡞ՄೳʹͳΔ·Ͱͷ࣌ؒ • TBT (s) - Total Blocking Time: FCPͱTTIͷ߹ܭ • INP (s) -Interaction to Next Paint: ϖʔδ্ͷ͢΂ͯͷΠϯλϥΫγϣϯޙͷ࣍ͷඳը·Ͱͷ࣌ؒͰ࠷΋஗͍࣌ؒ • ࢹ֮త҆ఆੑͷࢦඪ • CLS (ແ୯Ґ) - ϖʔδͷදࣔதʹى͖ͨίϯςϯπͷζϨͷࢦඪ 8 ίϯςϯπ
   
   ςΩετɺը૾
   എܠը૾ΛؚΉ ɺTWH
   ཁૉɺനҎ֎ͷ
   DBOWBT
   ཁૉͷ͜ͱ https://web.dev/metrics/
9. CWV - CoreWebVitals • Googleͷൃදͨ͠ॏཁࢦඪ3બ • ͍ͣΕ΋ϖʔδͷϢʔβʔମݧʹؔΘΔ΋ͷ • ϖʔδಡΈࠐΈ׬ྃͷࢦඪ • LCP (s) - Largest Contentful Paint: ࠷େͷ”ίϯςϯπ”ͷදࣔ࣌ؒ • ϖʔδͷԠ౴ੑͷࢦඪ • FID (s) - First Input Delay: ࠷ॳͷૢ࡞ՄೳʹͳΔ·Ͱͷ࣌ؒ • ࢹ֮త҆ఆੑͷࢦඪ • CLS (ແ୯Ґ) - ϖʔδͷදࣔதʹى͖ͨίϯςϯπͷζϨͷࢦඪ 9 ίϯςϯπ
   
   ςΩετɺը૾
   എܠը૾ΛؚΉ ɺTWH
   ཁૉɺനҎ֎ͷ
   DBOWBT
   ཁૉͷ͜ͱ
10. CWVͷۙگ - CWVͷࢦඪͷมߋ • ͜Ε·Ͱ • FID (sec) - First Input Delay: ࠷ॳͷૢ࡞ՄೳʹͳΔ·Ͱͷ࣌ؒ • 2024೥3݄͔Β • INP (sec) -Interaction to Next Paint ϖʔδ্ͷ͢΂ͯͷΠϯλϥΫγϣϯޙͷ࣍ͷඳը·Ͱͷ࣌ؒͰ࠷ ΋஗͍࣌ؒ 10 ͢΂ͯͷΠϯλϥΫγϣϯʹجͮ͘ͷͰɺԠ౴ੑΛแׅతʹධՁ INP͸FIDΑΓ΋શମతͳԠ౴ੑͷΑΓ৴པੑͷߴ͍ࢦඪ https://developers.google.com/search/blog/2023/05/introducing-inp
11. INP • ϖʔδ্ͷ͢΂ͯͷΠϯλϥΫγϣϯޙͷ࣍ͷඳը·Ͱͷ࣌ؒͰ࠷΋஗͍ ࣌ؒ • ͙͢ʹදࣔͰ͖ͳͯ͘΋ϩʔσΟϯάཁૉͳͲग़ͤ͹ྑ͍ • ϖʔδ͕INPΛฦͤͳ͍Մೳੑ͕͋Δ 11 • ϖʔδ্શͯ • ϝΠϯυΩϡϝϯτɺ͓ΑͼɺυΩϡϝϯτʹຒΊࠐ·Εͨiframe • ΠϯλϥΫγϣϯ • Ϛ΢εΫϦοΫ • λονεΫϦʔϯͷλοϓ • ෺ཧΩʔϘʔυ·ͨ͸ΦϯεΫϦʔϯΩʔϘʔυͷΩʔΛԡ͢ɻ • ϗόϦϯάͱεΫϩʔϧ͸ߟྀͤͣ • ࠷΋஗͍࣌ؒ • ΠϯλϥΫγϣϯ͕ଟ͍ͱ99%ileΛใࠂ
12. ύϑΥʔϚϯεվળͷͨΊʹ • ϢʔβʔϥϯυͷύϑΥʔϚϯεΛܧଓతʹ؂ࢹ͍ͨ͠ • վળͷޮՌ͕ݕূͰ͖Δ • ύϑΥʔϚϯεͷԼམʹΞϥʔτΛ࢓ࠐΉ͜ͱΛ͢Δ͜ͱͰ ࢪࡦʹΑΔύϑΥʔϚϯεྼԽͳͲʹؾ͕͚ͭΔ • ͦͷͨΊʹɺ͜Μͳπʔϧ͕ཉ͍͠ • CWVΛܭଌͰ͖Δπʔϧ • ܭଌͨ݁͠ՌΛ·ͱΊͯ͘ΕΔπʔϧ 12 ܭଌ͕͍ͨ͠
13. CWVͷܭଌ • Chromeͷ։ൃऀπʔϧʹ͍͍ͭͯΔLighthouseͰܭଌͰ͖Δ • INP͸ʮφϏήʔγϣϯʯͰ͸ଌఆͰ͖ͳ͍ͷͷͰʮଌఆظؒʯͰଌఆ • Google Search Console͔Β΋֬ೝͰ͖Δ • WebPageTestͰܭଌͰ͖Δ • https://www.webpagetest.org/ • SentryΛ࢖͏ • https://sentry.io 13
14. Sentryͱ͸Կ͔ • ΤϥʔͷՄࢹԽ • ؂ࢹ • Sentry/Performance Monitoring • SentryͷμογϡϘʔυ্ͰύϑΥʔϚϯεଌఆ͕Ͱ͖Δ • Core Web Vitalsͷܭଌ͕Մೳ • INP͸·ͩଌఆͰ͖ͳ͍ • SentryΛಋೖ͍ͯ͠ΔͳΒ͹؆୯ʹಋೖͰ͖Δ • ͦΕࣗମ΋JSͳΒϥΠϒϥϦΛಡΈࠐΉ͚ͩͰγϯϓϧʹಋೖՄೳ 14
15. SentryΛબΜͩཧ༝ • ͢ͰʹSentryΛΤϥʔऩूͰಋೖ͍ͯ͠Δ • ύϑΥʔϚϯεͷྼԽʹ͸Τϥʔ͕൐͏͜ͱ͕͋ΔͷͰɺಉ͡ը໘Ͱ؍ ΕΔͱ͓ಘ • طଘͷSDKʹύϑΥʔϚϯεଌఆػೳΛࡌ͚ͬΔ࢓૊ΈͰಋೖՄೳ • ͞·͟·ϒϥ΢βͷCWV͕ܭଌͰ͖Δ • ※ Ұ෦ͷࢦඪ͸Chromeͷ΋ͷ͔͠ݟΕͳ͍ 15
16. SentryͰܭଌͨ͠ޙͷμογϡϘʔυͷ༷ࢠ 16 ܭଌ͸͸ͯͳͰ؅ཧ͍ͯ͠Δϒϩάͷ
    Ұ෦͚͕ͩର৅
17. ಋೖͯ͠ؾ͕͍ͭͨ͜ͱ • SDKΛonʹ͚ͨͩ͠Ͱ͸ɺσʔλ͕όϥόϥͰղੳ͕ͮ͠Β͍ • σϑΥϧτͰ͸URL͕ه࿥୯ҐͰ͋Δ͕… • ϒϩά͸ϚϧνςφϯτͰ • URLͷ਺͕͔ͳΓଟ͍ • ͔͠͠ɺURL͕ҧͬͯ΋ಉ͡छྨͷϖʔδΛه࿥୯Ґͱ͍ͨ͠ • ಉ͡छྨͷϖʔδͰ΋ϒϩάʹΑͬͯ܏޲͕ҧ͏ 17 ܭଌ୯Ґͷ੔ཧΛ͢Δඞཁ͕͋ͬͨ
18. ੔ཧͨ͠಺༰ • ه࿥୯Ґ: transaction-name • ϖʔδͷछྨͰCWVΛܭଌ͢Δ • छྨ: • ϒϩάͷهࣄϖʔδ • Ұཡϖʔδ • ؅ཧը໘ͷϖʔδ͝ͱ • ϒϩά͝ͱʹҧ͏ه࿥୯Ґʹ͢Δ • ͜ΕҎ֎ʹৄ͍͠಺༰Λݟ͚ͨΕ͹ɺSentryͷλάΛ࢖ͬͯ֬ೝ͢Δ 18
19. Sentry ͷσϑΥϧτͷμογϡϘʔυͰ͸ͳ͘ɺ࢖͍΍͍͢ܗʹ͢Δ 19
20. ܭଌج൫Λ੔͑ͨͷͰվળ • LCP͕஗͍ϖʔδΛμογϡϘʔυ͔Βݟ͚ͭͯ͜ΒΕΔ • ۩ମతʹ͸هࣄҰཡϖʔδ • SentryͷμογϡϘʔυ͔ΒݸผϖʔδͷϨίʔυΛݟΔͱ • ը૾ಡΈࠐΈ͕ଟ͍ϖʔδͰ͋Δ͜ͱ͕Θ͔Δ • LCPʹӨڹ͢Δઌ಄ͷํͷը૾͔ΒಡΈࠐ·Ε͍ͯͳ͍ • → ʮը૾ͷಡΈࠐΈॱΛ౷੍ͯ͠΍Ε͹LCP͕վળ͢Δʯ ͱ͍͏Ծઆཱ͕ͭ • ը૾ͷಡΈࠐΈॱΛίϯτϩʔϧ͢ΔվળΛಋೖ 20
21. Sentry͚ͩͰվળํ๏͕ؾ͕͚ͭΔ͔ʁ • ஗͍ϖʔδΛݟ͚ͭͨΒखݩͷLighthouseΛ૸ΒͤΔ • ʮվળͰ͖Δ߲໨ʯ͕ώϯτ • ࠓճͷྫͰ͸ʮΦϑεΫϦʔϯը૾ͷ஗ԆಡΈࠐΈʯ • खݩͷLighthouse͸͋͘·Ͱ̍αϯϓϧ • SentryʹஷΊΔ͜ͱͰશମ؍͕͔ͭΊΔ 21 ͜͜·ͰͰJS͕σΧ͗͢Δͷ͕໰୊ͩͱΘ͔͖ͬͯͨ
22. 3. ͸ͯͳϒϩάͷJS
23. ͸ͯͳϒϩάͷJS - ྺ࢙ͱແடং • ͸ͯͳϒϩά͸೔ʑ։ൃ͞Ε͍ͯΔ • ϑϩϯτΤϯυͷίʔυ͸ଟ͍ • աڈݱࡏͷϑϩϯτΤϯυͷΪϟοϓ͕ແடংΛੜΉ • ݴޠ, ελΠϧ, ςετ, etc… • Ϟδϡʔϧܗࣜͷࠞࡏ 23 From Kyoto.js 12 https://speakerdeck.com/nanimonodemonai/ hatenaburogufalsehurontoendonizhi-xu- hamotarasaretafalseka ࠓճ͸ϞδϡʔϧΛ੔͑ͨ࿩ +BWB4DSJQU ߦ 5ZQF4DSJQU ߦ
24. ͸ͯͳϒϩάͷJS - ”چ”ϏϧυπʔϧνΣʔϯ 24
25. ͸ͯͳϒϩάͷJS - ”چ”ΞʔΩςΫνϟ 25 ϖʔδʹڞ௨ͳJSΛಡΈࠐΜͰ͍Δ
26. ͳΜͰΤσΟλʹඞཁͳJSΛϒϩάͰ΋औΓࠐΜͰ͍Δͷʂʁ • ΤσΟλͱڞ௨ͳϞδϡʔϧ͕ଘࡏ͍ͯ͠Δ • աڈʹ͸ϒϩάͰʮͦͷ৔هࣄฤूʯ͕Ͱ͖ͨ • ݱࡏ΋άϩʔόϧϔομ͸ڞ௨ͷϞδϡʔϧ • ։ൃॳظͷπʔϧνΣʔϯͰ͸JSͷ෼ׂ͸৬ਓٕ͕ඞཁͩͬͨ • ϒϩά͸ྺ࢙ͷ͋ΔϓϩμΫτͰ͢… • hatenablog.jsҰݸ͚ͩͱ͍͏ੈք؍͸ͦΕ͸ͦΕͰγϯϓϧ • ΋ͪΖΜσϝϦοτ͸JSαΠζ͕ංେԽ͢Δ͜ͱ 26
27. 4.͸ͯͳϒϩάͷJSͷ࡟ݮํ๏
28. …ͷલʹɺ JSͷϞδϡʔϧܗࣜΛ෮श͠·͠ΐ͏
29. JSͷϞδϡʔϧܗࣜʹ͍ͭͯ • JSͷϞδϡʔϧܗࣜ • CJS: Node.jsͰ࠾༻͞Ε͍ͯΔܗࣜ • requireؔ਺ͰϞδϡʔϧղܾ • ESM: ES2015͔ΒJSͷ࢓༷ʹೖͬͨϞδϡʔϧܗࣜ • import/exportจͰϞδϡʔϧղܾ • ͸ͯͳϒϩάͰ͸͜ΕΒ͕ࠞࡏ • Ϗϧυ࣌ʹESMΛCJSʹม׵͍ͯͨ͠ (Babel preset-envͱtscon fi gͰmodule = “common”ͱ͍ͯͨ͠) 29
30. CJS/ESMࠞࡏͷۤ͠͞ • CJSܗࣜͰಡΈࠐΜͩϞδϡʔϧ͸੩తղੳ͕ޮ͖ͮΒ͍ • CIΛ͢Γൈ͚ͯϏϧυ͸௨Δͷʹɺ࣮ߦ࣌ʹΤϥʔʹͳ͍ͬͯΔ • ESMͳΒ͹Webpack͕Ϗϧυ࣌ʹϞδϡʔϧղܾΛνΣοΫ͢Δ • Ϟδϡʔϧʹؔ͢ΔTreeShaking΍σουίʔυ࡟আ͕ޮ͔ͳ͍ • requireؔ਺Λ࢖ͬͯ΋ޮ͔ͤΒΕΔํ๏͸͋Δ͸͕ͣͩ… 30 &4.$+4͕͍ࠞͬͯ͟Δ͜ͱ͸͠ΜͲ͍ʂʁ
31. CJS→ESMԽͷ΍Γํ: આಘฤ • ίʔυͷશ໘తͳมߋʹͳΔͷͰɺ޻਺͕ඞཁ • ಈ࡞νΣοΫΛೖ೦ʹ͍ͨ͠ͳͲ • ޻਺ΛͱͬͯͰ΋΍Δ΂͖λεΫͰ͋Δ͜ͱΛೲಘͯ͠΋Β͍͍ͨ 31 CJS->ESM͸ޮՌ͕͋Γͦ͏ɺͰ΋આ໌͍ͨ͠ΑͶ ͜͜Ͱܭଌ͍ͯ͠Δͷ͕ޮ͍ͯ͘Δʂʂʂ
32. CJS→ESMԽͷ΍Γํ: ͏·ຯ • ύϑΥʔϚϯεվળͷͨΊʹඞཁͳίʔυ࠷దԽͰ͋Δ • ϒϩάը໘͔ΒΤσΟλʹඞཁͳػೳΛ҆શʹ෼཭Ͱ͖Δʂ • TreeShaking͕Ͱ͖Δ • ͞Βʹ։ൃମݧͷ޲্ʹ΋ܨ͕Δʂ • ੩తղੳ͕ޮ͖΍͍͔͢Β • CJSͱESMࠞࡏΛ࣮ݱ͢ΔͨΊͷઃఆϑΝΠϧͷهड़͕ͳ͘ͳΔ 32
33. CJS→ESMԽͷ΍Γํ: ͞ΒͳΔ͏·ຯ: ϑΟʔνϟʔϑϥά • ͞Βʹ৽ػೳ։ൃ͕ศརʹͳΔ • ϑΟʔνϟʔϑϥά͕͋Ε͹… • ։ൃମݧ͕޲্ • ৽ػೳ։ൃ͍ͯ͠Δ͜ͱΛϢʔβʔʹӅ͢͜ͱ͕༰қʹ • σϞ΋͠΍͘͢ • ৽ػೳΛඇΤϯδχΞʹࢼͯ͠΋Β͏ͷ͕༰қʹͳΔ • σϞΛ௨ͯ͡ϦϦʔε·Ͱʹ׬੒౓Λ্͛ΒΕΔ • ͦͷଞʹ΋ • ABςετͱ͔ 33 ͋ͱͰ΋͏Ұճ࿩͠·͢
34. CJS→ESMԽͷ΍Γํ: ࡞ۀฤ • େྔʹ͋ΔͷͰࣗಈม׵ • jscodeshiftͷcommonjs-to-es-module-codemodΛ࢖༻ • ESMʹ౷Ұͨ͠ΒɺWebpack͕ϞδϡʔϧղܾͷΤϥʔΛग़͢Α͏ʹ • ػցతͳஔ׵ʹΑΔΤϥʔ΋ؾ͕͚ͭɺࣗ৴Λ࣋ͬͯҠߦ͕Ͱ͖ͨ 34 ෺ྔ͸ׂ͕͋ͬͨͱ؆୯ʹͰ͖ͨ https://www.npmjs.com/package/commonjs-to-es-module-codemod https://www.npmjs.com/package/jscodeshift ࣗಈతʹஔ׵Ͱ͖ͳ͔ͬͨ΋ͷͷྫ • named export͍ͯ͠ͳ͍ͷʹnamed import͍ͯ͠ΔϞδϡʔϧ • ΦϒδΣΫτΛ࡞͔ͬͯΒdefault export͍ͯ͠ΔϞδϡʔϧ
35. ݁ՌͲ͏ͳ͔ͬͨ……ʁ
36. 5. ύϑΥʔϚϯεվળ
37. ϒϩάͷJSαΠζ࡟ݮͰύϑΥʔϚϯεվળ • ESMԽʹΑͬͯTreeShaking͕ޮ͖ɺJSͷαΠζ͕࡟ݮ • ಉ࣌ʹTreeShaking͕ޮ͘ϥΠϒϥϦʹม͑ͨ (lodash -> lodash-es) • ߹Θͤͯόϯυϧͷ࠷దԽ΋࣮ࢪ • ϒϩάͷμογϡϘʔυͷJSΛϒϩάදࣔ໘͔Βୀආ • ߹Θͤͯάϩʔόϧϔομ΋όϯυϧ෼ׂ 37 ϒϩάΛӾཡ͢ΔͨΊʹඞཁͳ+4͕લ݄ൺ
38. ͸ͯͳϒϩάͷJS - ΞʔΩςΫνϟ 38 ϖʔδ͝ͱʹద੾JSΛಡΈࠐΜͰ͍Δ
39. ϒϩάΛӾཡ͢ΔͨΊʹඞཁͳJS͕લ݄ൺ1/6 39 ݱࡏ͸൒೥લͷ10෼ͷ1αΠζ վળલ ݄ όϯυϧ෼ׂޙ  &4.౷Ұޙ  ݱࡏ IBUFOBCMPHKT 
    .# ,# 
    ,# 
    ,# 
    ,# 
    ,# 
    ,# 
    ,# CVOEMF HMPCBMIFBEFSKT 
    ,# 
    ,# 
    ,# 
    ,# 
    ,# 
    ,# ϖʔδڞ௨෦෼
    WFOEPSKT 
    .# 
    ,# 
    ,# 
    ,# ϖʔδڞ௨෦෼
    DPNNPOTKT 
    ,# 
    ,# ߹ܭ 
    .# ,# ,# ,# 
    ,# ,# 
    ,# ,#
40. ύϑΥʔϚϯεվળ - ·ͱΊ • શϖʔδ͝ͱʹڞ௨ͷJSͰ͸ͳ͘ɺը໘͝ͱʹผͷJSʹ͢Δ • ܭଌʹΑͬͯΠϯύΫτΛࣔͤͨʂ • ESMԽʹΑͬͯJSͷαΠζΛ࡟ݮ • ίʔυ࠷దԽʹΑΔTreeShakingͳͲ͕͖͍ͨ • ࠓޙ͸ɺΞʔΩςΫνϟΛݟ௚ͯ͠JSͷαΠζΛݮΒ͢ 40
41. 6. ϑΟʔνϟʔϑϥά࣮ݱ
42. ϑΟʔνϟʔϑϥά • ࠓ·Ͱ։ൃதͷػೳΛӅͯ͠։ൃ͢Δʹ͸… • ϏοάόϯϦϦʔε • ख࡞ΓͷJSͰύονΛ౰ͯΔ • ৽ػೳ։ൃ͕େมͩͬͨ 42
43. CJS→ESMԽͷ΍Γํ: આಘฤ (࠶ܝ) • ৽ػೳ։ൃ͕ศརʹͳΔ • ϑΟʔνϟʔϑϥά͕͋Ε͹… • ։ൃମݧ͕޲্ • ৽ػೳ։ൃ͍ͯ͠Δ͜ͱΛϢʔβʔʹӅ͢͜ͱ͕༰қʹ • σϞ΋͠΍͘͢ • ৽ػೳΛඇΤϯδχΞʹࢼͯ͠΋Β͏ͷ͕༰қʹͳΔ • σϞΛ௨ͯ͡ϦϦʔε·Ͱʹ׬੒౓Λ্͛ΒΕΔ • ͦͷଞʹ΋ • ABςετͱ͔ 43 ESMԽͰϑΟʔνϟʔϑϥάΛ࣮ݱͨ͠
44. ϑΟʔνϟʔϑϥάΛ࣮ݱ͢ΔͨΊʹ͸ • ESMͰಈ͘Α͏ͳͬͨTreeShakingΛ׆༻ͯ͠ɺ ಉ͡ιʔε͔Βϑϥά͝ͱʹҧ͏JSΛు͖ग़ͤΔΑ͏ʹ͢Δ • WebpackͷDe fi nePluginͰιʔεதͷϑΟʔνϟʔϑϥάม਺Λ Ϗϧυ࣌ʹఆ਺ʹஔ͖׵͑ɺDeadCode࡟আ͢Δ 44
45. ͸ͯͳϒϩάͷJS - ΞʔΩςΫνϟ࠶ߏ2 45
46. ϑΟʔνϟʔϑϥά • Ϗϧυ࣌ʹDead Code࡟আͰϑΟʔνϟʔϑϥάΛ࣮ݱ • WebpackͰ Ϗϧυ࣌ʹ FEATURES.featureA Λ false͔trueʹม׵͢Δ • Webpack De fi ne Plugin • WebpackͰ if(false){ } ͱͳΔՕॴΛফͯ͠΋Β͏ • Webpack.optimizeͷػೳ • TreeShakingͰimport͍ͯ͠Δ͕࢖ΘΕͯͳ͍Ϟδϡʔϧ͸ফ͑Δ 46 if (FEATURES.hogehoge){ / / fugafuga const elem = document.querySelector<HTMLElement>('.js - fugafuga'); if (elem) renderHogehoge(elem); }
47. ·ͱΊ
48. ·ͱΊ • Sentry Λ࢖͏͜ͱͰύϑΥʔϚϯεͷܭଌج൫Λ࡞੒Ͱ͖ͨ • ϒϩάͷJSΛ࡟ݮ • ͦͷͨΊʹESMԽΛ࣮ࢪ • όϯυϧͷ࡞ΓํΛݟ௚ͯ͠ύϑΥʔϚϯεվળ • TreeShakingͰϑΟʔνϟʔϑϥάΛ࣮ݱ 48 ͜Ε͔Β΋ϒϩάͷϑϩϯτΤϯυΛΑͯ͘͠ɺ ύϑΥʔϚϯε΋։ൃମݧ΋্͍͛ͯͧ͘