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
180
はてなブログのESM化
開発初期から継ぎ足されてきたはてなブログのフロントエンドのコードをES Moduleに統一したことを通じて、ブログのパフォーマンスを改善し新機能開発もしやすくした話
NanimonoDemonai
September 27, 2023
Tweet
Share
More Decks by NanimonoDemonai
See All by NanimonoDemonai
ViteでCSSのバージョン違いを作る
nanimonodemonai
0
4
はてなブログのブログ表示に必要なJSを1/6にした話
nanimonodemonai
0
580
登壇資料.pdf
nanimonodemonai
0
210
はてなブログのフロントエンドに秩序はもたらされたのか
nanimonodemonai
3
5.2k
Other Decks in Programming
See All in Programming
Elm 0.19.0 Changes
bkuhlmann
0
510
使ってみよう Azure AI Document Intelligence
kosmosebi
2
360
初心者のためのRubyKaigi入門/RubyKaigi Introduction
a_matsuda
8
1.4k
Fast JSX: Don't clone props object #28768
yossydev
1
160
Apache Hive 4 on Treasure Data
ryukobayashi
1
420
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
430
見た目から始める生産性向上
ikumatadokoro
10
1.3k
AmperとFleetを使ったAndroidアプリ
yoppie
0
250
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
140
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
240
Tailwind CSSを本気でカスタマイズする方法
fsubal
14
5.5k
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
27
8.5k
Featured
See All Featured
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
Visualization
eitanlees
137
14k
Atom: Resistance is Futile
akmur
260
25k
Side Projects
sachag
451
41k
What's in a price? How to price your products and services
michaelherold
238
11k
Typedesign – Prime Four
hannesfritz
36
2.1k
Ruby is Unlike a Banana
tanoku
96
10k
Statistics for Hackers
jakevdp
790
220k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
22
1.6k
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
͜Ε͔ΒϒϩάͷϑϩϯτΤϯυΛΑͯ͘͠ɺ ύϑΥʔϚϯε։ൃମݧ্͍͛ͯͧ͘