vite vs webpack vs react-scripts vs react-app-rewired vs customize-cra vs craco

Package	Downloads	Stars	Size	Issues	Publish	License

vite	26,525,209	77,437	2.23 MB	632	22 days ago	MIT
webpack	18,556,426	65,888	5.69 MB	213	19 days ago	MIT
react-scripts	1,714,085	103,945	116 kB	2,360	4 years ago	MIT
react-app-rewired	156,716	9,878	48.9 kB	18	-	MIT
customize-cra	90,693	2,783	-	115	6 years ago	MIT
craco	9,435	7	90.9 kB	0	-	MIT

Package

Downloads

Stars

Size

Issues

Publish

License

vite

26,525,209

77,437

2.23 MB

632

22 days ago

MIT

webpack

18,556,426

65,888

5.69 MB

213

19 days ago

MIT

react-scripts

1,714,085

103,945

116 kB

2,360

4 years ago

MIT

react-app-rewired

156,716

9,878

48.9 kB

MIT

customize-cra

90,693

2,783

115

6 years ago

MIT

craco

9,435

90.9 kB

MIT

Customization

vite:
vite is designed for modern web development with a focus on speed and performance. It allows for easy customization of the build process through a simple configuration file (vite.config.js). Vite supports plugins, and you can customize various aspects of the build, such as the server, build output, and more, while keeping the configuration straightforward and intuitive.
webpack:
webpack is known for its deep customization capabilities. It allows developers to configure every aspect of the bundling process, from loaders and plugins to output settings and module resolution. Webpack's configuration is highly flexible, enabling complex setups for large applications, making it the go-to choice for projects that require fine-grained control over the build process.
react-app-rewired:
react-app-rewired allows you to override the default configurations of Create React App (CRA) without ejecting. It enables you to customize the Webpack, Babel, and ESLint settings by modifying the config-overrides.js file in your project. This approach provides flexibility while maintaining the simplicity and ease of use of CRA, making it suitable for projects that require minor configuration changes without a complete overhaul.
customize-cra:
customize-cra provides a set of utilities to customize the Webpack configuration of Create React App (CRA) without ejecting. It works in conjunction with react-app-rewired and allows you to make targeted changes to the Webpack config, such as adding plugins, modifying loaders, or changing the output configuration. This package is ideal for developers who want to make specific adjustments to the CRA setup while keeping the rest of the configuration untouched.
craco:
craco allows for extensive customization of Create React App (CRA) configurations without ejecting. It lets you modify Webpack, Babel, ESLint, and other settings by simply adding a craco.config.js file to your project. This approach keeps your CRA setup intact while providing the flexibility to make necessary adjustments.

Performance

vite:
vite is optimized for performance, especially during development. It uses native ES modules and a fast development server, resulting in instant server starts and lightning-fast hot module replacement (HMR). Vite's production builds are also highly optimized, making it one of the fastest build tools available.
webpack:
webpack performance can vary based on configuration. While it is highly efficient for production builds, the development experience can be slower compared to Vite, especially with large projects. However, Webpack offers various optimization techniques, such as code splitting, tree shaking, and caching, to improve build times and runtime performance.

Ease of Use

vite:
vite offers a simple and intuitive setup, especially for new projects. Its configuration is straightforward, and it provides excellent documentation and examples, making it easy for developers to get started quickly.
react-scripts:
react-scripts provides a zero-configuration setup for React applications, making it extremely easy to use for beginners and experienced developers alike. It abstracts away all the complex configurations, allowing developers to focus on writing code without worrying about the underlying build process.

Code Example

vite:

vite Example

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    port: 3000,
  },
  build: {
    outDir: 'dist',
  },
});

webpack:

webpack Example

// webpack.config.js
const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/, 
        use: 'babel-loader',
      },
    ],
  },
};

react-app-rewired:

react-app-rewired Example

// config-overrides.js
module.exports = (config) => {
  // Modify the CRA config as needed
  config.output.filename = 'my-app.js';
  return config;
};

customize-cra:

customize-cra Example

// config-overrides.js
const { override, addWebpackPlugin } = require('customize-cra');
const SomeWebpackPlugin = require('some-webpack-plugin');

module.exports = override(
  addWebpackPlugin(new SomeWebpackPlugin())
);

craco:

craco Example

// craco.config.js
module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      // Modify webpackConfig as needed
      return webpackConfig;
    },
  },
};

Vite ⚡

Next Generation Frontend Tooling

💡 Instant Server Start

⚡️ Lightning Fast HMR

🛠️ Rich Features

📦 Optimized Build

🔩 Universal Plugin Interface

🔑 Fully Typed APIs

Vite (French word for "fast", pronounced /vit/) is a new breed of frontend build tool that significantly improves the frontend development experience. It consists of two major parts:

A dev server that serves your source files over native ES modules, with rich built-in features and astonishingly fast Hot Module Replacement (HMR).

A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

In addition, Vite is highly extensible via its Plugin API and JavaScript API with full typing support.