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

Transcript

1. Web FrontendϏϧυπʔϧͷ աڈͱݱࡏͱະདྷ 
   HJGUFF
   UFDICBTI
   !ZBTIJ 
2. ಈػ • webpack Ͱ͸ͳ͍Ϗϧυπʔϧ͕͜͜࠷ۙଟ਺ग़ݱ&ൃలͯ͠ ͖͍ͯΔͱ͍͏ҹ৅͕͋ͬͨ • →ͳͥʁ • Ұ௨ΓΩϟονΞοϓ͍ͨ͠ 
3. ࿩͢͜ͱ&࿩͞ͳ͍͜ͱ • ࿩͢͜ͱ • ϏϧυπʔϧͦΕͧΕͷ໨త • Ͱ͖Δ͜ͱɺͰ͖ͳ͍͜ͱ • ࿩͞ͳ͍͜ͱ • ͦΕͧΕͷ࢖͍ํ΍ࡉ͔͍ઃఆͳͲ 
4. ΍ͬͨ͜ͱ • جຊతʹ͸υΩϡϝϯτΛಡΉ • πʔϧͷ໨తɺ࡞ΒΕͨܦҢɺίϯηϓτʹண໨ • ։ൃ؀ڥ༻ͷઃఆͱຊ൪༻ͷઃఆΛ΍ͬͯΈΔ(ׂѪ 🙇) • →Ϗϧυ੒Ռ෺ͷࡉ͔͍࠷దԽ͸͠ͳ͍ • create-react-app ͔ΒϏϧυπʔϧΛআ͍ͨΞϓϦ(ʁ)Λ࡞੒ͯ͠ྲྀ༻ 
5. ର৅ • Browserify • webpack • Parcel • Rollup • esbuild • Vite • Snowpack • SWC
6. webpack 
7. webpackΛௐ΂ͨ΋ͷͷ • ͳͥ webpack ͕ੜ·Εͨͷ͔ʁʹରͯ͠ͷ౴͕͑ݟ͔ͭΒͳ ͔ͬͨ • webpack ͕ੜ·Εͨ౰࣌ͷ web frontend ͷঢ়گʹཱͪฦΔ • webpack ΑΓલʹ͋ͬͨ Browserify Λௐ΂ͯΈΔ͜ͱʹ 
8. Browserify 
9. Browserifyͱ͸ • http://browserify.org/ • 2011~ • ݱࡏ(2021)΋ίϛοτ͕ଓ͚ΒΕ͍ͯΔ 
10. 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 
11. Browserify͸ͳͥੜ·Εͨͷ͔ • ౰࣌ Node.js Ͱॻ͚ͨ require Λɺϒϥ΢βͰಈ͔͢ js Ͱ΋ॻ ͚ΔΑ͏ʹ͍ͨ͠ • ϒϥ΢βͰಈ͔͢ js ΋ɺϞδϡʔϧ෼ׂͯ͠ॻ͖͍ͨ 
12. Browserifyͷ՝୊ • js Ҏ֎ͷϑΝΠϧ(css, png ͳͲ)ΛόϯυϧͰ͖ͳ͍ • → plugin Ͱ͓ͦΒ͘Մೳɺ͋͑ͯର৅֎ͱ͍ͯ͠Δͷ͔΋ • serve ػೳ͕ແ͍ • → gulp ͳͲͷλεΫϥϯφʔͱ૊Έ߹Θͤͯ࢖͏ඞཁ͕͋ͬ ͨ 
13. webpack 
14. webpackͱ͸ 
15. webpackͱ͸ • https://webpack.js.org/ • 2014~ • 2021ݱࡏɺϏϧυπʔϧͷσϑΝΫτελϯμʔυ 
16. 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 ػೳʹΑΓɺը૾΍ϑΥϯτ΋ղऍՄೳʹ) 
17. 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. 
18. webpack͸ͳͥੜ·Εͨͷ͔ • a static module bundler for modern JavaScript applications ͕ ཉ͔ͬͨ͠ • → require Λ࢖͑ΔΑ͏ʹ͢Δ͚ͩʹཹ·Βͳ͍ • (Loader ʹΑΓɺ) js Ҏ֎ͷ༷ʑͳܗࣜͷϑΝΠϧΛϏϧυՄೳ • Ұํɺdev server ʹؔ͢Δݴٴ͸ݟ౰ͨΒͳ͔ͬͨ 
19. webpackͷ՝୊ • frontend application ͷڊେԽʹΑΔϏϧυ଎౓ͷ௿Լ͕ݦஶ • webpack.con fi g.js ॻ͘ͷਏ͍(ͱݴΘΕ͍ͯΔ)໰୊ • →͍Ζ͍ΖͰ͖Δ͜ͱͷτϨʔυΦϑͰ΋͋Δ • όʔδϣϯΞοϓʹΑΓഁյతʹγϯλοΫε͕มΘΔ • ࡉ͔͍᠘(Loader ͷద༻ॱ͕഑ྻͷ຤ඌ͔Β౳)͕͋Δɺetc... 
20. Parcel 
21. Parcelͱ͸ 
22. Parcelͱ͸ • https://parceljs.org/ • 2017~ • ઃఆෆཁ(ʂ)ͷϞδϡʔϧόϯυϥ • ֦ுࢠ͔ΒඞཁͳϥΠϒϥϦΛࣗಈͰΠϯετʔϧ • .babelrc ͳͲΛࣗಈͰಡΈʹ͍͘ • v2 Λઈࢍ։ൃத 
23. 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. • ϕϯνϚʔΫ΋ࡌ͍ͤͯΔˠ଎౓Λڧௐʁ 
24. 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 ͱ͸ҟͳΔ఺ 
25. Parcel͸ͳͥੜ·Εͨͷ͔ • Ϗϧυ଎౓Λ଎͍ͨ͘͠ • → Worker process ͷར༻ɺΩϟογϡ • ϏϧυઃఆΛָʹ͍ͨ͠ • → Zero con fi guration 
26. Parcelͷ՝୊ • Zero con fi gurationɺͱ͸͍͑… • Production ༻ʹ͸࠷దԽΛֻ͚͍ͨ • →ࡉ͔͍νϡʔχϯά͸Ͱ͖ͳ͍ • sandbox Ͱͷӡ༻ʹ͸޲͕͘ຊ൪ʹ͸࠾༻͠ʹ͍͘ҹ৅ 
27. Rollup 
28. Rollupͱ͸ • https://rollupjs.org/guide/en/ • 2018~ • Svelte ͱಉ͡࡞ऀ • ES6 ج४ͷϞδϡʔϧόϯυϥ 
29. ࢀߟ: ECMAScript versions 7FS 0 ffi DJBM
    /BNF ֓ཁ &4 &$."4DSJQU
     ࠷ॳ &4 &$."4DSJQU
     &4 &$."4DSJQU
     &4 &$."4DSJQU
     "CBOEPOFE &4 &$."4DSJQU
     VTF
    TUSJDU
    "SSBZNBQ
    %BUFOPX
    ͳͲ &4 &$."4DSJQU
     MFU
    DPOTU
    $MBTT
    1SPNJTF
    &4
    NPEVMFT &$."4DSJQU
     "SSBZJODMVEFT
    ͳͲ தུ &$."4DSJQU
     #JH*OU
    OVMMJTI
    DPBMFTDJOH
    ͳͲ IEͷน 
30. 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 ͕࢖͑Δ • →ґଘؔ܎ͷղܾ͕͠΍͍͢ 
31. 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 (چܗࣜͷϞδϡʔϧ)ͷΠϯϙʔτ΋αϙʔτ 
32. Rollup͸ͳͥੜ·Εͨͷ͔ • (js ϑΝΠϧʹ͓͚Δ)ґଘؔ܎ͷղܾʹओ؟Λஔ͍͍ͯͦ͏ • ͜ͷ఺ʹ͓͍ͯ͸ Browserify ͱྨࣅ͍ͯ͠Δ • ඪ४Λ ES6 ʹͨ͜͠ͱͰɺΑΓΩϨΠʹґଘؔ܎Λղܾ • ඪ४Ͱ͸ js ͔͠ղऍͰ͖ͳ͍(plugin Ͱ֦ுՄೳ) • ͜ͷ఺ʹ͓͍ͯ͸ webpack ͱྨࣅ͍ͯ͠Δ • ඪ४ͰͰ͖Δ͜ͱΛ੍ݶ֦ͭͭ͠ுੑΛߴΊΔํ޲ੑ 
33. esbuild 
34. esbuildͱ͸ • https://esbuild.github.io/ • 2017(2020?)~ (ݱࡏ(2021)࣌఺Ͱβ൛) • Figma ࣾͷ CTO ͕ҰਓͰ։ൃ • ͱʹ͔͘଎͍ js όϯυϥ 
35. esbuildͱ͸ An extremely fast JavaScript bundler 
36. 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. • →αʔυύʔςΟϥΠϒϥϦ΁ͷґଘ͕ແ͍ 
37. 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. • →είʔϓΛݶఆ͓ͯ͠Γɺ͋ΒΏΔχʔζΛຬͨ͢πʔϧʹͳΖ͏ͱ͸͍ͯ͠ͳ͍ 
38. 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 ͷ஀ੜ͕ɺଞͷπʔϧͷύϑΥʔϚϯεվળͷ͖͔͚ͬʹͳͬͯ΄͍͠ 
39. esbuildͷ՝୊ • watch ͱ serve ྆ํͷαϙʔτ͕͋Δ͕ซ༻Ͱ͖ͳ͍ • hot reload ͷαϙʔτ΋ͳ͍ • plugin API ΋ݱࡏ(2021)ະ࣮૷ • css ͷղऍ͸ݱࡏ(2021) WIP ͰରԠ • →·ͩ·ͩػೳ͕଍Γͯͳ͍ 
40. Vite 
41. Viteͱ͸ • https://vitejs.dev/ • 2020~ • Vue ͱಉ͡࡞ऀ • ։ൃ؀ڥͰ͸(΄΅)όϯυϧ͠ͳ͍ • ඪ४Ͱ ts, vue, jsx, css ͳͲΛαϙʔτ 
42. 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 ੡Ͱͳ͍πʔϧͷར༻ʹΑͬͯղ ܾ͍ͨ͠ 
43. Viteͷ࢓૊Έ • ΞϓϦέʔγϣϯ಺ͷϞδϡʔϧΛʮdependenciesʯͱʮsource codeʯʹ෼͚Δ • ʮdependenciesʯ: plain js (ม׵͕ෆཁ)͔ͭߋ৽ස౓͕௿͍ • → esbuild Λ༻͍ͯࣄલόϯυϧ • ʮsource codeʯ: not plain js (ม׵͕ඞཁ)͔ͭߋ৽ස౓͕ߴ͍ • →όϯυϧͤͣɺES modules Λհͯ͠ϒϥ΢βʹ serve (։ൃ࣌͸Ϟμϯϒϥ΢βར༻લఏ) • →։ൃαʔόʔͷॳճىಈΛ଎͘͢Δ 
44. Viteͷ࢓૊Έ • ϑΝΠϧͷฤू఺ΛؚΉ(΋͘͠͸ͦͷۙลͷ)ϞδϡʔϧͷΈΛߋ৽͢Δ • HTTP headers Λར༻͠ɺϦϩʔυ࣌ͷ࠶ಡΈࠐΈΛ࠷খݶʹ͢Δ • source code: 304 Not Modi fi ed • dependencies: Cache-Control: max-age=31536000,immutable • →։ൃαʔόʔͷ࠶ಡΈࠐΈΛ଎͘͢Δ 
45. 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 Λ࢖͏Α͏ʹͳΔ͔΋ʁ 
46. Snowpack 
47. Snowpackͱ͸ • https://www.snowpack.dev/ • 2020~ • Pika ϓϩδΣΫτͷҰ෦ https://www.pika.dev • ΋͏Ұͭ͸ Skypack CDN https://www.skypack.dev/ 
48. Snowpackͱ͸ • ։ൃ؀ڥʹ͓͍ͯ΋ຊ൪؀ڥʹ͓͍ͯ΋όϯυϧ͠ͳ͍ • → Vite ͱҟͳΔ • ඪ४Ͱ ts, jsx, css ͳͲΛαϙʔτ • → Vite ͱಉ͡ 
49. Snowpackͱ͸ • Unbundled development • ґଘؔ܎Λอͬͨ··ɺݸʑͷϑΝΠϧΛผʑʹϒϥ΢βʹ഑৴͢Δ • Ϗϧυͷ଎͞ɺΩϟογϡͷ͠қ͞ɺϓϩδΣΫτͷαΠζʹΑΔӨڹΛ௿ݮͰ ͖Δ౳ͷϝϦοτΛಘΒΕΔ • npm depencencies ʹؔͯ͠΋ಉ༷ • dev server ͸ϒϥ΢β͔ΒͷϦΫΤετ͕͋ͬͨͱ͖ʹॳΊͯର৅ϑΝΠϧΛϏ ϧυ͢Δ 
50. Snowpackͱ͸ • ຊ൪؀ڥ༻ͷϏϧυʹ͸ esbuild ͕࢖ΘΕΔ • ҰԠ At the moment, we only recommended this for smaller projects. ͱஅ͍ͬͯΔ • ࠷దԽ༻ͷϓϥάΠϯʹ webpack (ਪ঑)ͱ Rollup ͕͋Δ 
51. Snowpack͸ͳͥੜ·Εͨͷ͔ • https://www.pika.dev/ We're on a mission to make the web 90% faster. • όϯυϧ͕ཁΒͳ͍ੈքΛ໨ࢦ͢ • Snowpack: ϓϩμΫτίʔυͷόϯυϧΛແ͘͢ • Skypack CDN: npm dependencies ͷόϯυϧΛແ͘͢ 
52. SWC 
53. SWCͱ͸ • https://swc.rs/ • Speedy Web Compiler ͷུ • Rust ੡ • js, ts ͷม׵Λ୲͏ • →Ϗϧυπʔϧͱ͍͏ΑΓ͸ js ίϯύΠϥ(Babel ͱಉ͡໾ׂ) • spack ͱ͍͏όϯυϧπʔϧ΋ಉ͍ࠝͯ͠Δ 
54. 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 Λҙ͍ࣝͯͦ͠͏ 
55. 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 Λҙ͍ࣝͯͦ͠͏ 
56. SWC͸ͳͥੜ·Εͨͷ͔ • js (AltJS)ͷίϯύΠϧ଎౓Λվળ͍ͨ͠ • → esbuild ʹ͍ۙύϑΥʔϚϯε • webpack ͷόϯυϧ଎౓Λվળ͍ͨ͠(spack) • → con fi g Λ͍ۙ͠΋ͷʹͨ͠Γɺޓ׵ੑͷ͋ΔϓϥάΠϯγεςϜΛಋೖ͠Α ͏ͱ͍ͯ͠Δ • → webpack ར༻૚ΛऔΓࠐΈ͍ͨʁ 
57. ·ͱΊ 
58. ࠷ۙͷϏϧυπʔϧ͕ੜ·Εͨഎܠ • ैདྷͷπʔϧ(webpack, Parcel)Ͱ͸ɺ web frontend application ͷڊେԽʹ൐͍ɺ։ൃ؀ڥʹ͓͚ΔϏϧυ଎౓(DX)ͷ௿Լ͕ݦஶ ʹͳ͖ͬͯͨ • Ϟμϯϒϥ΢βʹ͓͍ͯ͸ ES modules ౳ͷػೳ͕࢖͑ΔΑ͏ʹ ͳ͖ͬͯͨ • js (Node.js)ͷݶքΛ௒͍͑ͨ 
59. Ϗϧυπʔϧͷ܏޲ͱ͜Ε͔Β • ։ൃ؀ڥͰ͸όϯυϧ͠ͳ͍ํ޲΁ • ຊ൪؀ڥʹ͓͚Δόϯυϧʹ͍ͭͯ͸ҙݟ͕ผΕ͍ͯΔ • ࣮ࡍ໰୊ IE ͕ϦϏϯάσουঢ়ଶ • ׬શʹόϯυϧෆཁʹͳΔະདྷ͸·ͩઌ͔ • js ੡Ͱͳ͍πʔϧ΋ग़ݱ͖͍ͯͯ͠Δ 
60. ॴײ • frontend ͷྺ࢙Λ֞ؒݟΕΔྑ͍ػձʹͳΓ·ͨ͠ • ଍ݩͷঢ়گΛݟͨײ͡ɺ࠷ۙͷπʔϧͷதͰ͸ Vite ͷࢥ૝͕ͪΐ͏Ͳ ྑͦ͞͏ • ࢖༻ײ΋ͳ͔ͳ͔ྑ͔ͬͨ • esbuild ͱ Rollup Λར༻͍ͯ͠ΔͨΊɺ͜ΕΒ΋ซ͓͓ͤͯ͑ͯ͘͞ ͱྑͦ͞͏ 
61. ͋Γ͕ͱ͏͍͟͝·ͨ͠