Hurray! Vite 5.0 is Here!

Since 2020, web developers have been using something different. Any guesses? Well, they are using Vite. Why not? It can create fast and optimized websites. But believe it or not, in every technology, there are some downsides. To address those, Vite creators have been releasing different versions of Vite. Recently, on November 16, 2023, Vite 5.0 was released. The good news? It comes with features that clean up the API. Many problems that persisted for a long time in previous versions are now gone. For example, define now uses regexes instead of AST replacements. As far as support for Node.js is concerned, Vite 5.0 only supports Node.js 18/20+.

What's even better? In the virtual home of software developers, DEV has created a guide page.

Furthermore, in Vite 5.0 there's server.warmup function that speeds up the startup time. How come? Well, a bunch of modules will start pre-transforming when the server is turned on. There will be an automatic warm-up of the entry point of the app and URL.

Apart from this, some major changes in Vite 5 include the following:

1. Rollup 4 is now used in Vite 5. This means if you are using TypeScript, set moduleResolution: 'bundler' - because of Rollup 4's requirement - or skipLibCheck: true.

2. You can't use Acorn plugins as they are no longer supported in Vite 5. CommonJS (CJS) Node API is deprecated. ESM in Vite will be used. So, if you want to use it, update your files.

3. Even though Vite 4.0 had many great features, there were problems like inconsistency when trying to access variables. To prevent such problems, in Vite 5.0, esbuild is used. Using this, replacements in the build will be managed. The good news? This won't have any impact on setups because defines values.

4. Previously in Vite 4, there were sometimes inconsistencies that remained undetectable due to unmatching production behavior because of .default and .__esModule. In Vite 5, both .default and .__esModule are removed to match production behavior. Moreover, worker.plugins is now considered a function that also gives an array of plugins in the output.

5. Contrary to Vite 4, in Vite 5, . will fall back to index.html. You will not be shown any 404 error even if you give an image path to a file that doesn't exist.

6. In Vite 4.0, the manifest file that contains file names being used in the project was created in build.outDir root by default. But in Vite 5, build.outDir will create the manifest file by default in the .vite directory.

7. Pressing Enter is now important. If you want to restart the dev server, use Enter as well. The benefit? No swallowing and controlling OS-specific shortcuts and hence best compatibility.

8. Instead of esbuild 0.18, esbuild 0.19 is used. Further,  - https flag and https: true are removed. APIs like resolvePackageEntry and resolvePackageData are also removed. Contrary to this, import.meta.globEager, ssr.format: 'cjs', server.middlewareMode: 'ssr', server.middlewareMode: 'html', legacy.buildSsrCjsExternalHeuristics, import style from './foo.css' are deprecated.

All in all, Vite has now become even better than its previous version. So, web developers, are you ready to get your hands on it?