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

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

おさらい 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/

53850955f15249a1a9dc49df6113e400?s=128

LINE Developers
PRO

July 07, 2021
Tweet

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)