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. Vite

    Native-ESM powered
    web dev build tool
    Remote.vue
    2020.06.12
    @kazupon

    View full-size slide

  2. PLAID, inc.
    Vue.js Core Team Member
    Vue.js Japan User Group Organizer
    Creator of Vue I18n & Intlify
    WebAssembly Love ❤
    @kazu_pon kazupon
    kazupon

    View full-size slide

  3. Agenda

    ☺ What am I speaking about?
    • Inside of Vite

    What am not I speaking about?
    • Vite v.s. other bundlers

    View full-size slide

  4. ⚠ NOTES ⚠

    View full-size slide

  5. Notes
    • Vite is still experimental !
    • Current version: v0.20.8

    View full-size slide

  6. What is Vite?

    View full-size slide

  7. What is Vite?
    • Creator:
    Evan You
    • Name:
    pronounced `/vit/`
    • Repo:
    https://vitejs/vite

    View full-size slide

  8. What is Vite?
    • Modern Web front-end dev build
    tool
    • For development:
    serve via Native ES Modules
    • For production:
    build via rollup

    View full-size slide

  9. 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

    View full-size slide

  10. Dev server is very slow …
    • VuePress:
    actually boot up the dev server ...
    Oh my god, this is terrible DX ...

    View full-size slide

  11. 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 …

    View full-size slide

  12. Bundler based on ES Modules has appeared
    • Snowpack 1.0
    • Not have the dev server …

    View full-size slide

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

    View full-size slide

  14. Made PoC
    all night,
    as result…

    View full-size slide

  15. https://twitter.com/youyuxi/status/1252173663199277058

    View full-size slide

  16. Vite was born !

    View full-size slide

  17. Unique Points

    View full-size slide

  18. Unique Points
    • Lightning fast cold server start
    • On-demand compilation
    • Instant Hot Module Replacement
    (HMR)

    View full-size slide

  19. What different
    from other
    bundlers?

    View full-size slide

  20. No-Bundle in Develop
    • ES Import syntax in your source code is
    served directly to the browser
    • The browser parses them via native
    support, making HTTP<br/>requests for each import<br/>• The dev server intercepts the requests and<br/>performs code transforms if necessary<br/>

    View full-size slide

  21. Why is
    Vite Dev Server
    so fast?

    View full-size slide

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

    View full-size slide

  23. Compilation
    • On the fly
    • Not compile (transform) all dependent
    modules when dev server boot up.
    • Compile for each HTTP requests

    View full-size slide

  24. HMR
    • Decoupled from the total number of
    modules.
    • Not compile all dependent
    • Replacement only modules that depends
    on the page

    View full-size slide

  25. 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

    View full-size slide

  26. Caching
    • Caching in dev server
    • Resolved modules
    • Compiled SFCs and TypeScript
    • ETag: 304 Response
    • Caching Control with Service worker

    View full-size slide

  27. Server
    • Adopt Koa as HTTP server
    • Higher performance than Express.

    View full-size slide

  28. Let’s
    dive into Vite!

    View full-size slide

  29. Inside of Vite

    View full-size slide

  30. 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

    View full-size slide

  31. 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!

    View full-size slide

  32. 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!

    View full-size slide

  33. Module Rewrite
    Server Plugin

    View full-size slide

  34. Module Rewrite Server Plugin
    • Plugin for served rewriting JavaScript
    Client
    Response
    HTML Rewrite
    Module Rewrite
    Server

    View full-size slide

  35. Module Rewrite Server Plugin
    • Rewrite named module imports
    to `/@modules/:id`
    Before After
    Rewrite !!

    View full-size slide

  36. Module Rewrite Server Plugin
    • Rewrite path imports to be resolved path
    imports with timestamp
    Before After
    Rewrite !!

    View full-size slide

  37. 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 !!

    View full-size slide

  38. 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

    View full-size slide

  39. HTML Rewrite
    Server Plugin

    View full-size slide

  40. HTML Rewrite Server Plugin
    • Plugin for served rewriting `index.html`
    Before After
    Inject !!

    View full-size slide

  41. Vue
    Server Plugin

    View full-size slide

  42. Vue Server Plugin
    • Plugin for served SFC compilation
    Module Rewrite
    Vue
    Server
    /src/components/Foo.vue?t=xxx
    Request
    compilation

    View full-size slide

  43. Vue Server Plugin
    • After compiling, generates JS codes
    template and style with ES import syntax,
    • And, set to `res.body`
    style block
    template block

    View full-size slide

  44. 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

    View full-size slide

  45. HRM
    Server Plugin

    View full-size slide

  46. • 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

    View full-size slide

  47. 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

    View full-size slide

  48. 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!

    View full-size slide

  49. 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!

    View full-size slide

  50. • 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!

    View full-size slide

  51. 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!

    View full-size slide

  52. 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!

    View full-size slide

  53. 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

    View full-size slide

  54. Build with rollup
    • You can use existing rollup plugins!
    e.g. using build API for example
    Almost the same !

    View full-size slide

  55. Future of Vite

    View full-size slide

  56. 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?)

    View full-size slide

  57. • Vite has some unique points
    • Lightning fast cold server start
    • On-demand compilation
    • Instant Hot Module Replacement
    Closing

    View full-size slide

  58. • 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

    View full-size slide

  59. • 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

    View full-size slide