Date: 2024-04-24 Status: Accepted
We currently use the Vue CLI Service (which uses Webpack under the hood) for our client code dev server and production bundling. However, we're running up against limitations in this setup:
- Vue CLI is in maintenance mode
- A Vue 3 migration will likely go a bit smoother if we've first
migrated to Vite
- Vite is the recommended Vue 3 build setup unless you need specific webpack-only features
- A number of developer experience features are more difficult to achieve in our current setup
- Vite's dev server has much faster cold starts and updates
- Instant hot module replacement enables new dev workflows, like side-by-side code and browser windows (HMR can also be enabled in Webpack, but with a plugin and additional configuration)
- Vite supports TypeScript (which we have proposed adopting) out of the box, where a Webpack-based setup would take a bit more configuration
- Vite's popularity is growing and developer satisfaction is excellent compared to webpack
- Status quo: Remain on Vue CLI
- Migrate to Vite
- Migrate to another build tool (Webpack sans Vue CLI, WMR, @web/dev-server, snowpack, etc.)
- These are not compelling options, so are not fully explored here
Chosen option: Migrate to Vite.
The migration effort is manageable, and the benefits of a well-maintained tool and improved dev experience make the switch worthwhile.
- Vite is well-maintained (vs. Vue CLI in maintenance mode)
- Developer experience is improved
- Vue 3 and TypeScript migrations are eased
- Moderate migration effort (estimated ~1 week of part-time volunteer eng)
- Introduction of issues (any infra migration has the potential to introduce bugs)
A proof of concept PR whose description lays out more of the step-by-step migration path is available for review.
Background reading and comparisons