Detailed explanation of Vite's new experience

What is Vite? (It’s a new toy on the front end)

Vite is a web development and construction tool that updates code during the development process through native ES module imports to achieve the purpose of rapid updates.

Features

• Ultra-fast cold server boots
• Instant module updates
• True on-demand compilation
• Smaller packaging size

Get Started

Note for Vue users: Vite currently only works with Vue 3.x. This also means that you cannot use libraries that are not yet compatible with Vue 3.

Install

npm init vite-app <project name> 
cd <project name> 
npm install 
npm run dev
## After executing the above commands, it means that your vue3.0 project has used vite

What is the difference between vite and webpack in terms of experience?

My current feeling about Vite can be summed up in one word: fast.

• When starting the debugging service for the first time, it is twice as fast as webpack.
• The packing speed is also more than twice as fast.
• The size of the packaged file is less than half of the original webpack file.

How does Vite work?

In the author's words, it is to directly request the .vue file and let the browser parse it

The latest version of the browser supports the direct use of import and export keywords, which means that the browser begins to natively support module functions, which is also one of the features used by Vite.

"After saying so much, why not grab a bag and see?"

sure! Here I only modified the HelloWorld.vue file

Then I modified the App.vue file again (don’t mind the timestamp is different, I just accidentally deleted it and was too lazy to start over)

At this point, compared to Webpack's Code Splitting method of implementing on-demand loading, Vite has indeed given me a much faster experience

at last

Although Vite is very cool, the current RC 1 version is only suitable for Vue3.x and cannot use libraries that are incompatible with Vue3. (It is definitely faster than webpack in all aspects)

This is the end of this article about Vite's new experience. For more information about Vite's new experience, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!