Why does Vite start so fast? Just briefly share your understanding

vite ?

Quote from the official website

Large projects with thousands of modules are quite common. We started hitting performance bottlenecks — tools developed in JavaScript often took a long time (even minutes!). To start the development server, even with HMR, it takes a few seconds for the effect of the file changes to be reflected in the browser

Why fast?

The reason Vite starts faster is that you don’t need to do any compilation at startup.

When you open the page, when your request arrives at the server, compile it. Vite returned more than one request,

For example, app.vue adds a query argument, type template, and the code returned by the server retains the ES Import syntax.

Now when a browser references a JavaScript file with a tag like script type import equal Module, it’s done for ES Module, so the browser sees it and then goes to the server and asks for those import files, The advantage of this is that I compile as many references as the current page.

This is especially advantageous in large projects, where there may be dozens of routes, and each route may only use the current 10 or so components. When the page is large, it may need to compile 100 components to get the current route page running.

What was it like when it was released?

A pre-configured rollup is used at the time of release, and lazy subloading is done with native ES imports, and dynamic imports can be polyfilled

How to support older browsers?

The first thing you need to do to support older browsers is polyfilled dynamic import,

Second, you need to run your bag through Babel again.

Third, WebPack is positioned as a pure packaging tool, although it is plug-in based but requires a lot of configuration. Vite positioning is out of the box. ES Builds written in Go support JSX TSX typescript

And it supports React perfectly

Almost long so much, more or go to see the official Internet bar! If you like it, I hope you can give it a thumbs up