Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
はてなブログのESM化
Search
NanimonoDemonai
September 27, 2023
Programming
0
210
はてなブログのESM化
開発初期から継ぎ足されてきたはてなブログのフロントエンドのコードをES Moduleに統一したことを通じて、ブログのパフォーマンスを改善し新機能開発もしやすくした話
NanimonoDemonai
September 27, 2023
Tweet
Share
More Decks by NanimonoDemonai
See All by NanimonoDemonai
ViteでCSSのバージョン違いを作る
nanimonodemonai
0
7
はてなブログのブログ表示に必要なJSを1/6にした話
nanimonodemonai
0
630
登壇資料.pdf
nanimonodemonai
0
240
はてなブログのフロントエンドに秩序はもたらされたのか
nanimonodemonai
3
5.3k
Other Decks in Programming
See All in Programming
DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話【デブサミ2024夏】
texmeijin
1
620
ピグパーティにおけるMongoDB CommunityバージョンからAtlasへの移行事例
10969hotaka
0
130
OpenAI/Gemini APIを使って EPUBを翻訳するCLIツールをつくってみた
tomiyan
0
790
CSC307 Lecture 11
javiergs
PRO
0
240
さきがけから振り返るアーキテクチャ刷新 / Reflecting on the Architectural Renewal from the Vanguard
nrslib
2
780
Xcode 16のPreviewModifierと@Previewableを活用した効率的なプレビュー方法の考察
ojun9
2
160
AHC035解説
terryu16
0
730
社内 LT 会を発足し、アウトプット文化を醸成させるために考えたこと・やったこと / Starting internal LT meetings and fostering an output culture
mackey0225
3
120
はしめてのプログラミングとロボット制御
watawatavoltage
0
290
DynamoDB コスト最適化っぽいことの基本 with Terraform
kuro_kurorrr
2
250
12年前の『型システム入門』翻訳の思い出話
mame
11
1.2k
Composing an API the *right* way (Droidcon Berlin 2024)
zsmb
1
450
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
59
9.6k
Art, The Web, and Tiny UX
lynnandtonic
291
20k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
Fireside Chat
paigeccino
25
2.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
44
4.7k
GitHub's CSS Performance
jonrohan
1026
450k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
360
22k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
26
2.1k
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
129
32k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
35
6.3k
Transcript
ͯͳϒϩάͷESMԽ id: nanimono_demonai 2023/9/27 Kyoto Tech Talk #2
1. ࣗݾհ 2. ͯͳϒϩάͷJS 3. ESMԽͷಈػͱΓํ 4. ύϑΥʔϚϯεվળ 5. ϑΟʔνϟʔϑϥά࣮ݱ
ࣗݾհ • id: nanimono_demonai • @NanimonoDaemon • େֶͰػցֶशͷݚڀ • ʮגࣜձࣾͯͳʯʹ2020ʹब৬
• ීஈTypeScript/React/CSSͷใΛ͍ͬͯΔ • ੲSCP-JPͷཧऀ͍ͬͯ·ͨ͠ • ࠓࣗಈंͷ໔ڐऔΖ͏ͱ͍ͯ͠·͢ 3
ͯͳϒϩάͷհίʔφʔ • ͯͳϒϩάϦϦʔε͔Β12ʂ • ࠓͷ6݄ʹهࣄͷ༗ྉൢചػೳՃʂ • codocגࣜձ͕ࣾఏڙ͢ΔίϯςϯπൢചαʔϏεʮcodocʢίʔυΫʣʯͱͷ ࿈ܞʹΑΓͯͳϒϩάͰɺϒϩάهࣄͷ༗ྉൢച͕Ͱ͖ΔΑ͏ʹͳΓ·ͨ͠ 4 قͷ͋ΔϓϩμΫτͷ࠷ۙͷ
ࢥ͍ݴ༿ʹɻ ͯͳϒϩάɺ͋ͳͨͷࢥ͍ߟ͑Λͨ͠Γɺ ͞·͟·ͳਓ͕௲ͬͨଟ༷ͳՁ؍ʹ৮ΕͨΓͰ͖ΔॴͰ͢ɻ
࠷ۙͷͯͳϒϩά • ͯͳϒϩάͷύϑΥʔϚϯεΛվળ • ͯͳϒϩάʹϑΟʔνϟʔϑϥάΛ͚ͭͯ։ൃମݧΛ্ 5 ͦͷഎޙʹɺͯͳϒϩάͷ&4.Խ͋Γ https://staff.hatenablog.com/entry/2023/07/07/122734 ͯͳϒϩάͷӾཡମݧվળͷऔΓΈʹ͍ͭͯ
ͯͳϒϩάͷJS
ͯͳϒϩάͷJS - ྺ࢙ͱແடং • ͯͳϒϩάʑ։ൃ͞Ε͍ͯΔ • ϑϩϯτΤϯυͷίʔυଟ͍ • աڈݱࡏͷϑϩϯτΤϯυͷΪϟοϓ͕ແடংΛੜΉ •
ݴޠ, ελΠϧ, ςετ, etc… • Ϟδϡʔϧܗࣜͷࠞࡏ 7 From Kyoto.js 12 https://speakerdeck.com/nanimonodemonai/ hatenaburogufalsehurontoendonizhi-xu- hamotarasaretafalseka ࠓճϞδϡʔϧΛ͑ͨ +BWB4DSJQU ߦ 5ZQF4DSJQU ߦ
ͯͳϒϩάͷJS - ”چ”ϏϧυπʔϧνΣʔϯ 8
ͯͳϒϩάͷJS - ”چ”ΞʔΩςΫνϟ 9 ϖʔδʹڞ௨ͳJSΛಡΈࠐΜͰ͍Δ
ESMԽͷಈػͱΓํ
JSͷϞδϡʔϧܗࣜʹ͍ͭͯ • JSͷϞδϡʔϧܗࣜ • CJS: Node.jsͰ࠾༻͞Ε͍ͯΔܗࣜ • requireؔͰϞδϡʔϧղܾ • ESM:
ES2015͔ΒJSͷ༷ʹೖͬͨϞδϡʔϧܗࣜ • import/exportจͰϞδϡʔϧղܾ • ͯͳϒϩάͰ͜ΕΒ͕ࠞࡏ • Ϗϧυ࣌ʹESMΛCJSʹม͍ͯͨ͠ (Babel preset-envͱtscon fi gͰmodule = “common”ͱ͍ͯͨ͠) 11
CJS/ESMࠞࡏͷۤ͠͞ • CJSܗࣜͰಡΈࠐΜͩϞδϡʔϧ੩తղੳ͕ޮ͖ͮΒ͍ • CIΛ͢Γൈ͚ͯϏϧυ௨Δͷʹɺ࣮ߦ࣌ʹΤϥʔʹͳ͍ͬͯΔ • ESMͳΒWebpack͕Ϗϧυ࣌ʹϞδϡʔϧղܾΛνΣοΫ͢Δ • Ϟδϡʔϧʹؔ͢ΔTreeShakingσουίʔυআ͕ޮ͔ͳ͍ •
requireؔΛͬͯޮ͔ͤΒΕΔํ๏͋Δ͕ͣͩ… 12 &4.$+4͕͍ࠞͬͯ͟Δ͜ͱ͠ΜͲ͍ʂʁ
CJS→ESMԽͷΓํ: આಘฤ • ίʔυͷશ໘తͳมߋʹͳΔͷͰɺ͕ඞཁ • ಈ࡞νΣοΫΛೖ೦ʹ͍ͨ͠ͳͲ • ΛͱͬͯͰΔ͖λεΫͰ͋Δ͜ͱΛೲಘͯ͠Β͍͍ͨ → վળΛߟ͑ٞͰ͖ΔͰઆಘࡐྉΛἧ͑Δ
• վળΛߟ͑ٞͰ͖Δ • ͓༡ٔձʢޙड़ʣ • ϑϩϯτΤϯυձ • આಘࡐྉ • ։ൃମݧ্, ύϑΥʔϚϯε্, ৽ػೳ։ൃ͕ศརʹ, ෳࡶੑ͕গͳ͍ 13 CJS->ESMޮՌ͕͋Γͦ͏ɺͰઆ໌͍ͨ͠ΑͶ
͓༡ٔձ • ;ͩΜͷλεΫҎ֎ͷ͜ͱΛΔ࣌ؒ • ִि • ΤϯδχΞ͕ؾʹͳ͍ͬͯΔ͜ͱ, ࣮ෛ୲ʹͳ͍ͬͯΔ͜ͱΛղফ͢Δ खஈͱͯ͠ΤϯδχΞͷࡋྔͰλεΫʹऔΓΊΔ
• ΤϯδχΞ͕Ұ੪ʹ͓༡ٔձλΠϜͰ͖ΔͷͰϫΠϫΠ͠ͳ͕ΒͰ͖Δ • ESMԽͰٞલͷঢ়گ֬ೝPOCͷ༻ҙʹཱͯͨ 14
ϑϩϯτΤϯυձ • νʔϜͷϑϩϯτΤϯυʹڵຯͷ͋Δ༗ࢤͰఆྫձΛ։͍ͯվળҊΛ ·ͱΊͯɺεϓϦϯτʹ࣮ͤͯࢪ͍ͯ͠Δ • ͜͜ͰESMԽͷ࡞ઓΛಥ͖٧Ίͨ 15 νʔϜͰԿΛΔͷ͔ͷೝࣝΛἧ͑ͨ
CJS→ESMԽͷΓํ: આಘฤ • ։ൃମݧͷ্ʹܨ͕Δ • લड़ͷ௨Γ੩తղੳ͕ޮ͖͘͢ͳΔ • CJSͱESMࠞࡏΛ࣮ݱ͢ΔͨΊͷઃఆϑΝΠϧͷهड़͕ͳ͘ͳΔ 16
CJS→ESMԽͷΓํ: આಘฤ • ύϑΥʔϚϯε্͕͕Δ • ֤छܭଌ͔ΒJSͷαΠζ͕ύϑΥʔϚϯεΛԼ͛ΔཁҼͱΘ͔͍ͬͯͨ • ESM౷Ұ৴͢ΔJSͷαΠζ͕ݮΔࢪࡦͰ࣮ࢪ͢Δҙ͕ٛ͋Δ • TreeShakingͰෆཁͳJSΛݮΒͤΔ
17 https://speakerdeck.com/nanimonodemonai/deng-tan-zi-liao
CJS→ESMԽͷΓํ: આಘฤ • ৽ػೳ։ൃ͕ศརʹͳΔ • ϑΟʔνϟʔϑϥά͕͋Ε… • ։ൃମݧ্͕ • ৽ػೳ։ൃ͍ͯ͠Δ͜ͱΛϢʔβʔʹӅ͢͜ͱ͕༰қʹ
• σϞ͘͢͠ • ৽ػೳΛඇΤϯδχΞʹࢼͯ͠Β͏ͷ͕༰қʹͳΔ • σϞΛ௨ͯ͡ϦϦʔε·ͰʹΛ্͛ΒΕΔ • ͦͷଞʹ • ABςετͱ͔ 18 ͋ͱͰ͏Ұճ͠·͢
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͍ͯ͠ΔϞδϡʔϧ
݁ՌͲ͏ͳ͔ͬͨ……ʁ
ύϑΥʔϚϯεվળ
ϒϩάͷJSαΠζݮͰύϑΥʔϚϯεվળ • ESMԽʹΑͬͯTreeShaking͕ޮ͖ɺJSͷαΠζ͕ݮ • ಉ࣌ʹTreeShaking͕ޮ͘ϥΠϒϥϦʹม͑ͨ (lodash -> lodash-es) • ߹Θͤͯόϯυϧͷ࠷దԽ࣮ࢪ
• ϒϩάͷμογϡϘʔυͷJSΛϒϩάදࣔ໘͔Βୀආ • ߹Θͤͯάϩʔόϧϔομόϯυϧׂ 22 ϒϩάΛӾཡ͢ΔͨΊʹඞཁͳ+4͕લ݄ൺ
ͯͳϒϩάͷJS - ΞʔΩςΫνϟ 23 ϖʔδ͝ͱʹదJSΛಡΈࠐΜͰ͍Δ
ϒϩάΛӾཡ͢ΔͨΊʹඞཁͳJS͕લ݄ൺ1/5 24 ݱࡏͳ͓ݮΒ͠ଓ͚͍ͯΔ վળલ ݄ όϯυϧׂޙ &4.౷Ұޙ ݱࡏ
IBUFOBCMPHKT .# ,# ,# ,# ,# ,# ,# ,# CVOEMF HMPCBMIFBEFSKT ,# ,# ,# ,# ,# ,# ϖʔδڞ௨෦ WFOEPSKT .# ,# ,# ,# ϖʔδڞ௨෦ DPNNPOTKT ,# ,# ߹ܭ .# ,# ,# ,# ,# ,# ,# ,#
ύϑΥʔϚϯεվળ - ·ͱΊ • ESMԽʹΑͬͯJSͷαΠζΛݮ • TreeShakingͳͲ͕͖͍ͨ • શϖʔδ͝ͱʹڞ௨ͷJSͰͳ͘ɺը໘͝ͱʹผͷJSʹ͢Δ •
ͬͪ͜ͷํ͕ΠϯύΫτ͕େ͖͔ͬͨ • ࠓޙɺΞʔΩςΫνϟΛݟͯ͠JSͷαΠζΛݮΒ͢ 25
ϑΟʔνϟʔϑϥά࣮ݱ
ϑΟʔνϟʔϑϥά • ࠓ·Ͱ։ൃதͷػೳΛӅͯ͠։ൃ͢Δʹ… • ϏοάόϯϦϦʔε • ख࡞ΓͷJSͰύονΛͯΔ • ৽ػೳ։ൃ͕େมͩͬͨ 27
CJS→ESMԽͷΓํ: આಘฤ (࠶ܝ) • ৽ػೳ։ൃ͕ศརʹͳΔ • ϑΟʔνϟʔϑϥά͕͋Ε… • ։ൃମݧ্͕ •
৽ػೳ։ൃ͍ͯ͠Δ͜ͱΛϢʔβʔʹӅ͢͜ͱ͕༰қʹ • σϞ͘͢͠ • ৽ػೳΛඇΤϯδχΞʹࢼͯ͠Β͏ͷ͕༰қʹͳΔ • σϞΛ௨ͯ͡ϦϦʔε·ͰʹΛ্͛ΒΕΔ • ͦͷଞʹ • ABςετͱ͔ 28 ESMԽͰϑΟʔνϟʔϑϥάΛ࣮ݱͨ͠
ϑΟʔνϟʔϑϥάΛ࣮ݱ͢ΔͨΊʹ • ESMͰಈ͘Α͏ͳͬͨTreeShakingΛ׆༻ͯ͠ɺ ಉ͡ιʔε͔Βϑϥά͝ͱʹҧ͏JSΛు͖ग़ͤΔΑ͏ʹ͢Δ • WebpackͷDe fi nePluginͰιʔεதͷϑΟʔνϟʔϑϥάมΛ Ϗϧυ࣌ʹఆʹஔ͖͑ɺDeadCodeআ͢Δ 29
ͯͳϒϩάͷJS - ΞʔΩςΫνϟ࠶ߏ2 30
ϑΟʔνϟʔϑϥά • Ϗϧυ࣌ʹ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); }
·ͱΊ
·ͱΊ • ϒϩάͷιʔείʔυΛESMʹ౷Ұͨ͠ • ͜Εͷ࣮ݱͷͨΊʹઆಘࡐྉΛूΊͨ • όϯυϧͷ࡞ΓํΛݟͯ͠ύϑΥʔϚϯεվળ • TreeShakingͰϑΟʔνϟʔϑϥάΛ࣮ݱ 33
͜Ε͔ΒϒϩάͷϑϩϯτΤϯυΛΑͯ͘͠ɺ ύϑΥʔϚϯε։ൃମݧ্͍͛ͯͧ͘