Web Frontend ビルドツールの過去と現在と未来 / The Past, Present, and Future of Web Frontend Build Tools

by やし

Slide 1

Slide 1 text

Web FrontendϏϧυπʔϧͷ աڈͱݱࡏͱະདྷ HJGUFFUFDICBTI !ZBTIJ

Slide 2

Slide 2 text

ಈػ • webpack Ͱ͸ͳ͍Ϗϧυπʔϧ͕͜͜࠷ۙଟ਺ग़ݱ&ൃలͯ͠ ͖͍ͯΔͱ͍͏ҹ৅͕͋ͬͨ • →ͳͥʁ • Ұ௨ΓΩϟονΞοϓ͍ͨ͠

Slide 3

Slide 3 text

࿩͢͜ͱ&࿩͞ͳ͍͜ͱ • ࿩͢͜ͱ • ϏϧυπʔϧͦΕͧΕͷ໨త • Ͱ͖Δ͜ͱɺͰ͖ͳ͍͜ͱ • ࿩͞ͳ͍͜ͱ • ͦΕͧΕͷ࢖͍ํ΍ࡉ͔͍ઃఆͳͲ

Slide 4

Slide 4 text

΍ͬͨ͜ͱ • جຊతʹ͸υΩϡϝϯτΛಡΉ • πʔϧͷ໨తɺ࡞ΒΕͨܦҢɺίϯηϓτʹண໨ • ։ൃ؀ڥ༻ͷઃఆͱຊ൪༻ͷઃఆΛ΍ͬͯΈΔ(ׂѪ 🙇) • →Ϗϧυ੒Ռ෺ͷࡉ͔͍࠷దԽ͸͠ͳ͍ • create-react-app ͔ΒϏϧυπʔϧΛআ͍ͨΞϓϦ(ʁ)Λ࡞੒ͯ͠ྲྀ༻

Slide 5

Slide 5 text

ର৅ • Browserify • webpack • Parcel • Rollup • esbuild • Vite • Snowpack • SWC

Slide 6

Slide 6 text

webpack

Slide 7

Slide 7 text

webpackΛௐ΂ͨ΋ͷͷ • ͳͥ webpack ͕ੜ·Εͨͷ͔ʁʹରͯ͠ͷ౴͕͑ݟ͔ͭΒͳ ͔ͬͨ • webpack ͕ੜ·Εͨ౰࣌ͷ web frontend ͷঢ়گʹཱͪฦΔ • webpack ΑΓલʹ͋ͬͨ Browserify Λௐ΂ͯΈΔ͜ͱʹ

Slide 8

Slide 8 text

Browserify

Slide 9

Slide 9 text

Browserifyͱ͸ • http://browserify.org/ • 2011~ • ݱࡏ(2021)΋ίϛοτ͕ଓ͚ΒΕ͍ͯΔ

Slide 10

Slide 10 text

Browserify͸ͳͥੜ·Εͨͷ͔ • http://browserify.org/ Browserify lets you require('modules') in the browser by bundling up all of your dependencies. • https://github.com/browserify/browserify require('modules') in the browser

Slide 11

Slide 11 text

Browserify͸ͳͥੜ·Εͨͷ͔ • ౰࣌ Node.js Ͱॻ͚ͨ require Λɺϒϥ΢βͰಈ͔͢ js Ͱ΋ॻ ͚ΔΑ͏ʹ͍ͨ͠ • ϒϥ΢βͰಈ͔͢ js ΋ɺϞδϡʔϧ෼ׂͯ͠ॻ͖͍ͨ

Slide 12

Slide 12 text

Browserifyͷ՝୊ • js Ҏ֎ͷϑΝΠϧ(css, png ͳͲ)ΛόϯυϧͰ͖ͳ͍ • → plugin Ͱ͓ͦΒ͘Մೳɺ͋͑ͯର৅֎ͱ͍ͯ͠Δͷ͔΋ • serve ػೳ͕ແ͍ • → gulp ͳͲͷλεΫϥϯφʔͱ૊Έ߹Θͤͯ࢖͏ඞཁ͕͋ͬ ͨ

Slide 13

Slide 13 text

webpack

Slide 14

Slide 14 text

webpackͱ͸

Slide 15

Slide 15 text

webpackͱ͸ • https://webpack.js.org/ • 2014~ • 2021ݱࡏɺϏϧυπʔϧͷσϑΝΫτελϯμʔυ

Slide 16

Slide 16 text

webpackͱ͸ • https://webpack.js.org/concepts/ At its core, webpack is a static module bundler for modern JavaScript applications. • https://webpack.js.org/concepts/#loaders Out of the box, webpack only understands JavaScript and JSON fi les. (→v5͔Β asset management ػೳʹΑΓɺը૾΍ϑΥϯτ΋ղऍՄೳʹ)

Slide 17

Slide 17 text

webpackͱ͸ • https://webpack.js.org/concepts/why-webpack/#wouldnt-it- be-nice (தུ)This is why webpack exists. It's a tool that lets you bundle your JavaScript applications (supporting both ESM and CommonJS), and it can be extended to support many different assets such as images, fonts and stylesheets.

Slide 18

Slide 18 text

webpack͸ͳͥੜ·Εͨͷ͔ • a static module bundler for modern JavaScript applications ͕ ཉ͔ͬͨ͠ • → require Λ࢖͑ΔΑ͏ʹ͢Δ͚ͩʹཹ·Βͳ͍ • (Loader ʹΑΓɺ) js Ҏ֎ͷ༷ʑͳܗࣜͷϑΝΠϧΛϏϧυՄೳ • Ұํɺdev server ʹؔ͢Δݴٴ͸ݟ౰ͨΒͳ͔ͬͨ

Slide 19

Slide 19 text

webpackͷ՝୊ • frontend application ͷڊେԽʹΑΔϏϧυ଎౓ͷ௿Լ͕ݦஶ • webpack.con fi g.js ॻ͘ͷਏ͍(ͱݴΘΕ͍ͯΔ)໰୊ • →͍Ζ͍ΖͰ͖Δ͜ͱͷτϨʔυΦϑͰ΋͋Δ • όʔδϣϯΞοϓʹΑΓഁյతʹγϯλοΫε͕มΘΔ • ࡉ͔͍᠘(Loader ͷద༻ॱ͕഑ྻͷ຤ඌ͔Β౳)͕͋Δɺetc...

Slide 20

Slide 20 text

Parcel

Slide 21

Slide 21 text

Parcelͱ͸

Slide 22

Slide 22 text

Parcelͱ͸ • https://parceljs.org/ • 2017~ • ઃఆෆཁ(ʂ)ͷϞδϡʔϧόϯυϥ • ֦ுࢠ͔ΒඞཁͳϥΠϒϥϦΛࣗಈͰΠϯετʔϧ • .babelrc ͳͲΛࣗಈͰಡΈʹ͍͘ • v2 Λઈࢍ։ൃத

Slide 23

Slide 23 text

Parcel͸ͳͥੜ·Εͨͷ͔ • https://parceljs.org/ Blazing fast bundle times Parcel uses worker processes to enable multicore compilation, and has a fi lesystem cache for fast rebuilds even after a restart. • ϕϯνϚʔΫ΋ࡌ͍ͤͯΔˠ଎౓Λڧௐʁ

Slide 24

Slide 24 text

Parcel͸ͳͥੜ·Εͨͷ͔ • https://parceljs.org/ Parcel has out of the box support for JS, CSS, HTML, fi le assets, and more - no plugins needed. Code is automatically transformed using Babel, PostCSS, and PostHTML when needed - even node_modules. • →ඪ४Ͱ js ͱ json ͔͠ղऍͰ͖ͳ͍ webpack ͱ͸ҟͳΔ఺

Slide 25

Slide 25 text

Parcel͸ͳͥੜ·Εͨͷ͔ • Ϗϧυ଎౓Λ଎͍ͨ͘͠ • → Worker process ͷར༻ɺΩϟογϡ • ϏϧυઃఆΛָʹ͍ͨ͠ • → Zero con fi guration

Slide 26

Slide 26 text

Parcelͷ՝୊ • Zero con fi gurationɺͱ͸͍͑… • Production ༻ʹ͸࠷దԽΛֻ͚͍ͨ • →ࡉ͔͍νϡʔχϯά͸Ͱ͖ͳ͍ • sandbox Ͱͷӡ༻ʹ͸޲͕͘ຊ൪ʹ͸࠾༻͠ʹ͍͘ҹ৅

Slide 27

Slide 27 text

Rollup

Slide 28

Slide 28 text

Rollupͱ͸ • https://rollupjs.org/guide/en/ • 2018~ • Svelte ͱಉ͡࡞ऀ • ES6 ج४ͷϞδϡʔϧόϯυϥ

Slide 29

Slide 29 text

ࢀߟ: ECMAScript versions 7FS 0 ffi DJBM/BNF ֓ཁ &4 &$."4DSJQU ࠷ॳ &4 &$."4DSJQU &4 &$."4DSJQU &4 &$."4DSJQU "CBOEPOFE &4 &$."4DSJQU VTFTUSJDU "SSBZNBQ %BUFOPXͳͲ &4 &$."4DSJQU MFU DPOTU $MBTT 1SPNJTF &4NPEVMFT &$."4DSJQU "SSBZJODMVEFTͳͲ தུ &$."4DSJQU #JH*OU OVMMJTIDPBMFTDJOHͳͲ IEͷน

Slide 30

Slide 30 text

Rollupͱ͸ • https://rollupjs.org/guide/en/#overview It uses the new standardized format for code modules included in the ES6 revision of JavaScript, instead of previous idiosyncratic solutions such as CommonJS and AMD. ES modules let you freely and seamlessly combine the most useful individual functions from your favorite libraries. • ES6 ج४ͳͷͰɺES modules ͕࢖͑Δ • →ґଘؔ܎ͷղܾ͕͠΍͍͢

Slide 31

Slide 31 text

Rollupͱ͸ • https://rollupjs.org/guide/en/#the-why Rollup allows you to write your code using the new module system, and will then compile it back down to existing supported formats such as CommonJS modules, AMD modules, and IIFE-style scripts. • چܗࣜ(CommonJS ͳͲ)ʹ໭ͤΔ • https://rollupjs.org/guide/en/#compatibility Rollup can import existing CommonJS modules through a plugin. • (Plugin ʹΑΓɺ) CommonJS (چܗࣜͷϞδϡʔϧ)ͷΠϯϙʔτ΋αϙʔτ

Slide 32

Slide 32 text

Rollup͸ͳͥੜ·Εͨͷ͔ • (js ϑΝΠϧʹ͓͚Δ)ґଘؔ܎ͷղܾʹओ؟Λஔ͍͍ͯͦ͏ • ͜ͷ఺ʹ͓͍ͯ͸ Browserify ͱྨࣅ͍ͯ͠Δ • ඪ४Λ ES6 ʹͨ͜͠ͱͰɺΑΓΩϨΠʹґଘؔ܎Λղܾ • ඪ४Ͱ͸ js ͔͠ղऍͰ͖ͳ͍(plugin Ͱ֦ுՄೳ) • ͜ͷ఺ʹ͓͍ͯ͸ webpack ͱྨࣅ͍ͯ͠Δ • ඪ४ͰͰ͖Δ͜ͱΛ੍ݶ֦ͭͭ͠ுੑΛߴΊΔํ޲ੑ

Slide 33

Slide 33 text

esbuild

Slide 34

Slide 34 text

esbuildͱ͸ • https://esbuild.github.io/ • 2017(2020?)~ (ݱࡏ(2021)࣌఺Ͱβ൛) • Figma ࣾͷ CTO ͕ҰਓͰ։ൃ • ͱʹ͔͘଎͍ js όϯυϥ

Slide 35

Slide 35 text

esbuildͱ͸ An extremely fast JavaScript bundler

Slide 36

Slide 36 text

esbuild͸ͳͥ଎͍ͷ͔ • https://esbuild.github.io/faq/#why-is-esbuild-fast It's written in Go and compiles to native code. • →ࣄલίϯύΠϧ&ฒྻॲཧ͕ॻ͖΍͍͔͢Β Everything in esbuild is written from scratch. • →αʔυύʔςΟϥΠϒϥϦ΁ͷґଘ͕ແ͍

Slide 37

Slide 37 text

esbuild͸ͳͥੜ·Εͨͷ͔ • https://esbuild.github.io/faq/#upcoming-roadmap I don't think esbuild should become an all-in-one solution for all frontend needs. • https://esbuild.github.io/faq/#production-readiness Think of esbuild as a "linker" for the web. It knows how to transform and bundle JavaScript and CSS. But the details of how your source code ends up as plain JavaScript or CSS may need to be 3rd-party code. • →είʔϓΛݶఆ͓ͯ͠Γɺ͋ΒΏΔχʔζΛຬͨ͢πʔϧʹͳΖ͏ͱ͸͍ͯ͠ͳ͍

Slide 38

Slide 38 text

esbuild͸ͳͥੜ·Εͨͷ͔ • https://esbuild.github.io/faq/#production-readiness I'm building esbuild because I fi nd it fun to build and because it's the tool I'd want to use. • →ͱʹ͔͘Ϗϧυ(όϯυϧ)଎౓ͷ଎͍πʔϧ͕ཉ͔ͬͨ͠ • https://esbuild.github.io/faq/#upcoming-roadmap I also hope esbuild inspires other build tools to dramatically improve performance by overhauling their implementations so that everyone can bene fi t, not just those that use esbuild. • → esbuild ͷ஀ੜ͕ɺଞͷπʔϧͷύϑΥʔϚϯεվળͷ͖͔͚ͬʹͳͬͯ΄͍͠

Slide 39

Slide 39 text

esbuildͷ՝୊ • watch ͱ serve ྆ํͷαϙʔτ͕͋Δ͕ซ༻Ͱ͖ͳ͍ • hot reload ͷαϙʔτ΋ͳ͍ • plugin API ΋ݱࡏ(2021)ະ࣮૷ • css ͷղऍ͸ݱࡏ(2021) WIP ͰରԠ • →·ͩ·ͩػೳ͕଍Γͯͳ͍

Slide 40

Slide 40 text

Vite

Slide 41

Slide 41 text

Viteͱ͸ • https://vitejs.dev/ • 2020~ • Vue ͱಉ͡࡞ऀ • ։ൃ؀ڥͰ͸(΄΅)όϯυϧ͠ͳ͍ • ඪ४Ͱ ts, vue, jsx, css ͳͲΛαϙʔτ

Slide 42

Slide 42 text

Vite͸ͳͥੜ·Εͨͷ͔ • https://vitejs.dev/guide/why.html#the-problems However, as we start to build more and more ambitious applications, the amount of JavaScript we are dealing with also increased exponentially. It is not uncommon for large scale projects to contain thousands of modules. We are starting to hit a performance bottleneck for JavaScript based tooling Vite aims to address these issues by leveraging new advancements in the ecosystem: the availability of native ES modules in the browser, and the rise of JavaScript tools written in compile-to-native languages. • →։ൃ؀ڥʹ͓͚ΔϏϧυ଎౓ͷ௿ԼΛɺES modules ΍ js ੡Ͱͳ͍πʔϧͷར༻ʹΑͬͯղ ܾ͍ͨ͠

Slide 43

Slide 43 text

Viteͷ࢓૊Έ • ΞϓϦέʔγϣϯ಺ͷϞδϡʔϧΛʮdependenciesʯͱʮsource codeʯʹ෼͚Δ • ʮdependenciesʯ: plain js (ม׵͕ෆཁ)͔ͭߋ৽ස౓͕௿͍ • → esbuild Λ༻͍ͯࣄલόϯυϧ • ʮsource codeʯ: not plain js (ม׵͕ඞཁ)͔ͭߋ৽ස౓͕ߴ͍ • →όϯυϧͤͣɺES modules Λհͯ͠ϒϥ΢βʹ serve (։ൃ࣌͸Ϟμϯϒϥ΢βར༻લఏ) • →։ൃαʔόʔͷॳճىಈΛ଎͘͢Δ

Slide 44

Slide 44 text

Viteͷ࢓૊Έ • ϑΝΠϧͷฤू఺ΛؚΉ(΋͘͠͸ͦͷۙลͷ)ϞδϡʔϧͷΈΛߋ৽͢Δ • HTTP headers Λར༻͠ɺϦϩʔυ࣌ͷ࠶ಡΈࠐΈΛ࠷খݶʹ͢Δ • source code: 304 Not Modi fi ed • dependencies: Cache-Control: max-age=31536000,immutable • →։ൃαʔόʔͷ࠶ಡΈࠐΈΛ଎͘͢Δ

Slide 45

Slide 45 text

Viteͷ࢓૊Έ • https://vitejs.dev/guide/why.html#why-bundle-for-production Even though native ESM is now widely supported, shipping unbundled ESM in production is still inef fi cient (even with HTTP/2) due to the additional network round trips caused by nested imports. • ຊ൪؀ڥʹ͓͍ͯ͸ɺVite ͸όϯυϧΛߦ͏ • Rollup Λར༻ • কདྷతʹ͸ esbuild Λ࢖͏Α͏ʹͳΔ͔΋ʁ

Slide 46

Slide 46 text

Snowpack

Slide 47

Slide 47 text

Snowpackͱ͸ • https://www.snowpack.dev/ • 2020~ • Pika ϓϩδΣΫτͷҰ෦ https://www.pika.dev • ΋͏Ұͭ͸ Skypack CDN https://www.skypack.dev/

Slide 48

Slide 48 text

Snowpackͱ͸ • ։ൃ؀ڥʹ͓͍ͯ΋ຊ൪؀ڥʹ͓͍ͯ΋όϯυϧ͠ͳ͍ • → Vite ͱҟͳΔ • ඪ४Ͱ ts, jsx, css ͳͲΛαϙʔτ • → Vite ͱಉ͡

Slide 49

Slide 49 text

Snowpackͱ͸ • Unbundled development • ґଘؔ܎Λอͬͨ··ɺݸʑͷϑΝΠϧΛผʑʹϒϥ΢βʹ഑৴͢Δ • Ϗϧυͷ଎͞ɺΩϟογϡͷ͠қ͞ɺϓϩδΣΫτͷαΠζʹΑΔӨڹΛ௿ݮͰ ͖Δ౳ͷϝϦοτΛಘΒΕΔ • npm depencencies ʹؔͯ͠΋ಉ༷ • dev server ͸ϒϥ΢β͔ΒͷϦΫΤετ͕͋ͬͨͱ͖ʹॳΊͯର৅ϑΝΠϧΛϏ ϧυ͢Δ

Slide 50

Slide 50 text

Snowpackͱ͸ • ຊ൪؀ڥ༻ͷϏϧυʹ͸ esbuild ͕࢖ΘΕΔ • ҰԠ At the moment, we only recommended this for smaller projects. ͱஅ͍ͬͯΔ • ࠷దԽ༻ͷϓϥάΠϯʹ webpack (ਪ঑)ͱ Rollup ͕͋Δ

Slide 51

Slide 51 text

Snowpack͸ͳͥੜ·Εͨͷ͔ • https://www.pika.dev/ We're on a mission to make the web 90% faster. • όϯυϧ͕ཁΒͳ͍ੈքΛ໨ࢦ͢ • Snowpack: ϓϩμΫτίʔυͷόϯυϧΛແ͘͢ • Skypack CDN: npm dependencies ͷόϯυϧΛແ͘͢

Slide 52

Slide 52 text

SWC

Slide 53

Slide 53 text

SWCͱ͸ • https://swc.rs/ • Speedy Web Compiler ͷུ • Rust ੡ • js, ts ͷม׵Λ୲͏ • →Ϗϧυπʔϧͱ͍͏ΑΓ͸ js ίϯύΠϥ(Babel ͱಉ͡໾ׂ) • spack ͱ͍͏όϯυϧπʔϧ΋ಉ͍ࠝͯ͠Δ

Slide 54

Slide 54 text

SWC͸ͳͥੜ·Εͨͷ͔ • https://swc.rs/blog/2020/09/08/swc-1.2.23/#performance- improvement swc becomes faster and it will be much faster with the next version. Its performance is similar to it of esbuild, even though there are so many low-hanging fruits. • → esbuild Λҙ͍ࣝͯͦ͠͏

Slide 55

Slide 55 text

SWC͸ͳͥੜ·Εͨͷ͔ • https://swc.rs/docs/spack-basic/#con fi g- fi le spack can be con fi gured with spack.con fi g.js. Con fi g fi le for the spack is almost simillar to webpack. In future, I'll add a webpack-compatible plugin system. • → webpack Λҙ͍ࣝͯͦ͠͏

Slide 56

Slide 56 text

SWC͸ͳͥੜ·Εͨͷ͔ • js (AltJS)ͷίϯύΠϧ଎౓Λվળ͍ͨ͠ • → esbuild ʹ͍ۙύϑΥʔϚϯε • webpack ͷόϯυϧ଎౓Λվળ͍ͨ͠(spack) • → con fi g Λ͍ۙ͠΋ͷʹͨ͠Γɺޓ׵ੑͷ͋ΔϓϥάΠϯγεςϜΛಋೖ͠Α ͏ͱ͍ͯ͠Δ • → webpack ར༻૚ΛऔΓࠐΈ͍ͨʁ

Slide 57

Slide 57 text

·ͱΊ

Slide 58

Slide 58 text

࠷ۙͷϏϧυπʔϧ͕ੜ·Εͨഎܠ • ैདྷͷπʔϧ(webpack, Parcel)Ͱ͸ɺ web frontend application ͷڊେԽʹ൐͍ɺ։ൃ؀ڥʹ͓͚ΔϏϧυ଎౓(DX)ͷ௿Լ͕ݦஶ ʹͳ͖ͬͯͨ • Ϟμϯϒϥ΢βʹ͓͍ͯ͸ ES modules ౳ͷػೳ͕࢖͑ΔΑ͏ʹ ͳ͖ͬͯͨ • js (Node.js)ͷݶքΛ௒͍͑ͨ

Slide 59

Slide 59 text

Ϗϧυπʔϧͷ܏޲ͱ͜Ε͔Β • ։ൃ؀ڥͰ͸όϯυϧ͠ͳ͍ํ޲΁ • ຊ൪؀ڥʹ͓͚Δόϯυϧʹ͍ͭͯ͸ҙݟ͕ผΕ͍ͯΔ • ࣮ࡍ໰୊ IE ͕ϦϏϯάσουঢ়ଶ • ׬શʹόϯυϧෆཁʹͳΔະདྷ͸·ͩઌ͔ • js ੡Ͱͳ͍πʔϧ΋ग़ݱ͖͍ͯͯ͠Δ

Slide 60

Slide 60 text

ॴײ • frontend ͷྺ࢙Λ֞ؒݟΕΔྑ͍ػձʹͳΓ·ͨ͠ • ଍ݩͷঢ়گΛݟͨײ͡ɺ࠷ۙͷπʔϧͷதͰ͸ Vite ͷࢥ૝͕ͪΐ͏Ͳ ྑͦ͞͏ • ࢖༻ײ΋ͳ͔ͳ͔ྑ͔ͬͨ • esbuild ͱ Rollup Λར༻͍ͯ͠ΔͨΊɺ͜ΕΒ΋ซ͓͓ͤͯ͑ͯ͘͞ ͱྑͦ͞͏

Slide 61

Slide 61 text

͋Γ͕ͱ͏͍͟͝·ͨ͠