Migrating a 150K LOC codebase to Vite and ESBuild

README.md

Migrating a 150K LOC codebase to Vite and ESBuild

This gist are for my Vite migration articles, here you can find the links to the articles

• Migrating a 150K LOC codebase to Vite and ESBuild: Why? (Part 1/3) (Medium - dev.to)
• Migrating a 150K LOC codebase to Vite and ESBuild: How? (Part 2/3) (Medium - dev.to)
• Migrating a 150K LOC codebase to Vite and ESBuild: Is it worthile? (Part 3/3) (Medium - dev.to)

Feel free to discuss it on Twitter.

build-benchmark.md

Tool	Build
Webpack (babel-loader + ts-loader + fork-ts-checker)	170s
Webpack (esbuild-loader)	42s
Vite*	58s

* Turning off Brotli compression

early-benchmark.md

Tool	yarn start	app loads in	React component hot reload **	web-worker change "hot" reload **
Webpack*	150s	6s	13s	17s
Vite*	6s	10s	1s	13s

* Early benchmark where Webpack runs both ESLint and TypeScript while Vite doesn't
** Means from CTRL+S on a file to when the app is ready

final-benchmark.md

Tool	1st yarn start, app loads in	2nd yarn start, app loads in	browser reload (with cache), app loads in	React component hot reload **	server-data change "hot" reload **
Webpack (babel-loader + ts-loader + fork-ts-checker)	185s	182s	7s	10s	18s
Webpack (esbuild-loader)	56s	52s	7s	10s	16s
Vite	48s	31s *	11s	1s	14s

* Vite has an internal cache that speeds up initial loading
** Means from CTRL+S on a file to when the app is ready

intermediate-benchmark.md

Tool	1st yarn start, app loads in	2nd yarn start, app loads in	browser reload (with cache), app loads in	React component hot reload **	server-data change "hot" reload **
Webpack	185s	182s	7s	10s	18s
Vite	48s	31s *	11s	1s	14s

* Vite has an internal cache that speeds up initial loading
** Means from CTRL+S on a file to when the app is ready

vite.config.ts

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
import { injectHtml } from 'vite-plugin-html'
import packageJson from '../../apps/route-manager/package.json'

// see https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  return {
    // avoid clearing the bash' output
    clearScreen: false,

    // React 17's JSX transform workaround
    esbuild: { jsxInject: `import * as React from 'react'` },
    
    define: {
      'process.env.uuiVersion': JSON.stringify(packageJson.version),
    },

    server: {
      port: 3003,
      strictPort: true,
    },

    plugins: [
      reactRefresh(),
      injectHtml({
        injectData: {
          mode,
          title: mode === 'production' ? 'WorkWave RouteManager' : `RM V3 @${packageJson.version}`,
        },
      }),
    ],

    json: {
      // improve JSON performances and avoid transforming them into named exports above all
      stringify: true,
    },

    resolve: {
      alias: {
        '@/defaultIntlV2Messages': '/locales/en/v2.json',
        '@/defaultIntlV3Messages': '/locales/en/v3.json',
        '@/components': '/src/components',
        '@/intl': '/src/intl/index.ts',
        '@/atoms': '/src/atoms/index.ts',
        '@/routing': '/src/routing/index.ts',
        // ...
      },
    },

    // the dependencies consumed by the worker must be early included by Vite's pre-bundling.
    // Otherwise, as soon as the Worker consumes it, Vite reloads the page because detects a new dependency.
    // @see https://vitejs.dev/guide/dep-pre-bundling.html#automatic-dependency-discovery
    optimizeDeps: {
      include: [
        'idb',
        'immer',
        'axios',
        // ...
      ],
    },

    build: {
      target: ['es2019', 'chrome61', 'edge18', 'firefox60', 'safari16'], // default esbuild config with edge18 instead of edge16

      minify: true,
      brotliSize: true,
      chunkSizeWarningLimit: 20000, // allow compressing large files (default is 500) by slowing the build. Please consider that Brotli reduces bundles size by 80%!
      sourcemap: true,

      rollupOptions: {
        output: {
          // having a single vendor chunk doesn't work because pixi access the `window` and it throws an error in server-data.
          // TODO: by splitting axios, everything works but it's luck, not a designed and expected behavior…
          manualChunks: { axios: ['axios'] },
        },
      },
    },
  }
})