What is Vite ?

When it comes to frontend there has always been a tremendous list of tooling support , Vite calls itself the next generation frontend tooling.

To summarize the whole definition

Before we jump onto the reasons why Vite is one of the best “build” tools out there , We should try to know what does “building” and “bundling” means in context of frontend apps

Build and Bundling: What and Why?

The build process in frontend development involves transforming your source code into a production ready format, This includes steps like

• Transpilation

  Converting modern JavaScript (ES6+), TypeScript, or JSX (React) into a version of JavaScript that can be understood by all browsers.

  Example: Transpiling ES6 arrow functions to ES5 syntax using Babel.

  Code Example

  // ES6
  const greet = () => console.log("Hello!");
  
  // ES5
  var greet = function() {
    console.log("Hello!");
  };
  

  We can see how ES6 has been transpiled to ES5

• Minification

  Reducing the size of your JavaScript, CSS, and HTML files by removing whitespace, comments, and unnecessary characters without affecting functionality.

  Example: Minifying JavaScript using UglifyJS

  Code Example

  // Original 
  function add(a, b) { 
   return a + b; 
  } 
  
  // Minified 
  function add(a,b){return a+b}
  

• Optimization

  Improving the performance of your assets, such as compressing images, removing unused CSS (purging), and pre-processing files. Example: Using tools like PostCSS to remove unused CSS classes.

• Polyfilling

  Adding code to emulate missing features in older browsers. Example: Including polyfills for Promise in older browsers.

Bundling is the process of taking all of your various JavaScript files (and other assets) and combining them into one or more bundles. This is important for:

• Dependency Management

  Resolving dependencies between modules and packaging them together.

  Code Example

  //module1.js
  export const greet = () => { console.log("Hello!"); }; 
  
  // module2.js
   import { greet } from './module1';
  greet();
  

  The bundler analyses the import and export statement to understand the dependencies between the two files, In this case module2.js depends on module1.js

  The bundler combines the contents of these modules into a single file (or multiple files, depending on the configuration) while ensuring that the dependencies are correctly managed.

  The bundler minifies the code to reduce its size by removing unnecessary whitespace, comments, and sometimes shortening variable names.

  Code Example

  //module1.js content
   const greet = () => { console.log("Hello!"); }; 
  // module2.js content
  greet();
  

• Reducing HTTP Requests

  Minimizing the number of HTTP requests by combining files, which is crucial for performance. Example: Combining multiple JavaScript files into a single bundle to reduce load times.

Back to Vite

Vite is build on other tools namely esbuild and Rollup , though it uses it at different stages of the development and build processes

Vite uses esbuild in development

• Fast Transpilation and Bundling

  Vite uses esbuild, a highly performant bundler and minifier written in Go, during development to provide fast transpilation and module resolution. esbuild is extremely fast compared to traditional JavaScript-based bundlers because of its optimized implementation.

• Hot Module Replacement (HMR):

  During development, Vite provides instant hot module replacement (HMR), allowing developers to see changes immediately without refreshing the entire page. esbuild helps achieve this with its fast build times.

Whereas it uses rollup in production

• Optimized Bundling

  For production builds, Vite uses Rollup, a mature and flexible module bundler. Rollup is known for its ability to produce highly optimized and efficient bundles.

• Tree Shaking

  Rollup's advanced tree-shaking capabilities help remove unused code, reducing the final bundle size.

• Code Splitting

  Rollup supports code splitting, which allows Vite to break the application into smaller chunks that can be loaded on demand, improving the initial load time.

The question arises that why vite uses different tools for different environment

• Performance in Development:

  esbuild provides an extremely fast development experience. It can handle large codebases with speed, making it ideal for development mode where quick feedback is crucial.

• Optimization in Production:

  Rollup offers a more feature-rich and flexible bundling process for production builds. Its plugins ecosystem, tree-shaking, and code-splitting capabilities ensure that the final output is optimized for performance.

When it comes to functionality both esBuild and Rollup fall in the same category , they both do tree shaking and minification then why does Vite uses them separately , why not go for same tool for both the environment

Vite uses Rollup for production because

• Rollup provides more advanced and comprehensive tree shaking compared to esbuild. It has been a pioneer in tree shaking and offers very fine-grained control over the process. Rollup’s tree shaking can handle more complex cases and ensure that the final bundle is highly optimized.
• Rollup excels at code splitting, allowing the creation of multiple smaller bundles (chunks) that can be loaded on demand. This helps improve the performance of large applications by reducing initial load times.
• Rollup has a mature and extensive plugins ecosystem that offers a wide range of optimizations and transformations that can be applied during the build process.This flexibility allows for customized build configurations that can tailor the final output to specific needs and requirements.

By using both the tools at different environment Vite tends to take advantage of the best features of both the tools. It is a strategic choice rather than discrimination.