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

Native-ESM powered web dev build tool

kazupon
June 12, 2020

Native-ESM powered web dev build tool

kazupon

June 12, 2020
Tweet

More Decks by kazupon

Other Decks in Programming

Transcript

  1. PLAID, inc. Vue.js Core Team Member Vue.js Japan User Group

    Organizer Creator of Vue I18n & Intlify WebAssembly Love ❤ @kazu_pon kazupon kazupon
  2. Agenda • ☺ What am I speaking about? • Inside

    of Vite • What am not I speaking about? • Vite v.s. other bundlers
  3. What is Vite? • Creator: Evan You • Name: pronounced

    `/vit/` • Repo: https://vitejs/vite
  4. What is Vite? • Modern Web front-end dev build tool

    • For development: serve via Native ES Modules • For production: build via rollup
  5. Features • Bare Module Resolving • Hot Module Replacement •

    TypeScript • CSS / JSON Importing • Asset URL Handling • PostCSS • CSS Modules https://github.com/vitejs/vite#features • CSS Pre-processors • JSX • Custom Blocks • Config File • Dev Server Proxy • Production Build • Modes and Environment Variables
  6. Dev server is very slow … • VuePress: actually boot

    up the dev server ... Oh my god, this is terrible DX ...
  7. Interested in ES Module based HMR • Evan wanted to

    run the SFCs with no-bundler • Evan had already that idea last year • But, some major bundlers didn't have it Vue core is ready for ES Modules! But SFC is …
  8. Came up with great an idea If dev server intercepts

    the HTTP Request generated by ES Modules, we might be able to work SFCs without bundler
  9. Unique Points • Lightning fast cold server start • On-demand

    compilation • Instant Hot Module Replacement (HMR)
  10. No-Bundle in Develop • ES Import syntax in your source

    code is served directly to the browser • The browser parses them via native <script module> support, making HTTP requests for each import • The dev server intercepts the requests and performs code transforms if necessary
  11. Compilation • On the fly • Not compile (transform) all

    dependent modules when dev server boot up. • Compile for each HTTP requests
  12. HMR • Decoupled from the total number of modules. •

    Not compile all dependent • Replacement only modules that depends on the page
  13. Network • Reduce of network waterfall costs • Native ES

    imports occur in network waterfalls with deep import chains • Even if it's multiplexed with HTTP/2, page load could be slightly slower than a bundler-based. • Resolve ES Modules dependencies on local • Resolve Bear Module (e.g. import … from ‘vue’ ) • Resolve from ./node_modules
  14. Caching • Caching in dev server • Resolved modules •

    Compiled SFCs and TypeScript • ETag: 304 Response • Caching Control with Service worker
  15. Dev Server Structure WebSocket Client Service Worker WebSocket Server Resolver

    Server Plugin Resolve server Server Plugin Server Plugin Server Plugin Watcher chokidar Config Client (Browser) Server (Node.js) Requests Responses ESBuild HTTP HMR Runtime
  16. Server Plugins WebSocket Server Resolver Module Rewrite Rewritie res.body (Highest

    Priority !!) HTML Rewrite Config Servers … HMR Watcher chokidar Vue CSS Transforms … ESBuild JSON Asset Path Serve Static Module Resolve Proxy Service Worker ESBuild Extendable with server plugins! Extendable with transformers!
  17. Server Plugins WebSocket Server Resolver Module Rewrite Rewritie res.body (Highest

    Priority !!) HTML Rewrite Config Servers … HMR Watcher chokidar Vue CSS Transforms … ESBuild JSON Asset Path Serve Static Module Resolve Proxy Service Worker ESBuild Extendable with server plugins! Extendable with transformers!
  18. Module Rewrite Server Plugin • Plugin for served rewriting JavaScript

    Client Response HTML Rewrite Module Rewrite Server
  19. Module Rewrite Server Plugin • Rewrite path imports to be

    resolved path imports with timestamp Before After Rewrite !!
  20. Module Rewrite Server Plugin • Rewrites files containing HMR code

    to inject `import.meta.hot`. • Track HMR boundary accept allow list in client. Before After Inject !! Track !!
  21. Module Rewrite Server Plugin • Tracks importer / importee relationship

    graph during the rewrite App.vue a.js b.js c.ts main.js App.vue? type=template App.vue? type=style&index= 0 index.css vue.js { } CSS
  22. Vue Server Plugin • Plugin for served SFC compilation Module

    Rewrite Vue Server /src/components/Foo.vue?t=xxx Request compilation
  23. Vue Server Plugin • After compiling, generates JS codes template

    and style with ES import syntax, • And, set to `res.body` style block template block
  24. Vue Server Plugin • Pull compilation result from caches •

    And, set these to `res.body` Vue Server Client /src/components/Foo.vue ?type=style Request /src/components/Foo.vue ?type=template style block template block
  25. • Plugin for served hot module replacement HMR Server Plugin

    Client Server WebSocket Client HMR WebSocket Server HMR Watcher handleJSReload Send handleVueReload FS Watcher Update Module HMR Runtime Message Listener Update Style CreateHotContext
  26. HMR Server Plugin • e.g. HMR with JS updating Client

    Server 2. detect 1. change! a.js WebSocket Client `js-update` message 7.recieve a.js Module Rewrite HMR 9. request Module Resolve WebSocket Server HMR Watcher 10. downloaded ! HMR Runtime handleJSReload Send 4. analysis HRM graph 5. call 6.send 3. call FS Watcher Update Module 8. call Message Listener
  27. HMR Server Plugin • Analysis HMR graph App.vue a.js b.js

    c.ts main.js App.vue? type=template App.vue? type=style&index= 0 index.css vue.js Search HMR boundary! changed!
  28. HMR Server Plugin • self-accept module App.vue a.js b.js c.ts

    main.js App.vue? type=template App.vue? type=style&index= 0 index.css vue.js import.meta.hot.accept changed! found!
  29. • accept deps module HMR Server Plugin App.vue foo.js bar.js

    main.js App.vue? type=template App.vue? type=style&index= 0 index.css vue.js import.meta.hot.acceptDeps a.js found! found! changed! changed!
  30. HMR Server Plugin • SFC is automatically HMR, out of

    the box! App.vue a.js b.js c.ts main.js App.vue? type=template App.vue? type=style&index= 0 index.css vue.js found! changed!
  31. HMR Server Plugin • If HMR boundary doesn’t find, page

    reload with `index.html` requesting! App.vue a.js b.js c.ts main.js App.vue? type=template App.vue? type=style&index= 0 foo.js vue.js index.html changed! not found… reload!
  32. HMR Server Plugin • ⚠ Notes • HMR doesn’t actually

    swap the originally imported module • Importers up the chain from the accepting module will not be notified of the change
  33. Build with rollup • You can use existing rollup plugins!

    e.g. using build API for example Almost the same !
  34. 1.0 roadmap? • More Testing in Read world! • Especially

    with modules that have a lot of dependencies • e.g. monaco editor, rxjs, loadash, and etc • Improve error messages • Maybe, VitePress can be released ? • Plan to offer templates to other Frameworks (e.g. React, Preact, and more?)
  35. • Vite has some unique points • Lightning fast cold

    server start • On-demand compilation • Instant Hot Module Replacement Closing
  36. • Vite dev server • Pluggable architecture • No-bundle boot

    up • Intercept HTTP request and rewrite • On the fly compilation • HMR algorithm is simple, and fast Closing
  37. • vitejs/vite • https://github.com/vitejs/vite • full stack radio podcast •

    140: Evan You - Reimagining the Modern Dev Server with Vite https://www.fullstackradio.com/episodes/140 References