将Vite添加到当前angular v15项目中无法按预期工作

我用v15(非SSR)开始了一个Angular项目,后来我听说了使用Vite的好处,所以我开始研究如何在Angular项目中使用Vite,没有太多信息,但我在中找到了这些指南 youtube 和 medium .

由于我的项目已经存在,我只是通过运行安装Vite:

yarn add -D vite

我使用的不是bootstrapApplication策略,而是bootstrapModule。这是我的包.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"
  }
}

我在compilerOptions下向tsconfig.json添加了以下内容:

"types": ["vite/client"]

此外,我添加了vite.config.js来管理块:

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),
            },
          },
        },
      },
  })

如果我使用yarn dev运行应用程序:

如果我使用ng服务运行应用程序:

这是我第一次使用Vite,我想这样做是因为它的性能。

谢谢你的帮助