We Switched from Webpack to Vite

This page summarizes the projects mentioned and recommended in the original post on news.ycombinator.com

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • talent.io - Download talent.io’s Tech Salary Report
  • Scout APM - Truly a developer’s best friend
  • InfluxDB - Build time-series-based applications quickly and at scale.
  • SonarLint - Clean code begins in your IDE with SonarLint
  • vite-plugin-ssr

    Like Next.js / Nuxt but as do-one-thing-do-it-well Vite plugin.

    Have you seen SvelteKit's source code? It looks like a toy project. [1]

    vite-plugin-ssr can't even be integrated with Vue Router. They're both very rigid, early stage endeavours, full of non-statically typed code. [2]

    I mean, fair enough that there are people trying to do better, but it's extremely hard to find the right abstractions for such complex builds and Webpack is definitely on top here.

    [1] https://github.com/sveltejs/kit/blob/5c2665ff2280947a2fc6001...

    [2] https://github.com/brillout/vite-plugin-ssr/blob/master/src/...

  • SvelteKit

    The fastest way to build Svelte apps (by sveltejs)

    Have you seen SvelteKit's source code? It looks like a toy project. [1]

    vite-plugin-ssr can't even be integrated with Vue Router. They're both very rigid, early stage endeavours, full of non-statically typed code. [2]

    I mean, fair enough that there are people trying to do better, but it's extremely hard to find the right abstractions for such complex builds and Webpack is definitely on top here.

    [1] https://github.com/sveltejs/kit/blob/5c2665ff2280947a2fc6001...

    [2] https://github.com/brillout/vite-plugin-ssr/blob/master/src/...

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • esbuild-loader

    ⚡️ Speed up your Webpack build with esbuild

    For people already on webpack, there's esbuild-loader (https://github.com/privatenumber/esbuild-loader)

  • kiwi

    A schema-based binary format for efficiently encoding trees of data (by evanw)

    He has some insanely high quality projects. shout out to his His Kiwi Schema https://github.com/evanw/kiwi project that saved me from protobuff swamp monster hell

  • wmr

    👩‍🚀 The tiny all-in-one development tool for modern web apps.

  • webpack

    A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.

    * Many open issues regarding module imports, for ex, when a CJS module imports an ES one [2]

    Our current bottleneck with Webpack is actually sass-loader, taking at least 70% of the time during a fresh build, and we'd have the same problem with Vite.

    Something else that is worth pointing out is the ecosystem: Webpack's community has built tons of plugins for basically any use case you can imagine, and version 5 supports module federation, persistent caching, externals (very handy when doing SSR), customisable filename generators, performance hints and so on. Totally different game.

    Try to keep your build config simple, avoid too many loaders, plugins, and you should be fine 99% of the time. If you hit a wall, install speed-measure-webpack-plugin to get some help.

    [1] https://github.com/webpack/webpack/issues/2933

  • vite

    Next generation frontend tooling. It's fast!

  • talent.io

    Download talent.io’s Tech Salary Report. Median salaries, most in-demand technologies, state of the remote work... all you need to know your worth on the market by tech recruitment platform talent.io

  • trunk

    Build, bundle & ship your Rust WASM application to the web.

    Also Trunk [0] for Rust-wasm web dev. It’s made me not hate doing the front end for my projects. I look forward to the Rust web ecosystem evolving to the point where I can recommend it in a work context.

    [0] https://trunkrs.dev/

  • jest

    Delightful JavaScript Testing.

  • vite-test-example

    Example of setting up tests with Vite

  • vite-plugin-vue2

    Vue2 plugin for Vite

  • esprima

    ECMAScript parsing infrastructure for multipurpose analysis

    The thread was originally about CRA vs Vite size on disk (or implicitly, if we're applying it to real world applications, network cost in CI job startup times). And like I said, surrogate pairs don't apply to ASCII.

    See this[0] for reference. Note how the first byte must fall within a certain range in order to signal being a surrogate pair. This fact is taken advantage of by JS parsers to make parsing of ASCII code faster by special casing that range, since checking for a valid character in the entire unicode range is quite a bit more expensive[1].

    [0] https://github.com/jquery/esprima/blob/0911ad869928fd218371b...

    [1] https://github.com/jquery/esprima/blob/0911ad869928fd218371b...

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts