Vite / Yeet / Wheet? Viteamin [sic.]
Vite, pronounced /vit/, like "veet".Vite is a French term that means rapidly or quickly. Evan Yu, the inventor of Vue.js, designed vite. The next generation of front-end tools is vite, which offers immediate server start and lightning-fast hot module replacement. It also provides optimized builds with full feature support utilizing rollup universal plugin APIs that are entirely typed. The server-side rendering is yet experimental.
Main Purpose
Front-end web apps are at the heart of vite, a javascript development tool that simplifies the way we build and develop them. It provides two functions.
- The first is to serve your code when developing locally.
- Bundle your javascript, CSS, and other assets for production.
Templates Offered
No, this is not a view-only tool. It offers templates (starting files) for a variety of frameworks and vanilla JavaScript, as well as TypeScript, JSX, and Sass support (although you need to install one dependency for Sass).
We get to pick a project name and a template after executing-
npm init @vitejs/app
At the time of writing, the templates offered were are as follows:
vanillavuevue-tsreactreact-tspreactpreact-tslit-elementlit-element-tssveltesvelte-ts
Wait! Why CRA is slow?
When it comes to building a React app, many developers of different skill levels have long relied on Create React App (CRA). I was also using CRA for a long time. However, I noticed it has some substantial shortcomings in terms of speed and performance. CRA can be a little sluggish when starting a project. Things get even sour while building a development server which ends up taking about 5-10 minutes.
The reason for the slow behavior is that CRA bundles the code with Webpack. Because Webpack bundles the entire code, if your codebase is more than 10k lines long, you may notice a slower start on the dev environment and a significant wait time to view the changes made. Even with Hot reloading enabled in some frameworks, update speed suffers significantly when more code and dependencies are added to the program.
What magic does Vite do?
Vite has chosen a different approach to this, almost in reverse. Vite launches the server immediately and uses esbuild to pre-bundle dependencies that don't change frequently. This makes vite 10 times or at times 100 times faster. This is because it helps improve page speed and convert CommonJS / UMD modules to ESM.
The application modules are divided into 2 parts -
-
Dependencies
The majority of dependencies are ordinary JavaScript that does not change much throughout development. Some huge dependencies (for example, AntD) are likewise rather costly to handle.
-
Source Code
Source code frequently contains non-plain JavaScript that must be transformed (e.g., JSX, CSS, or other components) and will be modified frequently. Furthermore, not all source code must be loaded at the same time (e.g. with route-based code-splitting).
Bien joué Vite - Performance CRA vs Vite!
Create-React-App used 243 mb of disk space while vite just used 34 mb
Developer’s Opinion
Throughout my development journey, I've used build tools to set up hundreds of projects. Big and sophisticated projects took me a day or two to set up and ensure all tools and plugins worked together, regardless of whether I used Grunt, Gulp, Rollup, or webpack.
Later on, I'd devote additional attention to the tools in order to solve issues, increase bundle optimization, and shorten build times. Vite is a breeze in comparison. Vite eliminates the need to connect two dozen tools and plugins. You might even be able to skip setup and get right to work with some excellent defaults.
Vite's internals may be configured, allowing us to override the setup of Rollup and numerous Rollup plugins. This is fantastic if we have special requirements.
Conclusion
Vite effectively relieves us of that task, and Vite has a community at its disposal to investigate concerns. This implies we may put our confidence in our tools. Vite effectively relieves us of that task, and Vite has a community at its disposal to investigate concerns. This implies we may put our confidence in our tools.
Thank you for taking the time to read my post. I hope you enjoyed it. That’s all I wanted to share with you. Have a great day!
Top comments (0)