What is Snowpack?

Snowpack is a quick UI building tool, designed for the modern web. It is an alternative solution for these bundlers heavier, more complicated like webpack or Parcel in your development process. Snowpack leverages JavaScript’s native modules system to avoid unnecessary work and maintain speed no matter how big or scaling your project is.

According to the snowpack homepage, if you have tried it once then chances are you will be addicted to it, when using it you may not want to go back to using the bundler that you used again =))

So what features does snowpack offer?

Feature

Instant startup

• Unbundled web development server khởi động trong 50ms hoặc nhỏ hơn and still fast in large projects

Build once, cache forever

• Snowpack never builds the same file twice. Supported by JavaScript’s native module system (ESM) in the browser

HMR feat. Fast Refresh

• No need to refresh. See changes reflected instantly in the browser with Hot Module Replacement (HMR) + Fast Refresh for React, Preact & Svelte.
• HMR: is the ability to update the content of files when there is a change to the browser without we needing to refresh the page. For a simple example, in a css file we fix the text color from red to blue, the program immediately updates the text color to blue, but we don’t need to resfresh the page.
• With the ability of snowpack when building single files almost immediately, it only takes 10-25ms to download and update in the browser
• In addition to the HMR snowpack support Fast Refresh for popular frameworks or libraries like react, Preact and Svelte.

Out-of-the-box support

Snowpack is provided with built-in support for the following file types, no configuration required:

• JavaScript (.js, .mjs)
• TypeScript (.ts, .tsx)
• JSON (.json)
• JSX (.jsx, .tsx)
• CSS (.css)
• CSS Modules (.module.css)
• Images & Assets (.svg, .jpg, .png, etc.)
• WASM (.wasm)

Optimize for production

• Built for production environments with built-in optimization features and plugin support for your favorite packages.

Plugins? Plugins!

• You can connect to your favorite plugins like babel, SASS, …. Or you can create your own plugin

How does Snowpack work?

• With unbundled development Snowpack’s are still supported as bundled builds that we used for production
• When we build applications for production, we can install plugins bundler I like Webpack, … via the official snowpack plugin
• With snowpack we don’t need to configure complicated bundler but it handles the build for us
• Snowpack helps you get the most out of: agile development, unbundled development with optimized performance in our production releases.

Here is an image of how snowpack and webpack work:

Unbundled development

• Unbundled development is the idea of moving individual files to the browser during our application development. Files can still be built using tools like ts, babel,… and then loaded individually in the browser with syntax dependencies import and export. Whenever we change the contents of the file, Snowpack just needs to rebuild the file
• Advantage of Unbundled development compare to bundled development traditional:
  • Single-file builds fast
  • Single-file builds are deterministic
  • Single-file builds easy to debug
  • Project size does not affect development speed
  • Individual files are better cached.

In general, Unbundled development: Each file is individually created and cached indefinitely. In a development environment, build the file only once and the browser will not reload the file a second time, unless we change the contents of the file.

Use NPM dependencies

• NPM packages are mainly published using module syntax, so they cannot be run on the web without some build. We want to use a package we have to come back with bundled development
• Snowpack takes a different approach: instead of packing our entire application for one request, Snowpack handles our dependencies separately.

It should work like this:

1. Snowpack will scan your application for all the npm packages that are used
2. Snowpack will read the installed dependencies from the node_modules directory
3. Snowpack packs all of our despendencies separately into individual JavaScipt files. react and react-dom will be converted to react.js and react-dom.js corresponding
4. Each resulting file can be run in a browser and imported via ESM import
5. Because our dependencies rarely change, Snowpack rarely needs to rebuild them.

After Snowpack builds our dependencies, any packages can be imported and run directly in the browser without any additional packages or tools.

Demo

Through such theoretical items, how to practice using it.

Install snowpack

You create a folder and use the following command to init project with npm:

Then cd into the project directory to install snowpack:

Here you probably do not know about pnpm You can refer to my post about pnpm

Practice

Then you go to the root of the project to create a file index.html with simple content as follows:

then go to file package.json add the following line:

Now let’s try start it’s up to see how npm run dev!

Our terminal will look like this:

We can see that the time it starts is 32ms

Using JavaScript: We create a file index.js and app.js as follows:

ở index.html we add:

Now try to change the contents of the file, then look at the terminal to see which files have changed and the number of times that file changed

Conclude

In this article, I introduced snowpack and practiced creating a project to learn how it works. In the next article we will learn how to use the npm package, adding css, and building for the production and development environment. Thank you for watching the article

Other articles with snowpack:

• Tạo project React với snowpack

References:

In my article use the content and refer to the official document page of snowpack

• snowpack.dev