Vite vs. Snowpack: A comparison of frontend build tools

Vite and Snowpack are both frontend build tools designed to increase productivity and improve developer experience. In this article, we will compare Vite versus Snowpack to determine how and when to use each tool.

Introduction: Vite vs. Snowpack

Vite is a next generation frontend build tool introduced by Evan You, the creator of Vue.js. It is an alternative to the official Vue CLI that is incredibly fast because it leverages on native ES module and handles both dev and bundle in the same package using Rollup for production. Functionally, it works like a pre-configured webpack and webpack-dev-server, but speed-wise, it blows both out of the water.

Snowpack also prides itself on a speed, as a self-described “lightning-fast” frontend build tool, designed for the modern web. Snowpack is an alternative to heavier, more complex bundlers like webpack or Parcel in your development workflow. Similar to Vite, it leverages JavaScript’s native module system (known as ESM) to avoid unnecessary work and stay fast no matter how big your project grows.

Both Vite and Snowpack are fast growing frontend build tools focused on improving developers’ experience by making the process of building frontend apps as efficient as possible.

In the following sections, we will explore more features of Vite and Snowpack and how to use them in your development process.

Scaffolding

Vite

To get started with Vite, we will scaffold a Vue and Vite project using the CLI, @vite/create-app. To do so, we can run either of the following commands in our terminal:

// with npm
npm init @vitejs/app my-vite-app --template vue

// with yarn
yarn create @vitejs/app my-vite-app --template vue

A Vite app can be bootstrapped using one of the following supported templates:

• vanilla
• vue
• vue-ts
• react
• react-ts
• preact
• preact-ts

Once that is done, cd into your project directory, install the dependencies, and start the development server:

// with npm
npm run dev

// with yarn
yarn dev

Note that even though we are using Vite with Vue.js for this example, Vite can be used in a React, Preact, or Vanilla JavaScript app as well.

Vite can be extended and configured beyond the default configuration by adding more options in the vite.config.js or vite.config.ts file at the root of your project directory.

Snowpack

The easiest way to get started with Snowpack is to use Create Snowpack App (CSA). With the CSA tool, we can scaffold an app with Snowpack already configured for us using the CSA official app templates:

npx create-snowpack-app snowpack-app --template @snowpack/app-template-vue

Read more here for a full list of scaffold templates in Snowpack.

Features

Vite and Snowpack both have awesome features that continue to be built and improved upon for the future. In this section, we will discuss some of the similar and distinct features of these no-bundling JavaScript tools.

Vite

Hot Module Replacement (HMR)

Vite provides an HMR API. HMR exchanges, adds, or removes modules while an application is running, without a full reload. This can significantly speed up development process because the application state is preserved when changes are made to the app. If you make any changes in any of your files, you will notice that the changes reflect much faster than in a normal Vue or React application.

TypeScript

Vite has full support for .ts file right out of the box. It uses an extremely fast JavaScript bundler called esbuild to transpile TypeScript code into JavaScript.

npm dependency resolving

Native ES imports do not support bare module imports like import { createApp } from 'vue'. Instead, such imports will throw an error in the browser because it is not a relative path to the location of the package in our node_modules folder.

Vite detects such bare module imports in all served our JavaScript files and rewrites them to resolved paths to reflect the location of the package in the node_ modules folder so that the browser can handle them properly.

Configuration

To extend the configuration of your project in Vite, extend the default configuration options in the vite.config.js or vite.config.ts file location at the base root of your project directory.

File support

Vite has out-of-the-box support for Vue 3 single-file components (SFC), Vue 3 JSX components, and Vue 2 components. It also supports JSX files (.jsx, .tsx), CSS file import, PostCSS, CSS Modules, and  CSS preprocessors like Sass, LESS, and Stylus.

Snowpack

Instant startup

Snowpack’s unbundled development server starts up in 50ms or less and stays fast even as the project grows in scale.

Build once, cache forever

One of the features I’m most impressed with is Snowpack’s ability to cache a file after one build. This is made possible by JavaScript’s native module system in the browser.

Hot Module Replacement (HMR)

Similar to Vite, Snowpack provides an HMR API. When building a Snowpack powered app, the changes made to your files are instantly reflected on the browser using browser refresh.

Optimize for production

At the time of writing this article, Snowpack has a built-in optimization pipeline powered by esbuild (although it is still an experimental feature). The Snowpack official docs also recommend optimizing a Snowpack-powered app using the @snowpack/plugin-webpack plugin.

Build time and server start time

You can start the dev server in Vite in under 300ms because there is no required bundling or compiling. Instead, when you open your Vite app, you will be served the index.html from the server. The browser will then read the index.html and know how to parse the Native-ES-Module code.

Like Vite, Snowpack build time is insanely fast because it serves your files unbundled during development. As a result, dev servers in Snowpack can start up in 50ms or less.

Using Snowpack, every file in your project can be interpreted as function, where the input is the file’s content and the output a cached version of it. Since no bundling is done at all, the local dev server starts up immediately and only processes the files required at the given point in time. That means that even if your project grows very large, startup will be minimally affected.

Bundle for production

Vite uses Rollup for production, which can produce smaller bundles because it is based on ESM. Vite 0.16.4 and on have support for automatic CSS code splitting for async chunks and https mode, both of which can improve the performance of production builds.

To build your site into web native JS, CSS, and HTML files in Snowpack, you can use snowpack build. This “unbundled” deployment can be enough for small sites, but many developers prefer to optimize and bundle their final site for production performance.

Snowpack can also run all sorts of optimizations on your final build to handle legacy browser support including: code minification, code splitting, tree shaking, dead code elimination, preloading, bundling, and more.

Community and ecosystem

Vite

Even though version 1 of Vite was only released in October 2020, the Vite.js team is constantly adding improvements (as recently as January 2021, for example, Vite now supports global imports). To date, over 5,000 repositories are known to run on Vite and over 110 developers have contributed to the repository. Interestingly, despite being a newcomer, Vite has a faster adoption rate than Snowpack.

Snowpack

Snowpack has around for some time now and has over 280 developers contributing to its repository on GitHub. There are also nearly 4,700 repositories that are known to run on Snowpack.

Learning curve

It is easy to get started in both Vite and Snowpack because both have a CLI that can be used to scaffold a new project with packages already configured. Therefore, the learning curve is fairly low for both build tools, especially compared to JavaScript bundlers like webpack (although in fairness, webpack has a lot more capabilities).

Documentation

Both Snowpack and Vite have well written documentation that is very straightforward. You can easily get started with both tools by checking out their docs and trying out a few things for yourself. If you’re familiar with modern JavaScript build tools, you’ll be able to learn and use any of these build tools in a day or two.

Conclusion

Both Vite and Snowpack boast incredibly fast speeds, made possible, in part, by the use of no bundler development environments. While it is hard to predict the future of web development, it is safe to say that Vite and Snowpack are here to say. After all, no one likes waiting 30 seconds or more for their development server to start or for changes to be reflected in the DOM!

Further reading and references

• Getting started with Vite
• Why and how to use Snowpack instead of webpack
• How Does Vite Work – A Comparison to Webpack
• A Future Without Webpack
• Evan You on Vite

Let me know in the comments section below what you thought of this article. I am social on Twitter and GitHub. Thank you for reading and stay tuned.

Finally, check out the LogRocket podcast, PodRocket, for our recent episode on Snowpack, webpack, and more!