Skip to content
Search

Vite

lastmod 2026-03-05created 2021-04-3023 edits

Next generation frontend tooling. It's fast!

Vite (French for "fast", pronounced /vit/) is a new kind of frontend build tool that significantly improves the frontend development experience.

Categories

Vite:Plugins

TypeScript type export:

SVG plugins:

ETC

Features

Pros

  • Uses ESM and the Go-based esbuild, which is 10-100x faster than Webpack/Parcel
  • HMR (Hot Module Reloading) quickly applies & re-renders only the changed modules, making prototyping really fast

Setting Vue's publicPath

See Vite:Config. In short, use the base option. Use vite.config.js, not vue.config.js.

Vite CJS Node API deprecated

The CJS build of the Node API is no longer supported and is scheduled for removal in Vite 6. See the GitHub discussion for details. You should update your files or frameworks to import the ESM build.

In a standard Vite project, check the following:

  • The vite.config.js file uses ESM syntax.
  • Check that the nearest package.json file:
    • has "type": "module", or
    • uses the .mjs or .mts extension (e.g. vite.config.mjs or vite.config.mts).

Troubleshooting

Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension

In short, see #Vite CJS Node API deprecated.

Some chunks are larger than 500 kB after minification 

(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

See also

Favorite site

author Zer0 sitemap