Vite: King of Javascript Bundlers

You've likely gone through the years of using Webpack, Parcel, Snowpack, RollUp, Babel, and how many others? They are all great in their own way and allowed us to to do things like never before with JavaScript. But a new day has dawned my friend! Vite now stands as the king of the hill!

Developers Speed Dream

Vite will scaffold an applications with a bare-bones setup to start your new project lean. During development you run the Dev Server (yarn dev) which has the quickest HMR (Hot Module Replacement) I've seen. The moment you create a project your'll notice Yarn and NPM are dreadfully slow. During development the instant response to changes leaves nothing to be desired. The server startup time is about 3 seconds.

  • Vite Project Presets
    • Vanilla (Modern JavaScript, Add jQuery or Anything)
    • React
    • Preact
    • Vue
    • Lit
    • Svelte
    • You can also choose JavaScript or TypeScript for any of them.

It's worth noting that Vite has replaced Laravel Mix (Previously Webpack) for bundling Laravel's assets. Laravel is the #1 Framework in PHP for many years in a row now.

VSCode Extension

Hopefully you are using VSCode. If you aren't, why not? You can also add the Vite VSCode Extension. Search for vite in the extensions and you never have to leave VSCode to run your server and watch your changes.

Vite VSCode

Start using Vite

Vite is so easy to use that it requires zero configuration. Simply run one command and select 3 options as to what you want to build. They still give you the option to create a vite.config.js, but it's not required and nowhere near as complex as Webpack.

# For Yarn Users
yarn create vite

# For NPM Users
npm create vite@latest

Once you create your project it tells you what to do. Go into your new project folder, run yarn and yarn dev. Now you are ready to start developing in record time!

Easy to Understand

Similar to other JavaScript bundlers they all have one entry point. The default entry point is at the moment is: main.js. You can change this name if you like, be sure to change the reference in index.html also.

If you've never developed with a tool that uses one main file for everything you may be surprised. For example, in the MVC Design Pattern you always have a FrontController that is used to access and route everything. Your main.js is a bit like that, depending on the application you are building out of course.

Another simpler example would be like your CSS files. You may have a _vars.scss, _elements.scss, and so forth. But it all comes together when you @import ... into your styles.scss (Or main stylesheet). It all comes together!

Happy Coding!