Native-ESM powered web dev build tool

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