Newly Refactored Vue.js Builder Vite 2.0 Still Focuses on Speed; Is Now Framework-Agnostic

Evan You, the creator of the Vue.js front-end framework, recently released a new major iteration of Vite, a build tool that focuses on build speed and short feedback loops. Vite 2.0 is a complete refactoring of the previous version around a framework-agnostic core. Vite 2.0 features a new plugin format and improved programmatic API that strive to make it easy to build new tools on top of Vite.

You described Vite’s new release as follows:

Vite (French word for “fast”, pronounced /vit/) is a new kind of build tool for front-end web development. Think a pre-configured dev server + bundler combo, but leaner and faster.
[…] Vite 2.0 brings about many big improvements over its previous incarnation.

Vite 2.0 is now framework-agnostic. Frameworks are supported via plugins, a number of which are already available (e.g., for Vue, React, Preact, LitElement). A Svelte plugin is in the works.

Vite requires a version of Node.js that is equal or posterior to 12.0.0. Project scaffolds to quickly get started can be produced via the command line. The following command creates a Vite project that uses the Preact front-end framework:

npm init @vitejs/app my-preact-app --template preact

Vite 2.0 has a new plugin format that extends Rollup’s plugin interface. The Rollup extension results in Vite’s new plugin system being compatible with many existing Rollup plugins. A list of compatible Rollup plugins is maintained online. The list includes commonly used plugins such as eslint (static code analysis), image (image file imports), replace (replaces strings in files while bundling), GraphQL (converts GraphQL files to ES6 modules), and more.

A Rollup plugin is an object with a set of properties, build hooks, and output generation hooks that configure the behavior of the bundler at specific points of its processing. A Vite-compatible Rollup plugin that transforms (preprocesses) custom file types is as simple as:

const fileRegex = /\.(my-file-ext)$/

export default function myPlugin() {
  return {
    name: 'transform-file',

    transform(src, id) {
      if (fileRegex.test(id)) {
        return {
          code: compileFileToJS(src),
          map: null // provide source map if available
        }
      }
    }
  }
}

Surma and Jake Archibald previously lauded the simplicity of the Rollup plugin interface in a talk (Making things fast in the world of build tools) at JSConf Budapest. Archibald credited 16 custom Rollup plugins for allowing them to implement numerous performance optimizations:

You might feel like, we’re, you know, kicking Webpack a lot here. You are right, we are. The honest truth is that the difference that we felt between working on a project with Webpack and working on a project with Rollup was really, really, night and day for us. Not only did we feel like we understood what was happening, we felt capable of changing what was happening if we needed to.

Vite plugins may use only Rollup-compatible hooks. They may also take advantage of Vite-specific hooks and properties (configResolved, configureServer, transformIndexHtml, handleHotUpdate) to customize Vite-only behavior — custom handling of hot module reloading, differential building, and more.

Vite 2.0 is partly inspired by a new range of tools that strive to provide a more productive development experience in modern browsers. The recently released Snowpack 3 touts build time below 50ms independently of codebase size; and streaming imports. Snowpack is used in Svelte’s upcoming application framework SvelteKit and the Microsite static site generator. Preact’s WMR pioneered leveraging the Rollup plugin interface to reuse a large set of battle-tested Rollup plugins. Developers may refer to You’s comparison of Vite vs. Snowpack and WMR.

Vite 2.0 also provides first-class CSS support (with URL rebasing and CSS code splitting), server-side rendering support (experimental), and opt-in legacy browser support.

Vite’s documentation is available online and covers dependency pre-bundling, static asset handling, production bundles, server-side rendering, back-end integration, and more. Vite is distributed under the MIT open-source license. Contributions are welcome and must follow Vite’s contributing guide.