おさらい Front-end Tooling / Review of Front-end Tooling

UIT Meetup vol. 13 アイスブレイク
玉田晃寛 （LINE 株式会社 Front-End Dev 6 チーム）
UIT Meetup vol. 13 『知っておきたいFront-end Toolingの今』
での登壇資料です
https://uit.connpass.com/event/216043/

Transcript

1. ͓͞Β͍ Front-end Tooling UIT Meetup vol. 13 ΞΠεϒϨΠΫ 2021/7/7 @spring-raining
2. Vite/Snowpack/Skypack/esbuild Rollup/SWC/esm.sh/Deno
3. ͳΜ΋ Θ͔ΒΜ
4. Build࣌ͷ஗͞Λ վળ͍ͨ͠ Dev serverͷෆཁͳϏϧυΛ ݮΒ͠։ൃମݧΛ্͍͛ͨ node_modulesΛ Πϯετʔϧͨ͘͠ͳ͍
5. Webpackͷޭࡑ • Webpack͸ҒେͳΞϓϦέʔγϣϯ͕ͩɺϏϧυ͕࣌ؒ௕͍ͱ͍͏ େ͖ͳܽ఺͕͋Δ • ༷ʑͳཁ๬΍؀ڥʹରԠͰ͖ΔॊೈੑͱͷτϨʔυΦϑ
6. esbuildͷিܸ • ϚδͰૣ͍ • Ͳ͏ͯ͠ૣ͍ʁ ίϯύΠϧݴޠ (Go) ͷ࠾༻ɺESM (ޙड़) Ҏ֎ͷґ ଘղܾͷ੾Γࣺͯ • ૉͷϥΠϒϥϦͱͯ͠࢖ΘΕΔΑΓ͸ɺଞͷbundlerϥΠϒϥϦ͕಺ ෦Ͱར༻͢ΔͨΊʹ࢖ΘΕΔ͜ͱ͕ଟ͍
7. esbuildʹ ෺ਃ͢ϥΠϒϥϦ
8. SWC • RustͰॻ͔Ε͓ͯΓɺൺֱత๛෋ͳγϯλοΫεରԠ΍targetʹes5 ͕બ΂Δͷ͕ಛ௃ • ެࣜαΠτͷBenchmarkΛݟΔͱɺฒྻ؀ڥͰesbuildΑΓߋʹૣ͍ • Parcel v2 betaͰSWCΛ࠾༻
9. Sucrase • Babelͷparser͔ΒϑΥʔΫ͞ΕͨτϥϯεύΠϥ • Ϟμϯϒϥ΢βҎ֎ͷ੾Γࣺͯ΍ߏจΤϥʔνΣοΫΛল͍ͯɺଞϥ ΠϒϥϦΑΓ΋͞Βʹ଎͍εϐʔυΛ࣮ݱ
10. Ϗϧυ଎౓Λੜ͔ͨ͠ ։ൃମݧͷ޲্
11. Vite • Viteͷbundlerࣗମ͸esbulidΛ࢖༻ • RollupͱͦͷΤίγεςϜΛ׆༻͠ɺProduction build·Ͱ׬શʹ WebpackʹཔΒͳ͍ϫʔΫϑϩʔ • SvelteKit (Svelteͷ։ൃϑϨʔϜϫʔΫ) ͸ཪଆͰViteΛ࢖༻
12. Snowpack • ։ൃ࣌ʹґଘϥΠϒϥϦΛbundleͤͣɺผʑͷESM (ޙड़) ͱͯ͠ಡ ΈࠐΉ͜ͱͰ։ൃ؀ڥͷߴ଎ԽΛΊ͟͢ • ϏϧυʹViteͱಉ͘͡esbuildΛ࢖༻ • ݱࡏ͸Production buildͷͨΊʹWebpackͷpluginΛఏڙ
13. ํ਑ͷҧ͍ • ViteͷϓϥάΠϯ͸Rollupͱͷ࿈ܞΛॏࢹ • Dynamic import͞ΕΔChunkͷ࠷దԽͳͲɺϏϧυ࣌ͷαϙʔτʹ ΋ྗΛೖΕ͍ͯΔ • SnowpackͷϏϧυ͸ (ࠓͷͱ͜Ζ) WebpackͷΤίγεςϜΛར༻ • ֎෦CDN΁ͷ੾Γସ͑ػೳͳͲNative ESMΛ׆༻͢Δ͜ͱΛॏࢹ
14. ΋͏Ұͭͷைྲྀ Native ESM
15. Ͳ͏ͯ͠ࠓESMରԠʁ • ESM͕σϑΝΫτελϯμʔυʹͳΓɺpolyfillΛ࢖Θͳͯ͘΋Α͍ ؀ڥ͕ἧ͍ͭͭ͋Δ • ϒϥ΢β → 2018೥ࠒʹ͸Module scriptͷରԠ͕׬ྃ • Node.js → 2021೥4݄ͷv10αϙʔτऴྃʹΑΓɺશͯͷLTS͕ಛผ ͳରԠແ͠ͰESMʹରԠ • ΋ͪΖΜͦΕҎ֎ͷ؀ڥ΋ (Deno͸ݩʑESM͔͠ରԠ͍ͯ͠ͳ͍)
16. Dependency hell • ͻͱͨͼϓϩδΣΫτΛηοτΞοϓ͢Δͱɺnode_modulesʹ େྔʹΠϯετʔϧ͞ΕΔґଘύοέʔδ • ͔͠΋ຊ౰ʹඞཁͳ΋ͷ͸͘͝Θ͔ͣ • Πϯετʔϧ͞Εͨύοέʔδ͸PCͷϩʔΧϧͳ৘ใʹΞΫηεͰ ͖ɺηΩϡϦςΠͷ໘Ͱ΋ϦεΫ͕͋Δ
17. DenoͷΞϓϩʔν • Nodeͱ͸ҧ͍ɺDenoʹ͸node_modulesʹ౰ͨΔ΋ͷ͕ͳ͍ • Ͳ͏΍ͬͯϥΠϒϥϦΛಡΈࠐΉʁ ͜͏΍ͬͯʂ👇 • ݟ׳Εͳ͍ߏจ͕ͩɺϞμϯϒϥ΢β͸͢ͰʹରԠࡁΈ import react from 'https://cdn.skypack.dev/react';
18. ESM CDN • npmʹొ࿥͞Ε͍ͯΔϥΠϒϥϦΛ͍͍ײ͡ʹESMʹม׵ͯ͠ఏڙ • Skypack: HTTP/3ରԠͳͲɺϒϥ΢β͔ΒͷಡΈࠐΈΛ࠷దԽ • Snowpackʹ͸֎෦ύοέʔδΛSkypack CDNͷ΋ͷʹࠩ͠ସ͑ͯ ͘ΕΔػೳ͕͋Δ (Streaming Imports) • esm.sh: ཪଆͰesbuildΛ࢖ͬͯbundle (Bundle mode)