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

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

April 07, 2021

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


April 07, 2021

More Decks by やし

Other Decks in Technology


  1. ର৅ • Browserify • webpack • Parcel • Rollup •

    esbuild • Vite • Snowpack • SWC
  2. webpackΛௐ΂ͨ΋ͷͷ • ͳͥ webpack ͕ੜ·Εͨͷ͔ʁʹରͯ͠ͷ౴͕͑ݟ͔ͭΒͳ ͔ͬͨ • webpack ͕ੜ·Εͨ౰࣌ͷ web

    frontend ͷঢ়گʹཱͪฦΔ • webpack ΑΓલʹ͋ͬͨ Browserify Λௐ΂ͯΈΔ͜ͱʹ 
  3. 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 
  4. Browserifyͷ՝୊ • js Ҏ֎ͷϑΝΠϧ(css, png ͳͲ)ΛόϯυϧͰ͖ͳ͍ • → plugin Ͱ͓ͦΒ͘Մೳɺ͋͑ͯର৅֎ͱ͍ͯ͠Δͷ͔΋

    • serve ػೳ͕ແ͍ • → gulp ͳͲͷλεΫϥϯφʔͱ૊Έ߹Θͤͯ࢖͏ඞཁ͕͋ͬ ͨ 
  5. 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 ػೳʹΑΓɺը૾΍ϑΥϯτ΋ղऍՄೳʹ) 
  6. 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. 
  7. webpack͸ͳͥੜ·Εͨͷ͔ • a static module bundler for modern JavaScript applications

    ͕ ཉ͔ͬͨ͠ • → require Λ࢖͑ΔΑ͏ʹ͢Δ͚ͩʹཹ·Βͳ͍ • (Loader ʹΑΓɺ) js Ҏ֎ͷ༷ʑͳܗࣜͷϑΝΠϧΛϏϧυՄೳ • Ұํɺdev server ʹؔ͢Δݴٴ͸ݟ౰ͨΒͳ͔ͬͨ 
  8. webpackͷ՝୊ • frontend application ͷڊେԽʹΑΔϏϧυ଎౓ͷ௿Լ͕ݦஶ • webpack.con fi g.js ॻ͘ͷਏ͍(ͱݴΘΕ͍ͯΔ)໰୊

    • →͍Ζ͍ΖͰ͖Δ͜ͱͷτϨʔυΦϑͰ΋͋Δ • όʔδϣϯΞοϓʹΑΓഁյతʹγϯλοΫε͕มΘΔ • ࡉ͔͍᠘(Loader ͷద༻ॱ͕഑ྻͷ຤ඌ͔Β౳)͕͋Δɺetc... 
  9. 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. • ϕϯνϚʔΫ΋ࡌ͍ͤͯΔˠ଎౓Λڧௐʁ 
  10. 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 ͱ͸ҟͳΔ఺ 
  11. Parcelͷ՝୊ • Zero con fi gurationɺͱ͸͍͑… • Production ༻ʹ͸࠷దԽΛֻ͚͍ͨ •

    →ࡉ͔͍νϡʔχϯά͸Ͱ͖ͳ͍ • sandbox Ͱͷӡ༻ʹ͸޲͕͘ຊ൪ʹ͸࠾༻͠ʹ͍͘ҹ৅ 
  12. ࢀߟ: ECMAScript versions 7FS 0 ffi DJBM/BNF ֓ཁ &4 &$."4DSJQU

  13. 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 ͕࢖͑Δ • →ґଘؔ܎ͷղܾ͕͠΍͍͢ 
  14. 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 (چܗࣜͷϞδϡʔϧ)ͷΠϯϙʔτ΋αϙʔτ 
  15. Rollup͸ͳͥੜ·Εͨͷ͔ • (js ϑΝΠϧʹ͓͚Δ)ґଘؔ܎ͷղܾʹओ؟Λஔ͍͍ͯͦ͏ • ͜ͷ఺ʹ͓͍ͯ͸ Browserify ͱྨࣅ͍ͯ͠Δ • ඪ४Λ

    ES6 ʹͨ͜͠ͱͰɺΑΓΩϨΠʹґଘؔ܎Λղܾ • ඪ४Ͱ͸ js ͔͠ղऍͰ͖ͳ͍(plugin Ͱ֦ுՄೳ) • ͜ͷ఺ʹ͓͍ͯ͸ webpack ͱྨࣅ͍ͯ͠Δ • ඪ४ͰͰ͖Δ͜ͱΛ੍ݶ֦ͭͭ͠ுੑΛߴΊΔํ޲ੑ 
  16. 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. • →αʔυύʔςΟϥΠϒϥϦ΁ͷґଘ͕ແ͍ 
  17. 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. • →είʔϓΛݶఆ͓ͯ͠Γɺ͋ΒΏΔχʔζΛຬͨ͢πʔϧʹͳΖ͏ͱ͸͍ͯ͠ͳ͍ 
  18. 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 ͷ஀ੜ͕ɺଞͷπʔϧͷύϑΥʔϚϯεվળͷ͖͔͚ͬʹͳͬͯ΄͍͠ 
  19. esbuildͷ՝୊ • watch ͱ serve ྆ํͷαϙʔτ͕͋Δ͕ซ༻Ͱ͖ͳ͍ • hot reload ͷαϙʔτ΋ͳ͍

    • plugin API ΋ݱࡏ(2021)ະ࣮૷ • css ͷղऍ͸ݱࡏ(2021) WIP ͰରԠ • →·ͩ·ͩػೳ͕଍Γͯͳ͍ 
  20. 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 ੡Ͱͳ͍πʔϧͷར༻ʹΑͬͯղ ܾ͍ͨ͠ 
  21. Viteͷ࢓૊Έ • ΞϓϦέʔγϣϯ಺ͷϞδϡʔϧΛʮdependenciesʯͱʮsource codeʯʹ෼͚Δ • ʮdependenciesʯ: plain js (ม׵͕ෆཁ)͔ͭߋ৽ස౓͕௿͍ •

    → esbuild Λ༻͍ͯࣄલόϯυϧ • ʮsource codeʯ: not plain js (ม׵͕ඞཁ)͔ͭߋ৽ස౓͕ߴ͍ • →όϯυϧͤͣɺES modules Λհͯ͠ϒϥ΢βʹ serve (։ൃ࣌͸Ϟμϯϒϥ΢βར༻લఏ) • →։ൃαʔόʔͷॳճىಈΛ଎͘͢Δ 
  22. Viteͷ࢓૊Έ • ϑΝΠϧͷฤू఺ΛؚΉ(΋͘͠͸ͦͷۙลͷ)ϞδϡʔϧͷΈΛߋ৽͢Δ • HTTP headers Λར༻͠ɺϦϩʔυ࣌ͷ࠶ಡΈࠐΈΛ࠷খݶʹ͢Δ • source code:

    304 Not Modi fi ed • dependencies: Cache-Control: max-age=31536000,immutable • →։ൃαʔόʔͷ࠶ಡΈࠐΈΛ଎͘͢Δ 
  23. 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 Λ࢖͏Α͏ʹͳΔ͔΋ʁ 
  24. Snowpackͱ͸ • ຊ൪؀ڥ༻ͷϏϧυʹ͸ esbuild ͕࢖ΘΕΔ • ҰԠ At the moment,

    we only recommended this for smaller projects. ͱஅ͍ͬͯΔ • ࠷దԽ༻ͷϓϥάΠϯʹ webpack (ਪ঑)ͱ Rollup ͕͋Δ 
  25. Snowpack͸ͳͥੜ·Εͨͷ͔ • https://www.pika.dev/ We're on a mission to make the

    web 90% faster. • όϯυϧ͕ཁΒͳ͍ੈքΛ໨ࢦ͢ • Snowpack: ϓϩμΫτίʔυͷόϯυϧΛແ͘͢ • Skypack CDN: npm dependencies ͷόϯυϧΛແ͘͢ 
  26. SWCͱ͸ • https://swc.rs/ • Speedy Web Compiler ͷུ • Rust

    ੡ • js, ts ͷม׵Λ୲͏ • →Ϗϧυπʔϧͱ͍͏ΑΓ͸ js ίϯύΠϥ(Babel ͱಉ͡໾ׂ) • spack ͱ͍͏όϯυϧπʔϧ΋ಉ͍ࠝͯ͠Δ 
  27. 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 Λҙ͍ࣝͯͦ͠͏ 
  28. 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 Λҙ͍ࣝͯͦ͠͏ 
  29. SWC͸ͳͥੜ·Εͨͷ͔ • js (AltJS)ͷίϯύΠϧ଎౓Λվળ͍ͨ͠ • → esbuild ʹ͍ۙύϑΥʔϚϯε • webpack

    ͷόϯυϧ଎౓Λվળ͍ͨ͠(spack) • → con fi g Λ͍ۙ͠΋ͷʹͨ͠Γɺޓ׵ੑͷ͋ΔϓϥάΠϯγεςϜΛಋೖ͠Α ͏ͱ͍ͯ͠Δ • → webpack ར༻૚ΛऔΓࠐΈ͍ͨʁ 
  30. ॴײ • frontend ͷྺ࢙Λ֞ؒݟΕΔྑ͍ػձʹͳΓ·ͨ͠ • ଍ݩͷঢ়گΛݟͨײ͡ɺ࠷ۙͷπʔϧͷதͰ͸ Vite ͷࢥ૝͕ͪΐ͏Ͳ ྑͦ͞͏ •

    ࢖༻ײ΋ͳ͔ͳ͔ྑ͔ͬͨ • esbuild ͱ Rollup Λར༻͍ͯ͠ΔͨΊɺ͜ΕΒ΋ซ͓͓ͤͯ͑ͯ͘͞ ͱྑͦ͞͏