loading...

Snowpack: The bundle free build tool - Let's take a look

nwby profile image Sam Newby ・2 min read

Pretty much most web applications use a bundler to build their applications, webpack, Rollup, Parcel are some of the most popular. But, the problem always is that they take too long to setup and get the config right. It is usually something that I personally don't want to spend time on.

So, let's introduce Snowpack version 2 by Pika. Snowpack claims to be 'The fast, bundle-free build tool for modern web apps.' and to be honest I don't disagree with it at all.
The setup is really easy and Pika has even built a create-react-app style starter template for Vue.js, React, React with TypeScript and Svelte for us to get up and running with really quickly, which they've called Create Snowpack App (CSA). CSA can be used like this: npx create-snowpack-app new-dir --template @snowpack/app-template-vue [--use-yarn]

Key Points

  • No Bundling Needed During Development: Snowpack installs your npm dependencies so that they can be imported directly in the browser without an application bundler.
  • Instant Dev Startup: 20ms or less is how long it takes for Snowpack’s dev server to start on most machines. Files are only built on-demand, as requested by the browser.
  • Instant Dev Rebuilding: Never wait more than a few milliseconds when you hit save. Since there’s no large app chunks to rebuild, changes are reflected in the browser instantly.
  • Connect your Favorite Build Tools: Manage your build using a simple, familiar “scripts” interface that replaces traditionally complex plugin ecosystems.
  • Bundle for Production: It’s the best of both worlds: fast bundle-free development + optimized bundling in production. Choose between bundled (optimized) or unbundled build output without any additional config needed.

I'm not going to go into any more detail here about Snowpack. I just wanted to introduce it to anyone here that hasn't heard about it yet, enjoy.

Posted on by:

nwby profile

Sam Newby

@nwby

Software developer with a passion for Go, Vue.js, Laravel and Hugo

Discussion

markdown guide
 

Bundle for Production: It’s the best of both worlds: fast bundle-free development + optimized bundling in production. Choose between bundled (optimized) or unbundled build output without any additional config needed.

That's not true... to optimize the bundle you need to add configurations and dedicated scripts. Plus there is no documentation about it.