Has Vite Made Vue CLI Obsolete?
Anthony Gore | December 7th, 2020 | 3 min read
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.
Table of contents:
Vue CLI overview
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:
- Project scaffolding
- Dev server with hot-module reloading
- Plugin system
- User interface
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.
How is Vite so fast?
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?
Webpack dev server architecture
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.
Vite dev server architecture
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.
Vue CLI vs Vite summarized
|Vue CLI pros||Vue CLI cons|
|Battle-tested and reliable||Dev server speed inversely proportional to number of dependencies|
|Compatible with Vue 2|
|Can bundle any kind of dependency|
|Can build for different targets|
|Vite pros||Vite cons|
|10-100x faster dev server than Webpack||Can only target modern browsers (ES2015+)|
|Makes code-splitting a priority||Not fully compatible with CommonJS modules|
|In beta and only supports Vue 3|
|Minimal scaffold doesn't include Vuex, router, etc.|
|Different dev server vs build tool|
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.
The future of Vite
While the above comparison focused mainly on Vite and Vue CLI as they are now there are a few points to consider moving forward:
- Vite is still in beta - features may change.
- It's possible that Vue CLI will incorporate Vite eventually so that you won't have to use one or the other.
About Anthony Gore
If you enjoyed this article, show your support by buying me a coffee. You might also enjoy taking one of my online courses!