vite VS esbuild

to then serve to the browser. If I was using something like Vite or Webpack I would have gotten this handling for free.

As we are done with our 👉Backend to set up frontend for MERN Stack Application, Let's use Vite framework for building react application.

Tools like Vite and Next.js already provide support for linting via the ESLint module.

Vite is a modern frontend build tool used to develop fast and super efficient web applications. It serves files instantly and ensures that changes are updated immediately after they are implemented. It makes use of Rollup for optimized builds and has support for when you want to build a Javascript library (instead of a full app).

I stumbled upon UmiJS accidentally when reading about Mako — a Vite analog built with Rust (of course) which I'm very interested in. When I started to dig, I had fallen into a whole treasure trove which I wanted to share with other people who hadn't heard anything about the Umi ecosystem. Maybe it's just me living under a stone, so feel free to skip it if you're already a UmiJS kung fu master. Otherwise, welcome to the ride.

The app is bootstrapped with Vite and their React template (with Typescript), but Frontegg's React SDK can be used in any client-side React app.

Anima builds a React project using Vite. This was my first experience of using Anima so I will document and go through most of the prompts which I used for building this app. I think this is also a good introduction and proof of concept of how "prompt engineering" or "chain prompting" can be and how effective it is at building applications from an existing design.

// 📂 container/vite.config.js import { defineConfig } from "vite" import react from "@vitejs/plugin-react" import federation from "@originjs/vite-plugin-federation" // https://vite.dev/config/ export default defineConfig({ plugins: [ react(), federation({ name: "container_app", remotes: { players: "http://localhost:5002/assets/remoteEntry.js" }, shared: { react: { singleton: true, requiredVersion: "^18.0.0" }, "react-dom": { singleton: true, requiredVersion: "^18.0.0" } } }) ], build: { modulePreload: false, target: "esnext", minify: false, cssCodeSplit: false } })

Looks like a lot of them are pinning to tags (which are not guaranteed to change) or SHA (https://github.com/vitejs/vite/blob/8da04227d6f818a8ad9efc00...) which is more hermetic.

Pre-bundle all the dependencies on the "optimization boundary" list into node_modules/.vite/deps/ folder. This step is done by esbuild.

ESBuild is a bundler. The subtitle on the website is literally “An extremely fast bundler for the web”. To bundle, pass —-bundle flag.

https://esbuild.github.io/

esbuild for bunding both the client and server separately

> like individual loaders/modules are/were slow, rather than webpack itself

tbh this is just nitpicking, I'm not a react developer to do CRA debugging for them. They're paid by Facebook a couple orders of magnitude more than what we're making here, and if they're fine with the intact CRA configuration being that slow, while a third-party alternative rips through the massive pile of shit I'm working on while not bringing any obvious downsides, I'll just to the alternative.

It's a well known problem: esbuild, which is the base of vite's HMR, boasts of speeds dozens to hundreds of times faster than webpack:

https://github.com/evanw/esbuild?tab=readme-ov-file#why

Micro-frontend has always aroused my curiosity: I wanted to understand how they work, how to build them, what their pros and cons are. In 2018, inspired by this topic, I tried to build something similar to single-spa in one of the pet projects. At that time, there was no Webpack Module Federation (WMF), and Webpack itself seemed inconvenient. The choice fell on ESBuild and importmap. Browser support for importmap at the time was mostly on paper or with special flags in browsers. For this reason, I used a polyfill. But, surprisingly, everything worked and even in several projects.

Why esbuild? compared to other tools esbuild keeps things minimal, it is very fast(the fastest bundler as of today) and supports typescript and esm by default.

Instant Hot Module Replacement (HMR): During development, Vite only processes the changed files and updates them in the browser instantly, making it incredibly fast and responsive. Optimized Build Process: Vite uses esbuild under the hood for fast JavaScript transpilation, which is significantly faster than Babel. Production Build with Rollup: For production builds, Vite uses Rollup, a highly efficient bundler that produces optimized code.

We have transitioned to using Esbuild for our project's build process and, experiencing a substantial increase in speed compared to our previous setup with Webpack. The primary bottleneck we faced with Webpack was its long build times. Now, with Esbuild integrated into our development environment, our build times have been dramatically reduced to about five seconds, significantly enhancing the efficiency of our workflow.