Pro Yearly is on sale from $80 to $50! »

Native-ESM powered web dev build tool

Native-ESM powered web dev build tool

38bee248082f6071230de65e9d74a944?s=128

kazupon

June 12, 2020
Tweet

Transcript

  1. Vite ⚡ Native-ESM powered web dev build tool Remote.vue 2020.06.12

    @kazupon
  2. Who am I ?

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

    Organizer Creator of Vue I18n & Intlify WebAssembly Love ❤ @kazu_pon kazupon kazupon
  4. Agenda

  5. Agenda • ☺ What am I speaking about? • Inside

    of Vite • What am not I speaking about? • Vite v.s. other bundlers
  6. ⚠ NOTES ⚠

  7. Notes • Vite is still experimental ! • Current version:

    v0.20.8
  8. What is Vite?

  9. What is Vite? • Creator: Evan You • Name: pronounced

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

    • For development: serve via Native ES Modules • For production: build via rollup
  11. Features

  12. 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
  13. Backgrounds

  14. Dev server is very slow … • VuePress: actually boot

    up the dev server ... Oh my god, this is terrible DX ...
  15. 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 …
  16. Bundler based on ES Modules has appeared • Snowpack 1.0

    • Not have the dev server …
  17. 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
  18. Made PoC all night, as result…

  19. None
  20. https://twitter.com/youyuxi/status/1252173663199277058

  21. Vite was born !

  22. Unique Points

  23. Unique Points • Lightning fast cold server start • On-demand

    compilation • Instant Hot Module Replacement (HMR)
  24. What different from other bundlers?

  25. 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
  26. Why is Vite Dev Server so fast?

  27. Building • Use esbuild https://github.com/evanw/esbuild

  28. Compilation • On the fly • Not compile (transform) all

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

    Not compile all dependent • Replacement only modules that depends on the page
  30. 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
  31. Caching • Caching in dev server • Resolved modules •

    Compiled SFCs and TypeScript • ETag: 304 Response • Caching Control with Service worker
  32. Server • Adopt Koa as HTTP server • Higher performance

    than Express.
  33. Let’s dive into Vite!

  34. Inside of Vite

  35. Dev Server

  36. 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
  37. 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!
  38. 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!
  39. Module Rewrite Server Plugin

  40. Module Rewrite Server Plugin • Plugin for served rewriting JavaScript

    Client Response HTML Rewrite Module Rewrite Server
  41. Module Rewrite Server Plugin • Rewrite named module imports to

    `/@modules/:id` Before After Rewrite !!
  42. Module Rewrite Server Plugin • Rewrite path imports to be

    resolved path imports with timestamp Before After Rewrite !!
  43. 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 !!
  44. 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
  45. HTML Rewrite Server Plugin

  46. HTML Rewrite Server Plugin • Plugin for served rewriting `index.html`

    Before After Inject !!
  47. Vue Server Plugin

  48. Vue Server Plugin • Plugin for served SFC compilation Module

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

    and style with ES import syntax, • And, set to `res.body` style block template block
  50. 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
  51. HRM Server Plugin

  52. • 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
  53. 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
  54. 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!
  55. 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!
  56. • 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!
  57. 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!
  58. 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!
  59. 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
  60. Building

  61. Build with rollup • You can use existing rollup plugins!

    e.g. using build API for example Almost the same !
  62. Future of Vite

  63. 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?)
  64. Closing

  65. • Vite has some unique points • Lightning fast cold

    server start • On-demand compilation • Instant Hot Module Replacement Closing
  66. • 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
  67. References

  68. • 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
  69. Thank you!