Before ES (EcmaScript) modules were available in browsers, a concept called “Bundling” which was used by tools like webpack became popular, which processes and concatenates the source modules into files which then run in the browser. Another popular Vue dev server, Vue CLI is built on top of webpack.
But with the understanding of ES modules, came up with an experimental tool, Vite (pronounced /vit/). It is a web development build tool that can support Vue, React, and Preact. Unlike Vue CLI, it is a no-bundling tool that has its own dev server which is 10–100x faster and uses the browser’s native ES modules.
Vite uses Rollup for its production build. As Rollup is a better and more efficient builder than webpack, Vite offers a smaller artifact size and a quick build.
The HTML page can add any module by using a <script> tag with an attribute type=”module”.
The module import is like a defer script that loads and the browser will get all the required JS modules via HTTP requests and process them during runtime after which the dev server will transform the files (e.g. TypeScript, Sass) on-demand which avoids server-side bundling of your entire project.
Example Code:
<script type=”module” src=”index.js”></script>One of its key features is the fast speed that it provides. Regardless of your project size, the build time stays constant which is very impressive when compared to Vue CLI. As the app size gets bigger, the speed difference is considerable and more noticeable.
Some other features include On-demand compilation and Instant hot module replacement (HMR) which means that it can exchange modules while it’s running, saving you the need for a full-page reload. It has Esbuild powered typescript / jsx (super quick) and supports the import for.ts files but it does not work on type checking. It uses esbuild (Javascript bundler and minifier) to compile Typescript into Javascript that is much faster than vanilla tsc.
It also supports PostCSS, CSS Modules, and CSS Pre-processors. Vite supports .sass, .scss, .styl, .stylus and .less. The pre-processor must be installed instead of the specific Vite plugins.
# .scss and .sass
npm install -D sass# .styl and .stylus
npm install -D stylus# .less
npm install -D less
Now let’s talk about some cons:
- Vite fails to create bundles when it comes to old browsers which do not support ES modules.
- The build tool and the dev server are different which can cause inconsistent behavior in production vs development.
- Vite only supports Vue 3 with no backward compatibility and is still in the Beta phase.
- In production build, Vite will only support ES Modules, which means that you should not have any dependencies without ES Module exports.
Conclusion
Vite is a potential build tool for the future. New features can be introduced or current ones can change as it’s still in the experimental stage. Also, when more updates and boosts are given to the browser’s ES module functionality, it’ll have a direct impact on Vite’s performance as well. With few enhancements, it can be thought of as a very powerful tool that saves considerable time for the developers.
