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 Slide

  2. Who am I ?

    View Slide

  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

    View Slide

  4. Agenda

    View Slide

  5. Agenda

    ☺ What am I speaking about?
    • Inside of Vite

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

    View Slide

  6. ⚠ NOTES ⚠

    View Slide

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

    View Slide

  8. What is Vite?

    View Slide

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

    View Slide

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

    View Slide

  11. Features

    View Slide

  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

    View Slide

  13. Backgrounds

    View Slide

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

    View Slide

  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 …

    View Slide

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

    View Slide

  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

    View Slide

  18. Made PoC
    all night,
    as result…

    View Slide

  19. View Slide

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

    View Slide

  21. Vite was born !

    View Slide

  22. Unique Points

    View Slide

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

    View Slide

  24. What different
    from other
    bundlers?

    View Slide

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

  26. Why is
    Vite Dev Server
    so fast?

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  33. Let’s
    dive into Vite!

    View Slide

  34. Inside of Vite

    View Slide

  35. Dev Server

    View Slide

  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

    View Slide

  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!

    View Slide

  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!

    View Slide

  39. Module Rewrite
    Server Plugin

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  45. HTML Rewrite
    Server Plugin

    View Slide

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

    View Slide

  47. Vue
    Server Plugin

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  51. HRM
    Server Plugin

    View Slide

  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

    View Slide

  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

    View Slide

  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!

    View Slide

  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!

    View Slide

  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!

    View Slide

  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!

    View Slide

  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!

    View Slide

  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

    View Slide

  60. Building

    View Slide

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

    View Slide

  62. Future of Vite

    View Slide

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

    View Slide

  64. Closing

    View Slide

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

    View Slide

  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

    View Slide

  67. References

    View Slide

  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

    View Slide

  69. Thank you!

    View Slide