The Snowpack — Next-generation build tool

There are a lot of tools available for building JS files and the Webpack is ruling the JS world since 2012. It became an integral part of Angular builds. The Webpack offers a variety of features that helps developers for building their project. The Webpack transforms your code and different assets like CSS files, images into bundles. It compiles every time when you save your changes. This may work for small projects but the compile and build time start increasing significantly with large projects. Here, the Snowpack comes to save the world.

What is Snowpack?

The Snowpack is a next-generation build tool that is faster, easier, and build for the modern web. The Snowpack takes a different approach than Webpack. The Snowpack take the advantage of native JavaScript modules.

How does Snowpack work?

Snowpack takes an unbundled approach during the development. The files are built only once and cached forever. When there is a change in the file then Snowpack rebuilds that single file and updates the browser in no time.

Ummm.. that sounds interesting. But what about production builds and bundled builds?

The Snowpack supports unbundled development that does not mean that Snowpack does not support bundled approach. By default, Snowpack builds an unbundled approach for production but you can use your favorite bundler via Snowpacks plugins and configuration is also easy. In this way, snowpack provides the best of both worlds.

Now, what is bundled and unbundled development?

The Snowpack takes the advantage of ESM to build and ship individual files to the browser. Every single file is cached forever. When you update or change a single file then only that file is rebuilt and shipped to the browser. Whereas, in bundled approach, all the files and bundled. Hence for any file changes, the entire application needs to rebuild again resulting in a larger build time.

The Snowpack treats all the NPM dependencies individually. It converts individual dependency into separate JS files for example react gets converted into react.js and react-dom into react-dom.js. The dependencies generally remain unchanged hence we do not have to rebuild these files.

How to use Snowpack?

Install Snowpack

# npm:
npm install --save-dev snowpack
# yarn:
yarn add --dev snowpack
# pnpm:
pnpm add --save-dev snowpack

Run Snowpack

npx snowpack [command]
yarn run snowpack [command]
pnpm run snowpack [command]

I have tried the react-snowpack

It takes around 11ms to start the server. The application has a minimal configuration.

Conclusion:

The Webpack is still an awesome and reliable build tool. The Webpack is matured and widely used by the JS community. A lot of useful plugins are available with Webpack. The Webpack exist for several years when there were no ES Modules.

The Snowpack is a lightweight, fast, and next-generation bundling tool. The Snowpack follows an unbundled approach by using JavaScript modules. The Snowpack is very easy to install, set up, and configure. But, there are still some constraints to using Snowpack. We have to use ESM-ready dependencies with Snowpack. The ES modules are still young and yet to be matured and production-ready.

So the question is which one to use? The answer really depends on what is your requirement and your need. Both the tools try to solve different problems with different approaches. Both the tools have their pros and cons. Let me know which one will you pick the Webpack or the Snowpack?

--

--

--

https://www.rohitkawade.com/

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Angular 11 Firestore CRUD: add/get/update/delete documents with AngularFireStore

Overcoming Inconsistencies in a Logistics App: Connecting Native Features with a React Native…

Header Bidding 101: Client-Side Vs Server-Side

Learn TypeScript — Beginner level

An image of a night sky with mountains in the background.

Memoization Pt 2: The Famous Fibonacci Function

React lifecycle methods and hooks

React Hooks with closures: useState v/s useReducer

No More SPAs!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rohit Kawade

Rohit Kawade

https://www.rohitkawade.com/

More from Medium

Lets get user inputs using inquirer and Yargs — Creating a npm command line Utility — Part 2

Common GraphQL misconceptions demystified

How to make a slide presentation with a simple Markdown text file

Slide show

Getting started with RabbitMQ