启动Vite时source map加载失败且页面启动缓慢如何解决？

问题根因 #

启动慢的核心原因是每次启动Vite都会重新预构建ant-design-vue相关依赖，source map加载失败是旧版本Vite预构建时依赖的source map映射路径异常导致的，两个问题可同步解决：

可直接落地的修改步骤 #

• 1. 新增Vite预构建配置，固定预构建依赖范围，避免每次启动重复扫描更新依赖，同时关闭依赖预构建的source map，解决报错
• 2. 修正配置里的base配置项位置，该配置属于全局配置而非server下的子配置，错误的路径配置会触发重复预构建
• 3. 兼容问题修复：你当前使用的ant-design-vue是alpha测试版，Vite为2.5.5旧版本，二者存在大量兼容问题，建议升级到稳定版本：
  • ant-design-vue升级到^3.2.20稳定版
  • vite升级到^2.9.15或3.2.7稳定版
  • unplugin-auto-import、unplugin-vue-components升级到对应适配Vite版本的最新版

修改后的Vite配置参考 #

import { defineConfig } from 'vite'
import {resolve } from 'path'
import pkg from './package.json'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // base移到顶层配置
  base: "./",
  define: {
    PKG: JSON.stringify(pkg.dependencies),
    'process.env': {baseUrl : 'http://192.XXX.XXX:56701'}
  },
  server: {
    port: 3000,
    open: false, 
    proxy: { 
      '/api': {
        target: 'http://192.168.0.188:56701',
        changeOrigin: true,
        ws: true,
        rewrite: path => path.replace(/^\/api/, '')
    }
    }
  },
  plugins: [
    vue(),
    AutoImport({ 
      imports: 'vue',
    }),
    Components({
      dts: true,
      resolvers: [
        AntDesignVueResolver({
          importStyle: 'less',
        }),
      ]
    }),
  ],
  // 新增预构建配置
  optimizeDeps: {
    include: ['ant-design-vue/es', 'ant-design-vue/es/input/style', 'ant-design-vue/es/form/style', 'vuex'],
    sourcemap: false
  },
  resolve: {
    alias: [
      {
        find: "@",
        replacement: resolve(__dirname, 'src')
      }
    ]
  },
  css: {
    postcss: {},
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
})

修改完成后删除node_modules/.vite缓存目录，重新启动项目即可。

内容的提问来源于stack exchange，提问作者w Project