https://blog.replit.com/vite repl.it Features Jobs Blog Pricing Jam Sign up - Back to blog Edit on Replit Why We Switched From Webpack To Vite Wed Apr 28 2021 by Sergei Chestakov At Replit, our mission is to make programming more accessible. We provide people with free compute in the cloud so that they can build apps on any device. Among the most popular ways to create apps on the web today is React. Historically, however, React tooling has been slow on Replit. While the JavaScript ecosystem has produced excellent tools for professional developers, many of the most popular ones, like Create React App and Webpack, have become increasingly complex and inefficient. Fortunately, we've seen the JavaScript community recognize this problem and move to build faster and more efficient tooling, which means we can finally deliver the experience our users expect from us. vite logo This new experience is powered by Vite, a JavaScript build tool that provides a fast and lean development experience. Vite comes with a number of features including HMR, or Hot Module Replacement, a build command that bundles your tools with Rollup, and built-in support for TypeScript and JSX. Vite makes React dev fast. Like really fast. With HMR, changes you make trigger rerenders within milliseconds which makes prototyping UIs really quick. With that in mind, we decided to rewrite our React template using Vite and we were shocked to see just how much faster it was. Here's what it looks like next to our old CRA template: Create React App vs Vite React on @replit. Vite ran before the container could even boot CRA files. pic.twitter.com/lZe87brsjv -- Amjad Masad o (@amasad) January 30, 2021 Over the last few weeks, our new React template has helped our designers prototype complex UI components and enabled many of our engineering candidates to build out an entire web app in just a few hours during our (virtual) onsites. When you see it in action, it's easy to see why: React + Vite on Replit How it works Vite works by treating your source code and your dependencies differently. Unlike your source code, dependencies don't change nearly as often during development. Vite takes advantage of this fact by pre-bundling your dependencies using esbuild. Esbuild is a JS bundler written in Go that bundles dependencies 10-100x faster than JavaScript based alternatives like Webpack and Parcel. It then serves your source code over native ES Modules, or ESM, which allows the browser to handle the actual bundling. Finally, Vite supports HMR, which ensures only the relevant modules are replaced when a file is edited instead of rebuilding the entire bundle, which triggering a page reload and resets state. Unlike other bundlers, Vite performs HMR over native ES Modules which means it only needs to invalidate affected modules when a file is edited. This ensures that update times are consistently fast instead of scaling linearly as your application grows. Getting Started To get started, simply fork our React template or select React.js in the languages dropdown when creating a new repl. Vite is also framework agnostic, so if React isn't your thing, you can use our Vue and Vanilla JS templates too. We hope this helps build out your ideas even quicker and look forward to seeing what you build! Legal Terms and services Privacy Subprocessors DPA US Student DPA Replit Blog About Jobs Classrooms Pricing Handy links Create a repl Docs Feedback Bug reports Language requests Status page Social media Facebook Twitter Instagram Discord Languages Clojure Haskell Kotlin (beta) QBasic Forth LOLCODE BrainF Emoticon Bloop Unlambda JavaScript CoffeeScript Scheme APL Lua Python 2.7 Ruby Roy Python Nodejs Enzyme Go C++ C++11 C C# F# HTML, CSS, JS Rust Swift Python (with Turtle) Jest Django Express Sinatra Ruby on Rails R Next.js GatsbyJS React React Typescript React Reason Bash Quil Crystal Julia Elixir Nim Reason NodeJs Erlang TypeScript Pygame Love2D Tkinter Java Swing Emacs Lisp (Elisp) PHP Web Server SQLite Java PHP CLI Pyxel Copyright (c) 2020 Neoreason, Inc. All rights reserved.