Upgrade to Pro — share decks privately, control downloads, hide ads and more …

はてなブログのESM化

 はてなブログのESM化

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

NanimonoDemonai

September 27, 2023
Tweet

More Decks by NanimonoDemonai

Other Decks in Programming

Transcript

  1. ͸ͯͳϒϩάͷESMԽ
    id: nanimono_demonai
    2023/9/27 Kyoto Tech Talk #2

    View full-size slide

  2. 1. ࣗݾ঺հ


    2. ͸ͯͳϒϩάͷJS


    3. ESMԽͷಈػͱ΍Γํ


    4. ύϑΥʔϚϯεվળ


    5. ϑΟʔνϟʔϑϥά࣮ݱ

    View full-size slide

  3. ࣗݾ঺հ
    • id: nanimono_demonai


    • @NanimonoDaemon


    • େֶͰ͸ػցֶशͷݚڀ


    • ʮגࣜձࣾ͸ͯͳʯʹ2020೥ʹब৬


    • ීஈ͸TypeScript/React/CSSͷ৘ใΛ௥͍ͬͯΔ


    • ੲSCP-JPͷ؅ཧऀ΍͍ͬͯ·ͨ͠


    • ࠓ͸ࣗಈंͷ໔ڐऔΖ͏ͱ͍ͯ͠·͢
    3

    View full-size slide

  4. ͸ͯͳϒϩάͷ঺հίʔφʔ
    • ͸ͯͳϒϩά͸ϦϦʔε͔Β12೥໨ʂ


    • ࠓ೥ͷ6݄ʹ͸هࣄͷ༗ྉൢചػೳ௥Ճʂ


    • codocגࣜձ͕ࣾఏڙ͢ΔίϯςϯπൢചαʔϏεʮcodocʢίʔυΫʣʯͱͷ
    ࿈ܞʹΑΓ͸ͯͳϒϩάͰɺϒϩάهࣄͷ༗ྉൢച͕Ͱ͖ΔΑ͏ʹͳΓ·ͨ͠
    4
    ೥قͷ͋ΔϓϩμΫτͷ࠷ۙͷ࿩
    ࢥ͍͸ݴ༿ʹɻ
    ͸ͯͳϒϩά͸ɺ͋ͳͨͷࢥ͍΍ߟ͑Λ࢒ͨ͠Γɺ

    ͞·͟·ͳਓ͕௲ͬͨଟ༷ͳՁ஋؍ʹ৮ΕͨΓͰ͖Δ৔ॴͰ͢ɻ

    View full-size slide

  5. ࠷ۙͷ͸ͯͳϒϩά
    • ͸ͯͳϒϩάͷύϑΥʔϚϯεΛվળ


    • ͸ͯͳϒϩάʹϑΟʔνϟʔϑϥάΛ͚ͭͯ։ൃମݧΛ޲্
    5
    ͦͷഎޙʹ͸ɺ͸ͯͳϒϩάͷ&4.Խ͋Γ
    https://staff.hatenablog.com/entry/2023/07/07/122734
    ͸ͯͳϒϩάͷӾཡମݧվળͷऔΓ૊Έʹ͍ͭͯ

    View full-size slide

  6. ͸ͯͳϒϩάͷJS

    View full-size slide

  7. ͸ͯͳϒϩάͷJS - ྺ࢙ͱແடং
    • ͸ͯͳϒϩά͸೔ʑ։ൃ͞Ε͍ͯΔ


    • ϑϩϯτΤϯυͷίʔυ͸ଟ͍


    • աڈݱࡏͷϑϩϯτΤϯυͷΪϟοϓ͕ແடংΛੜΉ


    • ݴޠ, ελΠϧ, ςετ, etc…


    • Ϟδϡʔϧܗࣜͷࠞࡏ
    7
    From Kyoto.js 12
    https://speakerdeck.com/nanimonodemonai/
    hatenaburogufalsehurontoendonizhi-xu-
    hamotarasaretafalseka
    ࠓճ͸ϞδϡʔϧΛ੔͑ͨ࿩
    +BWB4DSJQU ߦ
    5ZQF4DSJQU ߦ

    View full-size slide

  8. ͸ͯͳϒϩάͷJS - ”چ”ϏϧυπʔϧνΣʔϯ
    8

    View full-size slide

  9. ͸ͯͳϒϩάͷJS - ”چ”ΞʔΩςΫνϟ
    9
    ϖʔδʹڞ௨ͳJSΛಡΈࠐΜͰ͍Δ

    View full-size slide

  10. ESMԽͷಈػͱ΍Γํ

    View full-size slide

  11. JSͷϞδϡʔϧܗࣜʹ͍ͭͯ
    • JSͷϞδϡʔϧܗࣜ


    • CJS: Node.jsͰ࠾༻͞Ε͍ͯΔܗࣜ


    • requireؔ਺ͰϞδϡʔϧղܾ


    • ESM: ES2015͔ΒJSͷ࢓༷ʹೖͬͨϞδϡʔϧܗࣜ


    • import/exportจͰϞδϡʔϧղܾ


    • ͸ͯͳϒϩάͰ͸͜ΕΒ͕ࠞࡏ


    • Ϗϧυ࣌ʹESMΛCJSʹม׵͍ͯͨ͠


    (Babel preset-envͱtscon
    fi
    gͰmodule = “common”ͱ͍ͯͨ͠) 11

    View full-size slide

  12. CJS/ESMࠞࡏͷۤ͠͞
    • CJSܗࣜͰಡΈࠐΜͩϞδϡʔϧ͸੩తղੳ͕ޮ͖ͮΒ͍


    • CIΛ͢Γൈ͚ͯϏϧυ͸௨Δͷʹɺ࣮ߦ࣌ʹΤϥʔʹͳ͍ͬͯΔ


    • ESMͳΒ͹Webpack͕Ϗϧυ࣌ʹϞδϡʔϧղܾΛνΣοΫ͢Δ


    • Ϟδϡʔϧʹؔ͢ΔTreeShaking΍σουίʔυ࡟আ͕ޮ͔ͳ͍


    • requireؔ਺Λ࢖ͬͯ΋ޮ͔ͤΒΕΔํ๏͸͋Δ͸͕ͣͩ…
    12
    &4.$+4͕͍ࠞͬͯ͟Δ͜ͱ͸͠ΜͲ͍ʂʁ

    View full-size slide

  13. CJS→ESMԽͷ΍Γํ: આಘฤ
    • ίʔυͷશ໘తͳมߋʹͳΔͷͰɺ޻਺͕ඞཁ


    • ಈ࡞νΣοΫΛೖ೦ʹ͍ͨ͠ͳͲ


    • ޻਺ΛͱͬͯͰ΋΍Δ΂͖λεΫͰ͋Δ͜ͱΛೲಘͯ͠΋Β͍͍ͨ


    → վળΛߟ͑ٞ࿦Ͱ͖Δ৔ͰઆಘࡐྉΛἧ͑Δ


    • վળΛߟ͑ٞ࿦Ͱ͖Δ৔


    • ͓༡ٔձʢޙड़ʣ


    • ϑϩϯτΤϯυձ


    • આಘࡐྉ


    • ։ൃମݧ޲্, ύϑΥʔϚϯε޲্, ৽ػೳ։ൃ͕ศརʹ, ෳࡶੑ͕গͳ͍ 13
    CJS->ESM͸ޮՌ͕͋Γͦ͏ɺͰ΋આ໌͍ͨ͠ΑͶ

    View full-size slide

  14. ͓༡ٔձ
    • ;ͩΜͷλεΫҎ֎ͷ͜ͱΛ΍Δ࣌ؒ


    • ִि ൒೔


    • ΤϯδχΞ͕ؾʹͳ͍ͬͯΔ͜ͱ, ࣮͸ෛ୲ʹͳ͍ͬͯΔ͜ͱΛղফ͢Δ
    खஈͱͯ͠ΤϯδχΞͷࡋྔͰλεΫʹऔΓ૊ΊΔ


    • ΤϯδχΞ͕Ұ੪ʹ͓༡ٔձλΠϜͰ͖ΔͷͰϫΠϫΠ͠ͳ͕ΒͰ͖Δ


    • ESMԽͰ͸ٞ࿦લͷঢ়گ֬ೝ΍POCͷ༻ҙʹ໾ཱͯͨ
    14

    View full-size slide

  15. ϑϩϯτΤϯυձ
    • νʔϜ಺ͷϑϩϯτΤϯυʹڵຯͷ͋Δ༗ࢤͰఆྫձΛ։͍ͯվળҊΛ
    ·ͱΊͯɺεϓϦϯτʹ৐࣮ͤͯࢪ͍ͯ͠Δ


    • ͜͜ͰESMԽͷ࡞ઓΛಥ͖٧Ίͨ
    15
    νʔϜͰԿΛ΍Δͷ͔ͷೝࣝΛἧ͑ͨ

    View full-size slide

  16. CJS→ESMԽͷ΍Γํ: આಘฤ
    • ։ൃମݧͷ޲্ʹܨ͕Δ


    • લड़ͷ௨Γ੩తղੳ͕ޮ͖΍͘͢ͳΔ


    • CJSͱESMࠞࡏΛ࣮ݱ͢ΔͨΊͷઃఆϑΝΠϧͷهड़͕ͳ͘ͳΔ
    16

    View full-size slide

  17. CJS→ESMԽͷ΍Γํ: આಘฤ
    • ύϑΥʔϚϯε্͕͕Δ


    • ֤छܭଌ͔ΒJSͷαΠζ͕ύϑΥʔϚϯεΛԼ͛ΔཁҼͱΘ͔͍ͬͯͨ


    • ESM౷Ұ͸഑৴͢ΔJSͷαΠζ͕ݮΔࢪࡦͰ࣮ࢪ͢Δҙ͕ٛ͋Δ


    • TreeShakingͰෆཁͳJSΛݮΒͤΔ
    17
    https://speakerdeck.com/nanimonodemonai/deng-tan-zi-liao

    View full-size slide

  18. CJS→ESMԽͷ΍Γํ: આಘฤ
    • ৽ػೳ։ൃ͕ศརʹͳΔ


    • ϑΟʔνϟʔϑϥά͕͋Ε͹…


    • ։ൃମݧ͕޲্


    • ৽ػೳ։ൃ͍ͯ͠Δ͜ͱΛϢʔβʔʹӅ͢͜ͱ͕༰қʹ


    • σϞ΋͠΍͘͢


    • ৽ػೳΛඇΤϯδχΞʹࢼͯ͠΋Β͏ͷ͕༰қʹͳΔ


    • σϞΛ௨ͯ͡ϦϦʔε·Ͱʹ׬੒౓Λ্͛ΒΕΔ


    • ͦͷଞʹ΋


    • ABςετͱ͔
    18
    ͋ͱͰ΋͏Ұճ࿩͠·͢

    View full-size slide

  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͍ͯ͠ΔϞδϡʔϧ

    View full-size slide

  20. ݁ՌͲ͏ͳ͔ͬͨ……ʁ

    View full-size slide

  21. ύϑΥʔϚϯεվળ

    View full-size slide

  22. ϒϩάͷJSαΠζ࡟ݮͰύϑΥʔϚϯεվળ
    • ESMԽʹΑͬͯTreeShaking͕ޮ͖ɺJSͷαΠζ͕࡟ݮ


    • ಉ࣌ʹTreeShaking͕ޮ͘ϥΠϒϥϦʹม͑ͨ (lodash -> lodash-es)


    • ߹Θͤͯόϯυϧͷ࠷దԽ΋࣮ࢪ


    • ϒϩάͷμογϡϘʔυͷJSΛϒϩάදࣔ໘͔Βୀආ


    • ߹Θͤͯάϩʔόϧϔομ΋όϯυϧ෼ׂ
    22
    ϒϩάΛӾཡ͢ΔͨΊʹඞཁͳ+4͕લ݄ൺ

    View full-size slide

  23. ͸ͯͳϒϩάͷJS - ΞʔΩςΫνϟ
    23
    ϖʔδ͝ͱʹద੾JSΛಡΈࠐΜͰ͍Δ

    View full-size slide

  24. ϒϩάΛӾཡ͢ΔͨΊʹඞཁͳJS͕લ݄ൺ1/5
    24
    ݱࡏ΋ͳ͓ݮΒ͠ଓ͚͍ͯΔ
    վળલ ݄
    όϯυϧ෼ׂޙ
    &4.౷Ұޙ
    ݱࡏ
    IBUFOBCMPHKT .# ,#
    ,# ,#
    ,# ,#
    ,# ,#

    CVOEMF
    HMPCBMIFBEFSKT
    ,# ,#
    ,# ,#
    ,# ,#

    ϖʔδڞ௨෦෼
    WFOEPSKT

    .# ,#
    ,# ,#

    ϖʔδڞ௨෦෼
    DPNNPOTKT

    ,# ,#

    ߹ܭ .# ,#
    ,# ,#
    ,# ,#
    ,# ,#

    View full-size slide

  25. ύϑΥʔϚϯεվળ - ·ͱΊ
    • ESMԽʹΑͬͯJSͷαΠζΛ࡟ݮ


    • TreeShakingͳͲ͕͖͍ͨ


    • શϖʔδ͝ͱʹڞ௨ͷJSͰ͸ͳ͘ɺը໘͝ͱʹผͷJSʹ͢Δ


    • ͬͪ͜ͷํ͕ΠϯύΫτ͕େ͖͔ͬͨ


    • ࠓޙ͸ɺΞʔΩςΫνϟΛݟ௚ͯ͠JSͷαΠζΛݮΒ͢
    25

    View full-size slide

  26. ϑΟʔνϟʔϑϥά࣮ݱ

    View full-size slide

  27. ϑΟʔνϟʔϑϥά
    • ࠓ·Ͱ։ൃதͷػೳΛӅͯ͠։ൃ͢Δʹ͸…


    • ϏοάόϯϦϦʔε


    • ख࡞ΓͷJSͰύονΛ౰ͯΔ


    • ৽ػೳ։ൃ͕େมͩͬͨ
    27

    View full-size slide

  28. CJS→ESMԽͷ΍Γํ: આಘฤ (࠶ܝ)
    • ৽ػೳ։ൃ͕ศརʹͳΔ


    • ϑΟʔνϟʔϑϥά͕͋Ε͹…


    • ։ൃମݧ͕޲্


    • ৽ػೳ։ൃ͍ͯ͠Δ͜ͱΛϢʔβʔʹӅ͢͜ͱ͕༰қʹ


    • σϞ΋͠΍͘͢


    • ৽ػೳΛඇΤϯδχΞʹࢼͯ͠΋Β͏ͷ͕༰қʹͳΔ


    • σϞΛ௨ͯ͡ϦϦʔε·Ͱʹ׬੒౓Λ্͛ΒΕΔ


    • ͦͷଞʹ΋


    • ABςετͱ͔
    28
    ESMԽͰϑΟʔνϟʔϑϥάΛ࣮ݱͨ͠

    View full-size slide

  29. ϑΟʔνϟʔϑϥάΛ࣮ݱ͢ΔͨΊʹ͸
    • ESMͰಈ͘Α͏ͳͬͨTreeShakingΛ׆༻ͯ͠ɺ


    ಉ͡ιʔε͔Βϑϥά͝ͱʹҧ͏JSΛు͖ग़ͤΔΑ͏ʹ͢Δ


    • WebpackͷDe
    fi
    nePluginͰιʔεதͷϑΟʔνϟʔϑϥάม਺Λ


    Ϗϧυ࣌ʹఆ਺ʹஔ͖׵͑ɺDeadCode࡟আ͢Δ
    29

    View full-size slide

  30. ͸ͯͳϒϩάͷJS - ΞʔΩςΫνϟ࠶ߏ2
    30

    View full-size slide

  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('.js
    -
    fugafuga');


    if (elem) renderHogehoge(elem);


    }


    View full-size slide

  32. ·ͱΊ
    • ϒϩάͷιʔείʔυΛESMʹ౷Ұͨ͠


    • ͜Εͷ࣮ݱͷͨΊʹઆಘࡐྉΛूΊͨ


    • όϯυϧͷ࡞ΓํΛݟ௚ͯ͠ύϑΥʔϚϯεվળ


    • TreeShakingͰϑΟʔνϟʔϑϥάΛ࣮ݱ
    33
    ͜Ε͔Β΋ϒϩάͷϑϩϯτΤϯυΛΑͯ͘͠ɺ


    ύϑΥʔϚϯε΋։ൃମݧ΋্͍͛ͯͧ͘

    View full-size slide