Native-ESM powered web dev build tool

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Who am I ?

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Agenda

Slide 5

Slide 5 text

Agenda • ☺ What am I speaking about? • Inside of Vite • What am not I speaking about? • Vite v.s. other bundlers

Slide 6

Slide 6 text

⚠ NOTES ⚠

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

What is Vite?

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Features

Slide 12

Slide 12 text

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 • Conﬁg File • Dev Server Proxy • Production Build • Modes and Environment Variables

Slide 13

Slide 13 text

Backgrounds

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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 …

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Made PoC all night, as result…

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Vite was born !

Slide 22

Slide 22 text

Unique Points

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

What different from other bundlers?

Slide 25

Slide 25 text

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 requests for each import • The dev server intercepts the requests and performs code transforms if necessary

Slide 26

Slide 26 text

Why is Vite Dev Server so fast?

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Let’s dive into Vite!

Slide 34

Slide 34 text

Inside of Vite

Slide 35

Slide 35 text

Dev Server

Slide 36

Slide 36 text

Dev Server Structure WebSocket Client Service Worker WebSocket Server Resolver Server Plugin Resolve server Server Plugin Server Plugin Server Plugin Watcher chokidar Conﬁg Client (Browser) Server (Node.js) Requests Responses ESBuild HTTP HMR Runtime

Slide 37

Slide 37 text

Server Plugins WebSocket Server Resolver Module Rewrite Rewritie res.body (Highest Priority !!) HTML Rewrite Conﬁg 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!

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Module Rewrite Server Plugin

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Module Rewrite Server Plugin • Rewrites ﬁles containing HMR code to inject `import.meta.hot`. • Track HMR boundary accept allow list in client. Before After Inject !! Track !!

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

HTML Rewrite Server Plugin

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

Vue Server Plugin

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

HRM Server Plugin

Slide 52

Slide 52 text

• 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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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!

Slide 55

Slide 55 text

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!

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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!

Slide 58

Slide 58 text

HMR Server Plugin • If HMR boundary doesn’t ﬁnd, 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!

Slide 59

Slide 59 text

HMR Server Plugin • ⚠ Notes • HMR doesn’t actually swap the originally imported module • Importers up the chain from the accepting module will not be notiﬁed of the change

Slide 60

Slide 60 text

Building

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

Future of Vite

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

Closing

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

• Vite dev server • Pluggable architecture • No-bundle boot up • Intercept HTTP request and rewrite • On the ﬂy compilation • HMR algorithm is simple, and fast Closing

Slide 67

Slide 67 text

References

Slide 68

Slide 68 text

• 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

Slide 69

Slide 69 text

Thank you!