Posted inDevelopment

Farewell Webpack: How I ‘Hacked’ Project Build Speed 10x with Vite

Development tutorial - IT technology blog
Development tutorial - IT technology blog

The Nightmare Named “Waiting for build…”

If you are working on large-scale React or Vue projects, you are likely familiar with the scene of hitting Ctrl + S and then staring at a loading spinner. There were times I had to wait up to 10 seconds just to see a minor UI change. The constant interruption of the coding flow was incredibly frustrating.

Why is Webpack slow? The reason lies in its “bundle-based” mechanism. Webpack must scan every single file, build a dependency graph, and then bundle everything into a single file before it can run. As the codebase grows, Webpack becomes sluggish. I once managed a project with over 1,500 modules where starting the dev server took nearly 2 minutes. After switching to Vite, this number dropped to less than 1.5 seconds. The team no longer has to go grab coffee every time the server restarts.

Vite (French for “fast”) solves this problem with two heavy weapons:

  • Native ESM: Vite doesn’t bundle code in the dev environment. It lets the browser request files as needed via ES Modules. The browser calls, and Vite responds.
  • Esbuild: This is a build tool written in Go. Its speed is 10 to 100 times faster than traditional JavaScript-based tools.

Initialize a Project in a Heartbeat

To get started, you just need Node.js version 18 or higher. Skip the complicated setup; just open your terminal and type:

npm create vite@latest my-awesome-app

Vite will ask which framework you want to use. Unlike create-react-app which comes pre-installed with tons of junk libraries, Vite is extremely lean. It only provides what is strictly necessary for the app to run.

If you choose the React + TypeScript combo, the folder structure will look like this:

my-awesome-app/
├── src/
│   ├── App.tsx
│   └── main.tsx
├── index.html
├── package.json
└── vite.config.ts

Interestingly, the index.html file is located right in the root directory. Vite treats this as the entry point to analyze <script type="module"> tags. This approach makes code loading almost instantaneous.

Now, let’s install and run it:

cd my-awesome-app
npm install
npm run dev

Fine-tuning Config for Real-world Projects

While the default configuration is great, I usually add a few tweaks to the vite.config.ts file for a better workflow in real projects.

1. Setting up Aliases (Path Shortcuts)

Don’t let your code look messy with lines like import Header from '../../../components/Header'. Use aliases to keep everything clean.

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

2. Securing Environment Variables

Vite doesn’t use process.env but switches to import.meta.env. A key rule: only variables starting with VITE_ are allowed to be exposed to the client side.

# .env
VITE_API_URL=https://api.itfromzero.com
SECRET_KEY=123456 # This variable will be kept private on the server

When using it in code, simply call import.meta.env.VITE_API_URL.

3. Bypassing CORS with Proxy

CORS errors when calling local APIs are a common occurrence. Vite allows you to configure a proxy very quickly to trick the browser:

// vite.config.ts
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
})

Controlling Bundle Size

Before deploying, checking the build file size is mandatory. Vite uses Rollup for production bundling, which supports powerful tree-shaking to eliminate dead code.

I often use rollup-plugin-visualizer to view the size chart of libraries. It helps you detect heavy “intruders” like Moment.js or full versions of Lodash.

npm install -D rollup-plugin-visualizer

Then, add the plugin to the config:

import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [react(), visualizer({ open: true })],
})

When running npm run build, a visual diagram will appear. You will know exactly where you need to optimize.

Deployment Advice

When deploying to Vercel or Netlify, the build command is still vite build and the output is in the dist/ folder. A big plus is that Vite automatically splits CSS into small files per JavaScript chunk. This helps users load pages faster because the browser doesn’t have to download one massive CSS file from the start.

Changing from Webpack to Vite is not just about switching tools. It’s about upgrading your daily workflow. If your project is sluggish, try migrating today. The difference in speed will definitely amaze you.

Share:
Tags: