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

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)