Accelerating CI: ~90% Faster Bundles with Vite and Knip

A real-world migration story on how switching from Webpack to Vite plus cleaning up unused code and dependencies with Knip cut our bundle times at **Silence** by ~90% and drastically improved development speed.

After the optimization, our build times now last ~2m.

The Pain: Slow Feedback, Wasted Time

Every time we deployed to any stage — dev, pre, or prod — the pipeline felt like a gamble. Sometimes it would take 20 minutes, sometimes 12, and occasionally our GitLab (on-premises) would crash due to the excessive build duration and if there were other pipelines running.

At the core of our setup was **react-scripts, which under the hood relies on Webpack** — a powerful tool, but one that had grown into a bottleneck for us.

This situation didn’t just affect deployment times. It was slowing down our entire team.

• Long build times delayed our CI pipelines, forcing us to wait minutes just to see if something worked.
• Local development wasn’t much better. Cold starts with npm start were slow, and HMR struggled to respond quickly.
• Even small PRs required patience. Every change triggered a lengthy wait cycle, slowing momentum and killing productivity.

We were losing time, burning compute resources, and increasing dev frustration — all without shipping value faster.

The Shift: Vite + Knip to the Rescue

Step 1: Analyse and optimize with Knip

The first thing I tackled was identifying unused code, components, and dependencies in the project. To do this, I used Knip — a powerful tool that analyzes your codebase and flags anything that’s not being used.

So, let’s get hands-on, simply by running npx knip I was able to see the list of unused files & dependencies of the project, and started deleting all of them (p.s. yes, I did a double-check!).

Terminal output showing 55 unused files & 14 unused dependencies.

Step 2: Swapping Webpack for Vite

After cleaning up the codebase with Knip, it was time to replace react-scripts (which uses Webpack under the hood) with something leaner and faster. Vite was the clear choice — it’s modern, insanely fast, and optimized for frontend frameworks like React.

To get started, I installed Vite and the official Vite React plugin:

npm install --save-dev vite @vitejs/plugin-react

Then I created a vite.config.js file to configure the basics:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig(() => {
  return {
    plugins: [react()],
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'),
      },
    },
    server: {
      port: 3000,
    },
    build: {
      assetsDir: 'static',
      outDir: 'build',
    },
  };
});

Finally, I updated our package.json scripts to replace react-scripts with the vite command.

Scripts of our package.json file.

🎉 That was it, simple set up and no more drama

From there, cold starts and HMR are now occurring instantly and our pipelines currently take less than 2 minutes on average. A huge win too for developer experience.