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
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • vike

    🔨 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

    web development, streamlined (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/...

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • esbuild-loader

    Webpack loader for esbuild: Speed up your build ⚡️

  • 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!

  • [2] https://github.com/vitejs/vite/issues?q=is%3Aissue+is%3Aopen...

  • WorkOS

    The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

    WorkOS logo
  • 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

    Discontinued 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