Native-ESM powered web dev build tool

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