Adding Vite to a current angular v15 project is not working as expected

Question

I started an Angular project using v15 (non SSR), time later I heard about the pros of using Vite so I started a research about how to use Vite in angular projects, not much info, however I found these guides in youtube and medium.

Since my project already exists I just installed Vite by running:

yarn add -D vite

I'm not using bootstrapApplication strategy but bootstrapModule. This is my package.json:

{
  "name": "app-client",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^15.0.0",
    "@angular/common": "^15.0.0",
    "@angular/compiler": "^15.0.0",
    "@angular/core": "^15.0.0",
    "@angular/forms": "^15.0.0",
    "@angular/localize": "^15.0.0",
    "@angular/platform-browser": "^15.0.0",
    "@angular/platform-browser-dynamic": "^15.0.0",
    "@angular/router": "^15.0.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.0.2",
    "@angular/cli": "~15.0.2",
    "@angular/compiler-cli": "^15.0.0",
    "@types/jasmine": "~4.3.0",
    "autoprefixer": "^10.4.14",
    "jasmine-core": "~4.5.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "postcss": "^8.4.22",
    "tailwindcss": "^3.3.1",
    "typescript": "~4.8.2",
    "vite": "^4.3.1"
  }
}{
  "name": "vitalix-client",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^15.0.0",
    "@angular/common": "^15.0.0",
    "@angular/compiler": "^15.0.0",
    "@angular/core": "^15.0.0",
    "@angular/forms": "^15.0.0",
    "@angular/localize": "^15.0.0",
    "@angular/platform-browser": "^15.0.0",
    "@angular/platform-browser-dynamic": "^15.0.0",
    "@angular/router": "^15.0.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.0.2",
    "@angular/cli": "~15.0.2",
    "@angular/compiler-cli": "^15.0.0",
    "@types/jasmine": "~4.3.0",
    "autoprefixer": "^10.4.14",
    "jasmine-core": "~4.5.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "postcss": "^8.4.22",
    "tailwindcss": "^3.3.1",
    "typescript": "~4.8.2",
    "vite": "^4.3.1"
  }
}

I added folowing to tsconfig.json under compilerOptions:

"types": ["vite/client"]

Also, I added vite.config.js to manage the chunks:

import { splitVendorChunkPlugin, defineConfig } from 'vite';
import { dependencies } from './package.json';

function renderChunks(deps) {
  let chunks = {};
  Object.keys(deps).forEach((key) => {
    if ([].includes(key)) return;
    chunks[key] = [key];
  });
  return chunks;
}

export default defineConfig({
    plugins: [splitVendorChunkPlugin()],
    build: {
        sourcemap: false,
        rollupOptions: {
          output: {
            manualChunks: {
              vendor: [],
              ...renderChunks(dependencies),
            },
          },
        },
      },
  })

If I run the app by using yarn dev:

If I run the app by using ng serve:

It's first time I use Vite and I would like to because of performance.

Thanks for any help