Migrate from Webpack to Vite?
Aside from it being the recommended build toolchain at the framework level for Vue 3, there is some legitimate reasons to use Vite over Webpack:
- It improves the development server startup time by:
- using esbuild to pre-bundle dependencies
- using native ESM to serve source code and perform hot module replacements
- Despite using Rollup instead of esbuild to bundle for production (for now), it has some good bundle optimizations such as code splitting and async chunk loading optimization
I tried using the webpack-to-vite tool from OriginJS. And it didn't go as smoothly as expected. And I encountered a strange error with src/i18n/messages.js not being able to import langCodeToJsonName with an error starting with SyntaxError: ambiguous indirect export:.
There's some documentation out there I've found. But unfortunately, there's no tutorials on how to migrate from Webpack to Vite that I could understand. And Vue School only has an article on migrating from Vue CLI to Vite. Because I think our case is so complex, we may need to look deeper and think about how to approach this properly if we are to do this.
Edit: From my research, the Vue CLI service is built on top of Webpack (the current version of it uses Webpack 5.54.0). Maybe I could try first migrating it to Vue CLI and then to Vite? I'll give this some thought. I honestly think we need to wait until after the 2.5 release to start looking into this further.
Sources: