There’s a new build tool in the Vue ecosystem called Vite. Its dev server is 10–100x faster than Vue CLI’s.
Does this mean Vue CLI is obsolete? In this article, I’ll be comparing the two build tools and addressing the pros and cons so you can decide which one is right for your next project.
Note: this article was originally posted here on the Vue.js Developers blog on 2020/12/07.
As most Vue devs will know, Vue CLI is an indispensable tool for quickly setting up a Vue-based project with the standard build tools and best-practice configuration.
Its main features include:
It’s important for this discussion to note that Vue CLI is built on top of Webpack, so both the dev server and build functionality and performance will be a superset of Webpack.
Similar to Vue CLI, Vite is also a build tool providing basic project scaffolding and a dev server.
However, Vite is not based on Webpack and has its own dev server which utilizes native ES modules in the browser. This architecture allows is to be orders of magnitude faster than Webpack’s dev server. Vite employs Rollup for the build, which is faster as well.
Vite is currently in beta and it appears that the aim of the Vite project is not to be an all-in-one tool like Vue CLI, but to focus on providing a fast dev server and basic build tool.
The Vite dev server will be, at a minimum, around 10 times faster than Webpack. For a basic project, this would be a difference of 250ms for a dev build/re-build compared to 2.5sec (source).
In a larger project, the difference becomes even more impressive. The Webpack dev server may slow down to 25–30sec for a build/re-build, or sometimes even more. The Vite dev server, meanwhile, may be able to serve the same project at a constant 250ms speed.
This is obviously a game-changing difference in development experience. How is Vite able to do this?
require in the app and transforming files as it goes (e.g. Sass, TypeScript, SFC).
This is all done server-side and there’s a roughly linear relationship between the number of dependencies and the time it takes to build/re-build after a change.
The browser will request any JS module as it needs it via HTTP and process it during runtime. The Vite dev server will transform any files (e.g. Sass, TypeScript, SFC) on-demand.
This architecture provides a significantly faster dev server by avoiding the server-side bundling of the entire app and by leveraging the browser’s efficient module processing.
Tip: Vite is even faster when you code-split and treeshake your application because it only loads modules it needs, even in development. This is unlike Webpack where code-splitting only benefits the production bundle.
I’ve heavily over-simplified this explanation. For a deep-dive into Vite’s architecture and more benchmarks see author Evan You’s talk Vite and VitePress, VueConf Toronto 2020.
You’re probably catching on that the key feature of Vite is its absurdly fast dev server.
Without this feature, there would likely be no further discussion as it really doesn’t offer anything else compared to Vue CLI and indeed has a few drawbacks.
Unlike Webpack/Vue CLI, Vite is unable to create bundles targetting old browsers, web components, and so on.
And, unlike Vue CLI, the dev server and build tool are different systems leading to the potential of inconsistent behavior in production vs development.
So what’s the verdict?
For experienced Vue devs Vite is a great option as the absurdly fast dev server makes Webpack look prehistoric.
But for new Vue devs who prefer some hand-holding, or, for large projects using legacy modules and requiring complex builds it’s likely that Vue CLI will remain essential for the time being.
While the above comparison focused mainly on Vite and Vue CLI as they are now there are a few points to consider moving forward:
☞ Vue js Tutorial Zero to Hero || Brief Overview about Vue.js || Learn VueJS 2023 || JS Framework
☞ Learn Vue.js from scratch 2018
☞ Is Vue.js 3.0 Breaking Vue? Vue 3.0 Preview!
☞ Vue.js Tutorial: Zero to Sixty
☞ Learn Vue.js from Scratch - Full Course for Beginners