Logo
Web Development with Vite: The Fast, Flexible and Cutting-Edge Solution

Web Development with Vite: The Fast, Flexible and Cutting-Edge Solution

In today's world, speed is everything, especially when it comes to web development. While traditional bundle server setups have their advantages, they can also slow down development due to slow update speeds. That's where Vite comes in. Created by Evan You, the brain behind the Vue framework, Vite fully supports React, Svelte, vanilla JS, and other frameworks. Its advantages include hot module replacement, flexible APIs with TypeScript implementation, suitable plugins, library mode, and more

 

Vite Advantages

 

 

  • Hot module replacement

  • Reach features for all popular frameworks and tools

  • Flexible APIs with TypeScript implementation

  • Suitable plugins

  • Library mode

  • Pre-configured rollup build with single-page and multi-page support



 

How does a traditional bundle server setup work?

 

It has its entry points(possible routes) and related modules, and all of them are bundled together. So the development server is ready!... and here comes the problem. 

 

When a file is edited in a bundler-based build setup, it rebuilds/reconstructs the app every time it gets updated.

 

So the larger your app, the slower your update speed.

 


 

How does the Vite work?

 

Vite takes dependencies that do not change often and pre-bundles them using ESbuild. But even though ESM is gaining popularity day by day, for production it would be more efficient to bundle with Rollup to implement other performance optimizations.

 

By the way, Vite has built-in rollup options. You can access it from vite.config.js by build.rollupOptions, so no need to install Rollup separately

 

By using the browser itself Vite also applies HTTP headers to speed up full page reloads: code module requests are made conditional in 304 Not Modified status, and dependency module requests are severely cached via Cache-Control so they do not impact the server again once cached.

 

 

And here comes the Hot Module Replacement(HMR) which allows a module to "hot replace" itself without affecting the rest of the page.

In Vite, HMR is performed over native ESM, so when a file is edited it uses route-based code splitting, and via invalidation of the chain between the edited module and its closest HMR boundary it figures out what parts of the code indeed need to be reloaded.

 

And here is also CSS Hot Updating, which updates the page without reloading it.

It’s not all about CSS, Vite also has automated CSS code splitting, which is going to make the site much faster, so it’s only  going to load CSS code needed for the specific part of the application. 

 

For Typescript lovers Vite allows us to link ts files directly

 

Interesting fact: “vite” is a French word that means “fast”


 

How to implement it

 

Please note: Node required version for Vite is >= 12.2.0

 

npm:


$ npm create vite@latest

The mark “@latest” will create the template from the latest version of Vite.

 

yarn:



$ yarn create vite

After the creation command, the Vite will suggest some template options to specify the project you want to create.

 

 

These are the supported templates by “create-vite”: react, react-ts, vanilla, vanilla-ts, vue, vue-ts, svelte, svelte-ts, preact, preact-ts, lit, lit-ts.


 

Vite configs

 

After running Vite from the command line, Vite will automatically create a vite.config.js file inside your project root.

 


export default {
  // here should be your config options…
}

or you can use the “defineConfig” helper without the need for “jsdoc” annotations which supports vite.config.ts files either.

 


import { defineConfig } from 'vite'

export default defineConfig({
  // here should be your config options…
})

or

 


 const c
  // here should be your config options…
}

export default config

Vite also has an option to explicitly specify a config file using the Vite CLI “--config” option.

 


$ vite --config custom-config.js

You can also conditionally specify options depending on the command or the mode being used, returning the specific config

 


export default defineConfig(({ command, mode }) => {
  if (command === 'dev') {
    return {
      // dev specific config
    }
  } else if (command === 'build') {
    return {
      // build specific config
    }
  } else {
    return {
      // something else
    }
  }
})

 

 

 

A couple of important notes

 

Vite uses ES modules syntax in the config file even if the project is not using native Node ESM.

 

During development, the “command” value is dev/serve, and “build” for production.


 

Vite Future

 

It is important to note that Vite will only refine if the browsers will improve their support for JavaScript modules but the JavaScript ecosystem catches up and more and more packages will support JS modules, reducing cases where Vite can’t handle them. 

 

Also, there is the Snowpack build tool - one of Vite’s competitors and the main difference is that Vite produces smaller bundles and makes it easier for plugins to tweak dev and build at the same time. If Snowpack catches up with this feature, Vite should introduce something new to its users.


 

Conclusion

 

Vite is a fast development server that uses hot module replacement and pre-bundling with ESbuild to allow for faster updates and automated CSS code splitting to improve the speed of the site. It supports multiple frameworks and can be implemented with npm or yarn and has configurable options.