はてなブログのESM化

開発初期から継ぎ足されてきたはてなブログのフロントエンドのコードをES Moduleに統一したことを通じて、ブログのパフォーマンスを改善し新機能開発もしやすくした話

Transcript

1. ͸ͯͳϒϩάͷESMԽ id: nanimono_demonai 2023/9/27 Kyoto Tech Talk #2
2. 1. ࣗݾ঺հ 2. ͸ͯͳϒϩάͷJS 3. ESMԽͷಈػͱ΍Γํ 4. ύϑΥʔϚϯεվળ 5. ϑΟʔνϟʔϑϥά࣮ݱ
3. ࣗݾ঺հ • id: nanimono_demonai • @NanimonoDaemon • େֶͰ͸ػցֶशͷݚڀ • ʮגࣜձࣾ͸ͯͳʯʹ2020೥ʹब৬ • ීஈ͸TypeScript/React/CSSͷ৘ใΛ௥͍ͬͯΔ • ੲSCP-JPͷ؅ཧऀ΍͍ͬͯ·ͨ͠ • ࠓ͸ࣗಈंͷ໔ڐऔΖ͏ͱ͍ͯ͠·͢ 3
4. ͸ͯͳϒϩάͷ঺հίʔφʔ • ͸ͯͳϒϩά͸ϦϦʔε͔Β12೥໨ʂ • ࠓ೥ͷ6݄ʹ͸هࣄͷ༗ྉൢചػೳ௥Ճʂ • codocגࣜձ͕ࣾఏڙ͢ΔίϯςϯπൢചαʔϏεʮcodocʢίʔυΫʣʯͱͷ ࿈ܞʹΑΓ͸ͯͳϒϩάͰɺϒϩάهࣄͷ༗ྉൢച͕Ͱ͖ΔΑ͏ʹͳΓ·ͨ͠ 4 ೥قͷ͋ΔϓϩμΫτͷ࠷ۙͷ࿩ ࢥ͍͸ݴ༿ʹɻ ͸ͯͳϒϩά͸ɺ͋ͳͨͷࢥ͍΍ߟ͑Λ࢒ͨ͠Γɺ
 ͞·͟·ͳਓ͕௲ͬͨଟ༷ͳՁ஋؍ʹ৮ΕͨΓͰ͖Δ৔ॴͰ͢ɻ
5. ࠷ۙͷ͸ͯͳϒϩά • ͸ͯͳϒϩάͷύϑΥʔϚϯεΛվળ • ͸ͯͳϒϩάʹϑΟʔνϟʔϑϥάΛ͚ͭͯ։ൃମݧΛ޲্ 5 ͦͷഎޙʹ͸ɺ͸ͯͳϒϩάͷ&4.Խ͋Γ https://staff.hatenablog.com/entry/2023/07/07/122734 ͸ͯͳϒϩάͷӾཡମݧվળͷऔΓ૊Έʹ͍ͭͯ
6. ͸ͯͳϒϩάͷJS
7. ͸ͯͳϒϩάͷJS - ྺ࢙ͱແடং • ͸ͯͳϒϩά͸೔ʑ։ൃ͞Ε͍ͯΔ • ϑϩϯτΤϯυͷίʔυ͸ଟ͍ • աڈݱࡏͷϑϩϯτΤϯυͷΪϟοϓ͕ແடংΛੜΉ • ݴޠ, ελΠϧ, ςετ, etc… • Ϟδϡʔϧܗࣜͷࠞࡏ 7 From Kyoto.js 12 https://speakerdeck.com/nanimonodemonai/ hatenaburogufalsehurontoendonizhi-xu- hamotarasaretafalseka ࠓճ͸ϞδϡʔϧΛ੔͑ͨ࿩ +BWB4DSJQU ߦ 5ZQF4DSJQU ߦ
8. ͸ͯͳϒϩάͷJS - ”چ”ϏϧυπʔϧνΣʔϯ 8
9. ͸ͯͳϒϩάͷJS - ”چ”ΞʔΩςΫνϟ 9 ϖʔδʹڞ௨ͳJSΛಡΈࠐΜͰ͍Δ
10. ESMԽͷಈػͱ΍Γํ
11. JSͷϞδϡʔϧܗࣜʹ͍ͭͯ • JSͷϞδϡʔϧܗࣜ • CJS: Node.jsͰ࠾༻͞Ε͍ͯΔܗࣜ • requireؔ਺ͰϞδϡʔϧղܾ • ESM: ES2015͔ΒJSͷ࢓༷ʹೖͬͨϞδϡʔϧܗࣜ • import/exportจͰϞδϡʔϧղܾ • ͸ͯͳϒϩάͰ͸͜ΕΒ͕ࠞࡏ • Ϗϧυ࣌ʹESMΛCJSʹม׵͍ͯͨ͠ (Babel preset-envͱtscon fi gͰmodule = “common”ͱ͍ͯͨ͠) 11
12. CJS/ESMࠞࡏͷۤ͠͞ • CJSܗࣜͰಡΈࠐΜͩϞδϡʔϧ͸੩తղੳ͕ޮ͖ͮΒ͍ • CIΛ͢Γൈ͚ͯϏϧυ͸௨Δͷʹɺ࣮ߦ࣌ʹΤϥʔʹͳ͍ͬͯΔ • ESMͳΒ͹Webpack͕Ϗϧυ࣌ʹϞδϡʔϧղܾΛνΣοΫ͢Δ • Ϟδϡʔϧʹؔ͢ΔTreeShaking΍σουίʔυ࡟আ͕ޮ͔ͳ͍ • requireؔ਺Λ࢖ͬͯ΋ޮ͔ͤΒΕΔํ๏͸͋Δ͸͕ͣͩ… 12 &4.$+4͕͍ࠞͬͯ͟Δ͜ͱ͸͠ΜͲ͍ʂʁ
13. CJS→ESMԽͷ΍Γํ: આಘฤ • ίʔυͷશ໘తͳมߋʹͳΔͷͰɺ޻਺͕ඞཁ • ಈ࡞νΣοΫΛೖ೦ʹ͍ͨ͠ͳͲ • ޻਺ΛͱͬͯͰ΋΍Δ΂͖λεΫͰ͋Δ͜ͱΛೲಘͯ͠΋Β͍͍ͨ → վળΛߟ͑ٞ࿦Ͱ͖Δ৔ͰઆಘࡐྉΛἧ͑Δ • վળΛߟ͑ٞ࿦Ͱ͖Δ৔ • ͓༡ٔձʢޙड़ʣ • ϑϩϯτΤϯυձ • આಘࡐྉ • ։ൃମݧ޲্, ύϑΥʔϚϯε޲্, ৽ػೳ։ൃ͕ศརʹ, ෳࡶੑ͕গͳ͍ 13 CJS->ESM͸ޮՌ͕͋Γͦ͏ɺͰ΋આ໌͍ͨ͠ΑͶ
14. ͓༡ٔձ • ;ͩΜͷλεΫҎ֎ͷ͜ͱΛ΍Δ࣌ؒ • ִि ൒೔ • ΤϯδχΞ͕ؾʹͳ͍ͬͯΔ͜ͱ, ࣮͸ෛ୲ʹͳ͍ͬͯΔ͜ͱΛղফ͢Δ खஈͱͯ͠ΤϯδχΞͷࡋྔͰλεΫʹऔΓ૊ΊΔ • ΤϯδχΞ͕Ұ੪ʹ͓༡ٔձλΠϜͰ͖ΔͷͰϫΠϫΠ͠ͳ͕ΒͰ͖Δ • ESMԽͰ͸ٞ࿦લͷঢ়گ֬ೝ΍POCͷ༻ҙʹ໾ཱͯͨ 14
15. ϑϩϯτΤϯυձ • νʔϜ಺ͷϑϩϯτΤϯυʹڵຯͷ͋Δ༗ࢤͰఆྫձΛ։͍ͯվળҊΛ ·ͱΊͯɺεϓϦϯτʹ৐࣮ͤͯࢪ͍ͯ͠Δ • ͜͜ͰESMԽͷ࡞ઓΛಥ͖٧Ίͨ 15 νʔϜͰԿΛ΍Δͷ͔ͷೝࣝΛἧ͑ͨ
16. CJS→ESMԽͷ΍Γํ: આಘฤ • ։ൃମݧͷ޲্ʹܨ͕Δ • લड़ͷ௨Γ੩తղੳ͕ޮ͖΍͘͢ͳΔ • CJSͱESMࠞࡏΛ࣮ݱ͢ΔͨΊͷઃఆϑΝΠϧͷهड़͕ͳ͘ͳΔ 16
17. CJS→ESMԽͷ΍Γํ: આಘฤ • ύϑΥʔϚϯε্͕͕Δ • ֤छܭଌ͔ΒJSͷαΠζ͕ύϑΥʔϚϯεΛԼ͛ΔཁҼͱΘ͔͍ͬͯͨ • ESM౷Ұ͸഑৴͢ΔJSͷαΠζ͕ݮΔࢪࡦͰ࣮ࢪ͢Δҙ͕ٛ͋Δ • TreeShakingͰෆཁͳJSΛݮΒͤΔ 17 https://speakerdeck.com/nanimonodemonai/deng-tan-zi-liao
18. CJS→ESMԽͷ΍Γํ: આಘฤ • ৽ػೳ։ൃ͕ศརʹͳΔ • ϑΟʔνϟʔϑϥά͕͋Ε͹… • ։ൃମݧ͕޲্ • ৽ػೳ։ൃ͍ͯ͠Δ͜ͱΛϢʔβʔʹӅ͢͜ͱ͕༰қʹ • σϞ΋͠΍͘͢ • ৽ػೳΛඇΤϯδχΞʹࢼͯ͠΋Β͏ͷ͕༰қʹͳΔ • σϞΛ௨ͯ͡ϦϦʔε·Ͱʹ׬੒౓Λ্͛ΒΕΔ • ͦͷଞʹ΋ • ABςετͱ͔ 18 ͋ͱͰ΋͏Ұճ࿩͠·͢
19. CJS→ESMԽͷ΍Γํ: ࡞ۀฤ • େྔʹ͋ΔͷͰࣗಈม׵ • jscodeshiftͷcommonjs-to-es-module-codemodΛ࢖༻ • ESMʹ౷Ұͨ͠ΒɺWebpack͕ϞδϡʔϧղܾͷΤϥʔΛग़͢Α͏ʹ • ػցతͳஔ׵ʹΑΔΤϥʔ΋ؾ͕͚ͭɺࣗ৴Λ࣋ͬͯҠߦ͕Ͱ͖ͨ 19 ෺ྔ͸ׂ͕͋ͬͨͱ؆୯ʹͰ͖ͨ https://www.npmjs.com/package/commonjs-to-es-module-codemod https://www.npmjs.com/package/jscodeshift ࣗಈతʹஔ׵Ͱ͖ͳ͔ͬͨ΋ͷͷྫ • named export͍ͯ͠ͳ͍ͷʹnamed import͍ͯ͠ΔϞδϡʔϧ • ΦϒδΣΫτΛ࡞͔ͬͯΒdefault export͍ͯ͠ΔϞδϡʔϧ
20. ݁ՌͲ͏ͳ͔ͬͨ……ʁ
21. ύϑΥʔϚϯεվળ
22. ϒϩάͷJSαΠζ࡟ݮͰύϑΥʔϚϯεվળ • ESMԽʹΑͬͯTreeShaking͕ޮ͖ɺJSͷαΠζ͕࡟ݮ • ಉ࣌ʹTreeShaking͕ޮ͘ϥΠϒϥϦʹม͑ͨ (lodash -> lodash-es) • ߹Θͤͯόϯυϧͷ࠷దԽ΋࣮ࢪ • ϒϩάͷμογϡϘʔυͷJSΛϒϩάදࣔ໘͔Βୀආ • ߹Θͤͯάϩʔόϧϔομ΋όϯυϧ෼ׂ 22 ϒϩάΛӾཡ͢ΔͨΊʹඞཁͳ+4͕લ݄ൺ
23. ͸ͯͳϒϩάͷJS - ΞʔΩςΫνϟ 23 ϖʔδ͝ͱʹద੾JSΛಡΈࠐΜͰ͍Δ
24. ϒϩάΛӾཡ͢ΔͨΊʹඞཁͳJS͕લ݄ൺ1/5 24 ݱࡏ΋ͳ͓ݮΒ͠ଓ͚͍ͯΔ վળલ ݄ όϯυϧ෼ׂޙ  &4.౷Ұޙ  ݱࡏ IBUFOBCMPHKT 
    .# ,# 
    ,# 
    ,# 
    ,# 
    ,# 
    ,# 
    ,# CVOEMF HMPCBMIFBEFSKT 
    ,# 
    ,# 
    ,# 
    ,# 
    ,# 
    ,# ϖʔδڞ௨෦෼
    WFOEPSKT 
    .# 
    ,# 
    ,# 
    ,# ϖʔδڞ௨෦෼
    DPNNPOTKT 
    ,# 
    ,# ߹ܭ 
    .# ,# ,# ,# 
    ,# ,# 
    ,# ,#
25. ύϑΥʔϚϯεվળ - ·ͱΊ • ESMԽʹΑͬͯJSͷαΠζΛ࡟ݮ • TreeShakingͳͲ͕͖͍ͨ • શϖʔδ͝ͱʹڞ௨ͷJSͰ͸ͳ͘ɺը໘͝ͱʹผͷJSʹ͢Δ • ͬͪ͜ͷํ͕ΠϯύΫτ͕େ͖͔ͬͨ • ࠓޙ͸ɺΞʔΩςΫνϟΛݟ௚ͯ͠JSͷαΠζΛݮΒ͢ 25
26. ϑΟʔνϟʔϑϥά࣮ݱ
27. ϑΟʔνϟʔϑϥά • ࠓ·Ͱ։ൃதͷػೳΛӅͯ͠։ൃ͢Δʹ͸… • ϏοάόϯϦϦʔε • ख࡞ΓͷJSͰύονΛ౰ͯΔ • ৽ػೳ։ൃ͕େมͩͬͨ 27
28. CJS→ESMԽͷ΍Γํ: આಘฤ (࠶ܝ) • ৽ػೳ։ൃ͕ศརʹͳΔ • ϑΟʔνϟʔϑϥά͕͋Ε͹… • ։ൃମݧ͕޲্ • ৽ػೳ։ൃ͍ͯ͠Δ͜ͱΛϢʔβʔʹӅ͢͜ͱ͕༰қʹ • σϞ΋͠΍͘͢ • ৽ػೳΛඇΤϯδχΞʹࢼͯ͠΋Β͏ͷ͕༰қʹͳΔ • σϞΛ௨ͯ͡ϦϦʔε·Ͱʹ׬੒౓Λ্͛ΒΕΔ • ͦͷଞʹ΋ • ABςετͱ͔ 28 ESMԽͰϑΟʔνϟʔϑϥάΛ࣮ݱͨ͠
29. ϑΟʔνϟʔϑϥάΛ࣮ݱ͢ΔͨΊʹ͸ • ESMͰಈ͘Α͏ͳͬͨTreeShakingΛ׆༻ͯ͠ɺ ಉ͡ιʔε͔Βϑϥά͝ͱʹҧ͏JSΛు͖ग़ͤΔΑ͏ʹ͢Δ • WebpackͷDe fi nePluginͰιʔεதͷϑΟʔνϟʔϑϥάม਺Λ Ϗϧυ࣌ʹఆ਺ʹஔ͖׵͑ɺDeadCode࡟আ͢Δ 29
30. ͸ͯͳϒϩάͷJS - ΞʔΩςΫνϟ࠶ߏ2 30
31. ϑΟʔνϟʔϑϥά • Ϗϧυ࣌ʹDead Code࡟আͰϑΟʔνϟʔϑϥάΛ࣮ݱ • WebpackͰ Ϗϧυ࣌ʹ FEATURES.featureA Λ false͔trueʹม׵͢Δ • Webpack De fi ne Plugin • WebpackͰ if(false){ } ͱͳΔՕॴΛফͯ͠΋Β͏ • Webpack.optimizeͷػೳ • TreeShakingͰimport͍ͯ͠Δ͕࢖ΘΕͯͳ͍Ϟδϡʔϧ͸ফ͑Δ 31 if (FEATURES.hogehoge){ / / fugafuga const elem = document.querySelector<HTMLElement>('.js - fugafuga'); if (elem) renderHogehoge(elem); }
32. ·ͱΊ
33. ·ͱΊ • ϒϩάͷιʔείʔυΛESMʹ౷Ұͨ͠ • ͜Εͷ࣮ݱͷͨΊʹઆಘࡐྉΛूΊͨ • όϯυϧͷ࡞ΓํΛݟ௚ͯ͠ύϑΥʔϚϯεվળ • TreeShakingͰϑΟʔνϟʔϑϥάΛ࣮ݱ 33 ͜Ε͔Β΋ϒϩάͷϑϩϯτΤϯυΛΑͯ͘͠ɺ ύϑΥʔϚϯε΋։ൃମݧ΋্͍͛ͯͧ͘