Since Redwood v4.1, Vite has been an experimental option for the Web bundler (replacing Webpack). See this post for more info.
Our next initiative is to make Vite the default bundler in an upcoming major version. We are working on a plan and will communicate how we intend to make the transition.
Current draft of rollout plan:
switch to Vite as default Web bunder in next major
still support Webpack as an option (will give deprecation warning for Webpack)
we will continue supporting Webpack for an undefined number of major versions (TBD)
will then remove Webpack as an option in a following major to be determined
You can follow along with progress over here:
Feedback Wanted
Although out intention is to keep as much config âunder the hoodâ, we know some projects require extending Webpack config. This upgrade could be a source of pain, learning yet-another-javascript-thing that feel like itâs in the way of shipping features.
This is our least favorite thing about this ecosystem.
Please help us understand your circumstances, your needs, and your concerns. The more we know ahead of time, the more we can make this a good transition, together.
And if youâre particularly excited about this, weâd like to know that, too!
Why Vite?
@danny has been lead on this initiative, so Iâll let him answer this question in full.
As someone who doesnât want to care about the tools under the hood (meaning that theyâre not in the way), in this case I care deeply about Redwoodâs next Epoch and the technology we need to reach it. And Vite is going to play a foundational role toward that end.
And thatâs something I hope you can get excited about, regardless of bundler
Iâve switched to the experimental Vite option for about 2 months now and have been very happy with the switch. Its responsiveness definitely makes the development experience much better. There were a couple of issues that I ran into which I wonder if could be resolved somehow. I donât believe these are blockers for using Vite as our default bundlers. Theyâre something that would make DX better.
One is this ⌠on rare occasions, itâs useful and convenient to make direct changes into the code of a node_modules package (like adding console.log or trying out a simple bug fix idea). Of course this must be done with care and undone asap. I believe this scenario just works intuitively with Webpack due to rebundling. Vite seems to have a caching layer that ignores changes under node_modules. Even restarting the dev server did not work. This may be an aspect of Vite that is not avoidable from the Redwood side. Iâm bringing it up here in case it may spark an idea.
The second is the hope that plugin configuration could be made easier (plugins for vite, esbuild, rollup). Again, I donât know enough to know if itâs possible, but it would be amazing to make plugin configuration (almost) as simple as configuring them directly for vite/esbuild/rollup, i.e., without necessarily having to understand how Redwood uses those tools.
Most plugins provide instructions that donât take into account the relationship with frameworks like Redwood, e.g. webpack plugins typically only provide instruction to setup with webpack.config.js. My experience so far has been that it would take an additional round of google searches, readings, and wrapper writing set things up properly.
Perhaps it could be done by making vite/rollup/esbuild config files available at the root of Redwood projects and import Redwood specific settings from there? That way, direct configuration is possible at the projectâs discretion.
Thanks for the feedback @tvo, sorry didnât spot this earlier.
on rare occasions, itâs useful and convenient to make direct changes into the code of a node_modules package
Understandable, and the best way to deal with this would be one of 3 ways:
a) Restart your dev server with yarn rw dev --fwd="--force true" this will cause a forced reoptimisation of your dependencies from node_module.
b) Alternatively, and I think easier, is if you type in rs (then press enter) while the dev server is running, it will restart both web and api, and force a reoptimisation of your node_modules.
^^ admittedly this isnât documented (because Vite was alpha) - Iâm really not sure where in the docs this should go
the hope that plugin configuration could be made easier (plugins for vite, esbuild, rollup).
The vite.config.js/ts file sits in your web folder, and gives you full control to customise your Vite setup however you wish. This includes, esbuild and rollup settings as well - and no different from configuring Vite without Redwood - no extra searching!
