This gist are for my Vite migration articles, here you can find the links to the articles
Feel free to discuss it on Twitter.
| Tool | Build |
|---|---|
| Webpack (babel-loader + ts-loader + fork-ts-checker) |
170s |
| Webpack (esbuild-loader) |
42s |
| Vite* | 58s |
* Turning off Brotli compression
| 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
| 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
| 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
| 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'] }, | |
| }, | |
| }, | |
| }, | |
| } | |
| }) |