As a software developer with a focus on frontend development, I often felt frustrated by the runtime of unbundling the packages and initializing React.js using npx create-react-app
The time it took to run through on my machine for me was way too much for me and in the search for a better way to do it, I came across Vite.
What is Vite
Vite (the French word for "quick", pronounced /vit/, like "veet") is a build tool that aims to provide a faster and leaner development experience for modern web projects. It was created by Evan You, the creator of the popular JavaScript framework Vue.js. It is used by over a million repositories on GitHub with support for Vanilla, Vue.js, React.js, Nuxt.js, Svelte, Electron; frameworks; plugins.
Vite.js is built around the idea of fast development, with a focus on instant feedback and efficient bundling. It uses modern browser capabilities like native ES modules to offer near-instantaneous development feedback, allowing developers to iterate quickly and efficiently.
Vite.js supports various languages such as TypeScript, JavaScript, CSS, HTML, JSON, Markdown, and Vue SFC (Single File Components) out of the box. It also comes with a plugin system that allows developers to extend and customize its functionality to suit their needs.
Vite.js supports a variety of development workflows, including building for production, creating server-rendered applications, and developing static sites. It also integrates seamlessly with popular frameworks such as Vue.js, React, and Angular.
Overall, Vite.js aims to improve the web development experience by providing a fast, modern, and flexible development tool that can help developers create high-quality applications quickly and efficiently.
It consists of two major parts:
A dev server that provides rich feature enhancements over native ES modules, for example extremely fast Hot Module Replacement (HMR).
A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.
Initializing Vite from the terminal can be done in the following ways:
npm create vite@latest
yarn create vite
pnpm create vite
Combining Vite with Scaffolding abstracts the process of integrating templates and additional dependencies and ensures we can head down directly to our main concern which is building whatever awesome idea you've got in your head.
Why Vite
As we build more and more ambitious applications, the amount of JavaScript we are dealing with is also increasing dramatically. It is not uncommon for large-scale projects to contain thousands of modules. We are starting to hit a performance bottleneck for JavaScript-based tooling: it can often take an unreasonably long wait (sometimes up to minutes!) to spin up a dev server, and even with Hot Module Replacement (HMR), file edits can take a couple of seconds to be reflected in the browser. The slow feedback loop can greatly affect developers' productivity and happiness.
Vite addresses these issues by leveraging new advancements in the ecosystem: the availability of native ES modules in the browser, and the rise of JavaScript tools written in compile-to-native languages. Vite serves source code over native ESM. This is essentially letting the browser take over part of the job of a bundler: Vite only needs to transform and serve source code on demand, as the browser requests it. The code behind conditional dynamic imports is only processed if it is actually used on the current screen.
These illustrations show how Vite reduces runtime by fetching requisite packages first and then dynamically fetching modules as needed.
When you run Vite, it starts a development server that watches your code and rebuilds your project on the fly whenever you make changes. This allows you to see the changes you make in real-time without having to manually rebuild your project each time.
Vite also supports hot module replacement (HMR), which allows you to update your application's state and UI without having to refresh the browser. This greatly speeds up the development process and makes it easier to see the effects of your changes.
Another key feature of Vite is its ability to leverage modern bundling techniques to improve build performance. Rather than relying on a traditional bundler like Webpack, Vite uses Rollup.js to build your project. Rollup.js is optimized for tree shaking, which means it only includes the code that is actually being used in your project, resulting in smaller and faster builds.
Vite also has built-in support for a number of popular front-end frameworks and tools, including React, Vue.js, and TypeScript, as well as CSS pre-processors like Sass and Less.
Overall, Vite's combination of fast builds, hot module replacement, and modern bundling techniques makes it a powerful and efficient tool for web developers looking to improve their development workflow.
Vite Templates
Vite allows you to kickstart a project with all dependencies installed via terminal commands. For example, initializing a Vue.js app can be done with the commands below.
# npm 6.x
npm create vite@latest my-vue-app --template vue
# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue
# yarn
yarn create vite my-vue-app --template vue
# pnpm
pnpm create vite my-vue-app --template vue
I used React with Tailwind and Typescript integrated, it can be initialized with the following command:
npm init vite@latest my-react-app
This will create a new project called my-react-app with self-explanatory prompts enabling you to make your selection of libraries, frameworks and languages to be included in your build.
Once you've created your project, you can start the development server by running the following command:
cd my-react-app
npm install
npm run dev
Awesome Vite.js, a GitHub repository that is a curated list of Vite templates, plugins, presets and integrations that further helps with abstraction for the different technologies you may use.
Deploying
When it is time to deploy your app for production, simply run the npm run build command. By default, it uses <root>/index.html as the build entry point, and produces an application bundle that is suitable to be served over a static hosting service.
npm run build
The production bundle assumes support for modern JavaScript. By default, Vite targets browsers which support the native ES Modules, native ESM dynamic import, and import.meta:
Chrome >=87
Firefox >=78
Safari >=14
Edge >=88
Drawbacks/Comparisons
WMR by the Preact team provides a similar feature set, and Vite 2.0's support for Rollup's plugin interface is inspired by it.
WMR is mainly designed for Preact projects and offers more integrated features such as pre-rendering. In terms of scope, it's closer to a Preact meta-framework, with the same emphasis on compact size as Preact itself. If you are using Preact, WMR is likely going to offer a more fine-tuned experience.
@web/dev-server (previously es-dev-server) is a great project and Vite 1.0's Koa-based server setup was inspired by it.
@web/dev-server is a bit lower-level in terms of scope. It does not provide official framework integrations and requires manually setting up a Rollup configuration for the production build.
Overall, Vite is a more opinionated / higher-level tool that aims to provide a more out-of-the-box workflow. That said, the @web umbrella project contains many other excellent tools that may benefit Vite users as well.
While Vite.js offers many benefits for web developers, there are also some drawbacks to consider:
Reliance on modern browser capabilities: Vite.js relies heavily on modern browser features like ES modules and dynamic imports. This means that it may not be compatible with older browsers, which could limit the reach of your application.
Plugin ecosystem: While Vite.js does offer a plugin system that allows developers to extend and customize its functionality, the plugin ecosystem is not as mature as some other tools like Webpack or Rollup. This means that you may need to invest more time in creating custom plugins if you have specific requirements that are not already supported.
Limited community support: Vite.js is a relatively new tool, and while it has gained popularity in the developer community, it may not have as large of a user base as other more established tools. This can make it harder to find help or resources when you encounter issues or have questions.
Conclusion
As a front-end developer myself, I know how frustrating and time-consuming the build process can be. But discovering Vite was a game-changer. It's so refreshing to have a tool that is not only powerful and efficient but also easy to use and intuitive. With Vite, I can quickly start up my development server, and the hot module replacement feature means I don't have to wait for the entire project to rebuild every time I make a change. I can confidently say that Vite has made my development workflow smoother and more enjoyable, and I highly recommend it to any front-end developer looking to optimize their process.