Has Vite Made Vue CLI Obsolete?
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.
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.
Vite overview
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
The way Webpack works is that it builds the entire application into a JavaScript-based bundle by resolving every import and 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
Vite does not bundle the app server side. Instead, it relies on the browser’s native support for JavaScript modules (aka ES modules and is a relatively new feature).
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.
Vite downsides
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.
Since Vite uses JavaScript modules it’s preferable that dependencies use JavaScript modules as well. While most modern JS packages provide this, some older packages may only provide CommonJS modules.
Vite can transform CommonJS into JavaSript modules but there are some edge cases where it may be unable to. And, of course, it requires browsers that support JavaScript modules.
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
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 will only improve as JavaScript module support improves in browsers.
- As the JS ecosystem catches up, more packages will support JavaScript modules reducing edge cases that Vite can’t handle.
- 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.
It’s also worth noting that Vite is not the only dev server project to exploit JavaScript modules in the browser. There is also the better-known Snowpack which may even crowd out Vite moving forward. Time will tell!
Suggest:
☞ 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