⚛️ 框架技术 - VITE

What is Vite’s positioning and main advantages? How does it differ from traditional build tools (like webpack)?

考察点：Vite核心概念理解和与传统构建工具的对比。

答案：

Vite 是新一代前端构建工具，由 Vue.js 作者尤雨溪开发。它的核心定位是提供极速的开发体验和现代化的构建能力。Vite 充分利用现代浏览器原生 ES modules 支持，在开发阶段无需打包，直接通过原生 ESM 进行模块加载，从而实现秒级启动。

主要优势：

1. 极速冷启动：开发服务器启动时间从 webpack 的几十秒缩短到几毫秒
2. 即时热更新：HMR 更新速度不受应用规模影响，始终保持快速响应
3. 按需编译：只编译当前页面实际加载的模块，避免无效构建
4. 现代化支持：原生支持 TypeScript、JSX、PostCSS 等现代前端技术

与传统构建工具的关键不同：

• 开发模式：webpack 需要先打包整个应用再启动，Vite 直接使用原生 ESM
• 构建速度：webpack 构建速度随项目增大而变慢，Vite 保持恒定速度
• 生产构建：都使用 Rollup，但 Vite 配置更简洁，优化更智能
• 插件生态：Vite 完全兼容 Rollup 插件，同时提供专属的开发时插件

适用场景：

• Vue 3、React、Svelte 等现代框架项目
• 需要快速开发迭代的中小型项目
• 对开发体验要求较高的团队项目
• 追求现代化技术栈的新项目

Why are Vite’s cold start and Hot Module Replacement (HMR) fast? What is the implementation principle?

考察点：Vite性能优势的底层实现原理。

答案：

Vite 的快速冷启动和热更新是其核心优势，主要得益于充分利用现代浏览器的原生 ES modules 支持和精巧的架构设计。

冷启动快速的原理：

1. 无需打包：开发时直接利用浏览器原生 ESM，跳过打包步骤
2. 按需转换：只转换浏览器请求的文件，避免无效编译
3. 依赖预构建：将 node_modules 中的依赖预先用 esbuild 打包
4. 缓存机制：转换结果会被缓存，二次启动更快

HMR 快速更新的实现原理：

1. 精确更新范围：只更新修改的模块及其直接依赖，不重新编译整个应用
2. ESM 边界保持：利用 ES modules 的导入/导出边界，实现细粒度更新
3. WebSocket 通信：开发服务器与浏览器建立 WebSocket 连接，实时推送更新
4. 状态保持：框架级别的状态保持（如 Vue 的组件状态、React 的 Hook 状态）

技术实现细节：

// HMR API 示例
if (import.meta.hot) {
  import.meta.hot.accept('./component.vue', (newModule) => {
    // 热更新逻辑
    updateComponent(newModule)
  })
}

性能对比：

• 冷启动：webpack (30-60s) vs Vite (< 1s)
• 热更新：webpack (1-5s) vs Vite (< 100ms)
• 构建大小：随项目规模线性增长 vs 保持恒定

What is Vite’s dependency pre-bundling mechanism? What problems does it solve?

考察点：Vite依赖预构建机制的作用和实现。

答案：

依赖预构建是 Vite 在开发阶段对 node_modules 中的第三方依赖进行预处理的机制。Vite 使用 esbuild 将 CommonJS 和 UMD 格式的依赖转换为 ESM 格式，并进行打包优化，存储在 node_modules/.vite 目录中。

预构建的主要作用：

1. 格式统一：将 CommonJS/UMD 依赖转换为 ESM 格式，确保浏览器兼容性
2. 性能优化：将有大量内部模块的包（如 lodash-es）打包成单个模块
3. 缓存加速：预构建结果会被缓存，避免重复转换
4. HTTP 优化：减少模块请求数量，提升加载性能

解决的核心问题：

1. 模块格式兼容性：

// 问题：许多 npm 包仍使用 CommonJS 格式
const lodash = require('lodash') // CommonJS

// 解决：预构建转换为 ESM
import { debounce } from 'lodash-es' // ESM

2. 请求数量过多：

// 问题：某些包有数百个内部模块
import { Button } from 'antd' // 可能触发200+个请求

// 解决：预构建合并为单个文件
// node_modules/.vite/antd.js (合并后的单文件)

配置示例：

// vite.config.js
export default {
  optimizeDeps: {
    include: ['react', 'react-dom'], // 强制预构建
    exclude: ['@my/lib'], // 排除某些包
    esbuildOptions: {
      plugins: [/* 自定义插件 */]
    }
  }
}

触发条件：

• 首次启动项目
• package.json 依赖变更
• 配置文件修改
• 手动删除 .vite 缓存目录

How does Vite support multiple frontend frameworks (like Vue, React)? How is its plugin mechanism designed?

考察点：Vite插件机制和多框架支持的实现原理。

答案：

Vite 通过强大的插件机制实现对多种前端框架的支持。其插件系统基于 Rollup 插件架构，并扩展了开发时特有的钩子函数，使得一套插件可以同时服务于开发和生产环境。

多框架支持实现：

1. 官方框架插件：

// Vue 3 支持
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()]
})

// React 支持  
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()]
})

// Svelte 支持
import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
  plugins: [svelte()]
})

2. 插件机制设计原理：

兼容 Rollup 插件：

• Vite 完全兼容 Rollup 插件生态
• 生产构建时直接使用 Rollup 处理
• 开发时通过兼容层模拟 Rollup 行为

扩展开发时钩子：

// Vite 专属钩子示例
export function myPlugin() {
  return {
    name: 'my-plugin',
    // Rollup 通用钩子
    transform(code, id) {
      // 代码转换逻辑
    },
    // Vite 开发时专用钩子
    handleHotUpdate(ctx) {
      // HMR 处理逻辑
    },
    configureServer(server) {
      // 开发服务器配置
    }
  }
}

3. 插件执行顺序：

export default defineConfig({
  plugins: [
    // pre: 在 Vite 内置插件之前执行
    { ...somePlugin(), enforce: 'pre' },
    
    // 默认: 在 Vite 内置插件之后执行
    vue(),
    react(),
    
    // post: 在所有其他插件之后执行
    { ...anotherPlugin(), enforce: 'post' }
  ]
})

4. 条件应用：

export default defineConfig({
  plugins: [
    vue(),
    // 仅在开发环境应用
    process.env.NODE_ENV === 'development' && mockPlugin(),
    // 仅在构建时应用  
    process.env.NODE_ENV === 'production' && bundleAnalyzer()
  ].filter(Boolean)
})

插件生态优势：

• 与 Rollup 插件完全兼容
• 官方提供主流框架插件
• 社区活跃，插件丰富
• 开发和构建使用相同插件

What are the common configurations in Vite’s configuration file vite.config.js? Give examples.

考察点：Vite配置文件的常用选项和实际应用。

答案：

vite.config.js 是 Vite 项目的核心配置文件，支持丰富的配置选项来满足不同项目需求。以下是最常用的配置项及其应用场景。

完整配置示例：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  // 插件配置
  plugins: [vue()],
  
  // 路径别名
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
      '@/components': resolve(__dirname, 'src/components'),
      '@/utils': resolve(__dirname, 'src/utils')
    }
  },
  
  // 开发服务器配置
  server: {
    port: 3000,
    host: true, // 监听所有地址
    open: true, // 自动打开浏览器
    cors: true, // 启用 CORS
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
  
  // 构建配置
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    sourcemap: true,
    minify: 'esbuild', // 'terser' | 'esbuild'
    target: 'esnext',
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        admin: resolve(__dirname, 'admin.html')
      },
      output: {
        chunkFileNames: 'js/[name]-[hash].js',
        entryFileNames: 'js/[name]-[hash].js',
        assetFileNames: 'assets/[name]-[hash].[ext]'
      }
    }
  },
  
  // CSS 配置
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`
      }
    },
    postcss: {
      plugins: [
        require('autoprefixer')
      ]
    }
  },
  
  // 依赖优化
  optimizeDeps: {
    include: ['lodash-es', 'axios'],
    exclude: ['@my/lib']
  },
  
  // 环境变量
  define: {
    __APP_VERSION__: JSON.stringify('1.0.0')
  }
})

常用配置分类：

1. 开发配置：

server: {
  port: 3000,
  proxy: {
    '/api': 'http://localhost:8080'
  }
}

2. 路径配置：

resolve: {
  alias: {
    '@': resolve(__dirname, 'src')
  }
}

3. 构建优化：

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        vendor: ['vue', 'vue-router'],
        utils: ['lodash-es', 'axios']
      }
    }
  }
}

4. 环境区分配置：

export default defineConfig(({ command, mode }) => {
  const config = {
    plugins: [vue()]
  }
  
  if (command === 'serve') {
    // 开发环境配置
    config.server = { port: 3000 }
  } else {
    // 构建环境配置  
    config.build = { minify: 'terser' }
  }
  
  return config
})

How to use environment variables in Vite projects? What is the purpose of the VITE_ prefix?

考察点：Vite环境变量机制和安全性考虑。

答案：

Vite 提供了灵活的环境变量机制，支持在不同环境下使用不同的配置值。VITE_ 前缀是 Vite 的安全机制，确保只有明确标记的变量才会暴露给客户端代码。

环境变量文件：

# .env                 所有环境加载
# .env.local           所有环境加载，git 忽略
# .env.development     开发环境
# .env.production      生产环境
# .env.test            测试环境

环境变量示例：

# .env.development
VITE_API_BASE_URL=http://localhost:8080/api
VITE_APP_TITLE=My App (Dev)
VITE_ENABLE_MOCK=true

# .env.production  
VITE_API_BASE_URL=https://api.myapp.com
VITE_APP_TITLE=My App
VITE_ENABLE_MOCK=false

# 服务端变量（不会暴露给客户端）
DB_PASSWORD=secret123
JWT_SECRET=mysecret

在代码中使用：

// 在 TypeScript 中使用
console.log(import.meta.env.VITE_API_BASE_URL)
console.log(import.meta.env.VITE_APP_TITLE)

// 内置环境变量
console.log(import.meta.env.MODE) // 'development' | 'production'
console.log(import.meta.env.BASE_URL) // 公共基础路径
console.log(import.meta.env.PROD) // boolean
console.log(import.meta.env.DEV) // boolean

// 类型安全（需要声明）
interface ImportMetaEnv {
  readonly VITE_API_BASE_URL: string
  readonly VITE_APP_TITLE: string
  readonly VITE_ENABLE_MOCK: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

VITE_ 前缀的作用：

1. 安全性保护：

# ✅ 会暴露给客户端（安全）
VITE_PUBLIC_KEY=pk_test_123

# ❌ 不会暴露给客户端（安全）
DATABASE_URL=mysql://user:pass@localhost/db
API_SECRET=secret_key_123

2. 明确性标识：

• 明确表示该变量会被打包到客户端代码中
• 避免意外泄露敏感信息
• 提高代码可读性和维护性

高级配置：

// vite.config.js
export default defineConfig({
  // 自定义环境变量前缀
  envPrefix: ['VITE_', 'APP_'],
  
  // 在构建时替换变量
  define: {
    __APP_VERSION__: JSON.stringify(process.env.npm_package_version),
    __BUILD_TIME__: JSON.stringify(new Date().toISOString())
  },
  
  // 加载额外的环境变量文件
  envDir: 'config/env'
})

实际应用场景：

// 根据环境使用不同配置
const apiClient = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
  timeout: import.meta.env.VITE_REQUEST_TIMEOUT || 5000
})

// 条件性功能开关
if (import.meta.env.VITE_ENABLE_MOCK === 'true') {
  enableMockServer()
}

// 环境标识
document.title = import.meta.env.VITE_APP_TITLE

How does Vite implement on-demand loading and code splitting?

考察点：Vite代码分割策略和性能优化技术。

答案：

Vite 通过 Rollup 的强大打包能力和 ES modules 的原生支持，提供了多种代码分割和按需加载的实现方式，有效减少初始加载时间和提升应用性能。

主要实现方式：

1. 动态导入（Dynamic Import）：

// 路由级别的代码分割
const Home = () => import('./views/Home.vue')
const About = () => import('./views/About.vue')
const Admin = () => import('./views/Admin.vue')

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/admin', component: Admin }
]

// 组件级别的按需加载
async function loadComponent() {
  const { default: MyComponent } = await import('./MyComponent.vue')
  return MyComponent
}

// 工具库按需加载
async function loadUtils() {
  const { debounce, throttle } = await import('lodash-es')
  return { debounce, throttle }
}

2. 手动代码分块配置：

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          // 将第三方库分离
          vendor: ['vue', 'vue-router', 'pinia'],
          ui: ['element-plus', '@element-plus/icons-vue'],
          utils: ['lodash-es', 'axios', 'dayjs'],
          
          // 或者使用函数形式
          manualChunks(id) {
            // 将 node_modules 中的包分离到 vendor 块
            if (id.includes('node_modules')) {
              if (id.includes('element-plus')) {
                return 'element-plus'
              }
              if (id.includes('vue')) {
                return 'vue'
              }
              return 'vendor'
            }
          }
        }
      }
    }
  }
})

3. 自动代码分割：

// Vite 自动识别的分割点

// 异步组件
const AsyncComponent = defineAsyncComponent(() => import('./Heavy.vue'))

// 条件加载
if (userRole === 'admin') {
  const adminModule = await import('./admin/index.js')
  adminModule.initAdmin()
}

// Intersection Observer 懒加载
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      import('./LazyComponent.vue').then(module => {
        // 渲染组件
      })
    }
  })
})

4. 预加载优化：

// 预加载关键路由
router.beforeEach((to, from, next) => {
  // 预加载可能访问的路由
  if (to.path === '/') {
    import('./views/Dashboard.vue') // 预加载
  }
  next()
})

// Link 预加载
const prefetchComponent = () => {
  const link = document.createElement('link')
  link.rel = 'prefetch'
  link.href = '/assets/About-xxx.js'
  document.head.appendChild(link)
}

分割策略最佳实践：

1. 基于路由分割：

// 每个主要页面独立分块
const routes = [
  {
    path: '/dashboard',
    component: () => import('./pages/Dashboard.vue')
  },
  {
    path: '/settings', 
    component: () => import('./pages/Settings.vue')
  }
]

2. 基于功能模块分割：

// 编辑器模块（较大）
const loadEditor = () => import('./modules/editor/index.js')

// 图表模块  
const loadCharts = () => import('./modules/charts/index.js')

// 支付模块
const loadPayment = () => import('./modules/payment/index.js')

3. 基于用户权限分割：

// 管理员功能
if (hasPermission('admin')) {
  const adminTools = await import('./admin-tools/index.js')
}

// VIP 功能
if (userLevel >= 'vip') {
  const vipFeatures = await import('./vip-features/index.js')
}

性能效果：

• 初始包体积减少 60-80%
• 首屏加载时间缩短 40-60%
• 后续页面访问实现秒开
• 缓存命中率显著提升

How does Vite’s production build process differ from the development environment?

考察点：Vite开发和生产环境的架构差异。

答案：

Vite 在开发环境和生产环境采用了完全不同的架构策略，充分发挥各自优势：开发环境追求极速响应，生产环境追求最优性能和兼容性。

开发环境特点：

1. 架构基础：

• 基于原生 ES modules，无需打包
• 使用 esbuild 进行代码转换（速度极快）
• 按需编译，只处理浏览器请求的文件
• 建立 WebSocket 连接实现 HMR

2. 处理流程：

浏览器请求 → Vite Dev Server → esbuild 转换 → 返回 ES 模块

3. 关键技术：

// 开发环境示例
// main.js
import { createApp } from 'vue'
import App from './App.vue'

// 浏览器直接请求这些模块，无需打包
createApp(App).mount('#app')

生产环境特点：

1. 架构基础：

• 基于 Rollup 进行完整打包
• 使用 esbuild/Terser 进行代码压缩
• 实现代码分割、Tree-shaking 等优化
• 生成优化后的静态资源

2. 构建流程：

源代码 → Rollup 分析 → 代码分割 → 压缩混淆 → 输出静态文件

核心差异对比：

1. 模块处理方式：

// 开发环境：直接转换
import App from './App.vue' 
// → http://localhost:3000/src/App.vue (实时转换)

// 生产环境：打包合并
import App from './App.vue'
// → 打包到 /assets/index-abc123.js

2. 代码转换工具：

// 开发环境：esbuild（极快）
{
  esbuild: {
    target: 'esnext'
  }
}

// 生产环境：Rollup + esbuild/Terser（优化）
{
  build: {
    minify: 'esbuild', // 或 'terser'
    target: 'es2015'
  }
}

3. 资源处理策略：

// 开发环境配置
{
  server: {
    port: 3000,
    hot: true // HMR 开启
  }
}

// 生产环境配置
{
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    rollupOptions: {
      output: {
        chunkFileNames: '[name]-[hash].js',
        assetFileNames: 'assets/[name]-[hash].[ext]'
      }
    }
  }
}

4. 性能优化差异：

开发环境优化：

• 依赖预构建缓存
• 文件系统缓存
• HMR 增量更新
• 源码映射支持

生产环境优化：

• Tree-shaking 死代码消除
• 代码分割和懒加载
• 资源压缩和混淆
• Gzip/Brotli 压缩

5. 兼容性处理：

// 开发环境：现代浏览器特性
// 直接使用 ES2020+ 语法

// 生产环境：广泛兼容性
{
  build: {
    target: 'es2015', // 兼容更多浏览器
    polyfills: true,
    cssTarget: 'chrome61'
  }
}

切换命令：

# 开发环境
npm run dev    # vite
# 启动开发服务器，使用 esbuild + HMR

# 生产构建  
npm run build  # vite build
# 使用 Rollup 打包，输出到 dist 目录

# 预览生产构建
npm run preview # vite preview
# 本地预览生产构建结果

最佳实践：

• 开发时充分利用 HMR 和快速启动
• 生产构建前本地预览验证
• 根据目标浏览器配置合适的 target
• 合理配置代码分割策略

How to customize plugins in Vite? What are the lifecycle hooks of plugins?

考察点：Vite插件开发机制和钩子函数应用。

答案：

Vite 插件基于 Rollup 插件架构，并扩展了开发时特有的钩子。插件本质上是一个返回插件对象的函数，通过不同的生命周期钩子来处理文件转换、资源处理等任务。

基础插件结构：

// 简单插件示例
function myPlugin(options = {}) {
  return {
    name: 'my-plugin', // 插件名称（必需）
    
    // 插件配置钩子
    config(config, { command }) {
      // 修改配置
      if (command === 'serve') {
        config.server = config.server || {}
        config.server.port = options.port || 3000
      }
    },
    
    // 文件转换钩子
    transform(code, id) {
      if (id.endsWith('.special')) {
        return `export default ${JSON.stringify(code)}`
      }
    }
  }
}

// 使用插件
export default defineConfig({
  plugins: [
    myPlugin({ port: 4000 })
  ]
})

完整生命周期钩子：

1. 通用钩子（Rollup 兼容）：

function advancedPlugin() {
  return {
    name: 'advanced-plugin',
    
    // 构建开始
    buildStart(opts) {
      console.log('构建开始')
    },
    
    // 解析模块 ID
    resolveId(id, importer) {
      if (id === 'virtual:my-module') {
        return id
      }
    },
    
    // 加载模块
    load(id) {
      if (id === 'virtual:my-module') {
        return 'export const msg = "Hello from virtual module"'
      }
    },
    
    // 转换代码
    transform(code, id) {
      if (id.includes('?inline')) {
        return `export default ${JSON.stringify(code)}`
      }
    },
    
    // 生成 bundle
    generateBundle(options, bundle) {
      // 处理生成的 bundle
      console.log('生成的文件:', Object.keys(bundle))
    },
    
    // 构建结束
    buildEnd(error) {
      if (error) {
        console.error('构建失败:', error)
      }
    }
  }
}

2. Vite 专属钩子：

function viteSpecificPlugin() {
  return {
    name: 'vite-specific',
    
    // 配置解析完成
    configResolved(resolvedConfig) {
      this.isProduction = resolvedConfig.command === 'build'
    },
    
    // 配置开发服务器
    configureServer(server) {
      server.middlewares.use('/api', (req, res, next) => {
        // 自定义中间件
        res.setHeader('Access-Control-Allow-Origin', '*')
        next()
      })
    },
    
    // 配置预览服务器
    configurePreviewServer(server) {
      // 配置预览服务器
    },
    
    // 处理 HMR 更新
    handleHotUpdate(ctx) {
      if (ctx.file.endsWith('.special')) {
        // 自定义热更新逻辑
        ctx.server.ws.send({
          type: 'full-reload'
        })
        return []
      }
    }
  }
}

实用插件示例：

1. 自动导入插件：

function autoImportPlugin() {
  return {
    name: 'auto-import',
    transform(code, id) {
      if (id.endsWith('.vue')) {
        // 自动注入 import 语句
        const autoImports = [
          "import { ref, reactive, computed } from 'vue'",
          "import { useRouter } from 'vue-router'"
        ].join('\n')
        
        return `${autoImports}\n${code}`
      }
    }
  }
}

2. 环境变量注入插件：

function envInjectPlugin() {
  return {
    name: 'env-inject',
    config(config, { mode }) {
      const env = loadEnv(mode, process.cwd(), '')
      
      config.define = config.define || {}
      config.define.__BUILD_TIME__ = JSON.stringify(new Date().toISOString())
      config.define.__GIT_COMMIT__ = JSON.stringify(process.env.GIT_COMMIT || 'unknown')
    }
  }
}

3. 文件监听插件：

function fileWatchPlugin() {
  return {
    name: 'file-watch',
    configureServer(server) {
      // 监听特定文件变化
      const chokidar = require('chokidar')
      const watcher = chokidar.watch('./config/**/*.json')
      
      watcher.on('change', (path) => {
        console.log(`配置文件变更: ${path}`)
        server.ws.send({
          type: 'full-reload'
        })
      })
    }
  }
}

插件执行顺序控制：

export default defineConfig({
  plugins: [
    // 在 Vite 内部插件之前执行
    { ...earlyPlugin(), enforce: 'pre' },
    
    // 正常执行顺序
    vue(),
    
    // 在所有插件之后执行
    { ...latePlugin(), enforce: 'post' },
    
    // 条件应用插件
    ...(process.env.NODE_ENV === 'development' ? [mockPlugin()] : [])
  ]
})

插件开发最佳实践：

• 插件名称使用清晰的命名约定
• 合理使用钩子，避免不必要的性能开销
• 提供详细的错误信息和调试日志
• 支持选项配置，提高插件灵活性
• 兼容开发和构建两种模式

How does Vite integrate with frontend technologies like TypeScript, PostCSS, Sass, etc.?

考察点：Vite与主流前端技术栈的集成方案。

答案：

Vite 提供了开箱即用的现代前端技术栈支持，通过内置插件和配置实现无缝集成，大幅降低了项目配置复杂度。

TypeScript 集成：

1. 原生支持（无需额外配置）：

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

export default defineConfig({
  plugins: [vue()],
  // TypeScript 自动支持，无需额外配置
})

2. 类型检查配置：

// 开发时类型检查
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import checker from 'vite-plugin-checker'

export default defineConfig({
  plugins: [
    vue(),
    checker({
      typescript: true,
      vueTsc: true, // Vue 3 类型检查
      eslint: {
        lintCommand: 'eslint "./src/**/*.{ts,tsx,vue}"'
      }
    })
  ]
})

CSS 预处理器集成：

1. Sass/SCSS 支持：

# 安装依赖
npm install -D sass

# 直接使用，无需额外配置

<!-- Vue 组件中使用 -->
<style lang="scss">
$primary-color: #007acc;

.component {
  color: $primary-color;
  
  &:hover {
    opacity: 0.8;
  }
}
</style>

2. 全局 Sass 变量：

// vite.config.js
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @import "@/styles/variables.scss";
          @import "@/styles/mixins.scss";
        `
      }
    }
  }
})

PostCSS 集成：

1. 自动检测配置：

// postcss.config.js
export default {
  plugins: {
    autoprefixer: {},
    'postcss-nested': {},
    'tailwindcss': {},
    'postcss-preset-env': {
      stage: 1,
      features: {
        'nesting-rules': true
      }
    }
  }
}

2. Vite 配置中直接配置：

// vite.config.js
export default defineConfig({
  css: {
    postcss: {
      plugins: [
        require('autoprefixer'),
        require('postcss-nested'),
        require('tailwindcss')
      ]
    }
  }
})

Less 支持：

# 安装 Less
npm install -D less

// vite.config.js
export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          'primary-color': '#1DA57A',
        },
        javascriptEnabled: true,
      }
    }
  }
})

CSS Modules 集成：

// vite.config.js
export default defineConfig({
  css: {
    modules: {
      // 自定义类名生成规则
      generateScopedName: '[name]__[local]___[hash:base64:5]',
      
      // 或者使用函数
      generateScopedName: (name, filename, css) => {
        return `${path.basename(filename, '.module.css')}_${name}`
      }
    }
  }
})

<!-- Vue 组件使用 CSS Modules -->
<template>
  <div :class="$style.container">
    <h1 :class="$style.title">Hello</h1>
  </div>
</template>

<style module>
.container {
  padding: 20px;
}
.title {
  color: blue;
}
</style>

Tailwind CSS 集成：

# 安装 Tailwind
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

// tailwind.config.js
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

JSX/TSX 支持：

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// 或者
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [
    react(), // React JSX 支持
    // 或者
    vue(),
    vueJsx() // Vue JSX 支持
  ]
})

集成优势：

• 零配置开始：主流技术栈开箱即用
• 热更新支持：所有集成技术都支持 HMR
• 类型安全：完整的 TypeScript 支持
• 性能优化：esbuild 提供极速编译
• 灵活配置：满足复杂项目定制需求

实际项目配置示例：

// 完整的现代化前端技术栈配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`
      }
    },
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer')
      ]
    }
  }
})

How is Vite’s SSR support implemented? What are the differences from Nuxt and Next?

考察点：Vite SSR机制和与其他框架的架构对比。

答案：

Vite 提供了底层 SSR API 支持，允许开发者构建自定义的服务端渲染解决方案。与 Nuxt、Next 等框架级方案相比，Vite 更专注于构建工具层面的支持。

Vite SSR 实现方式：

1. 基础 SSR 设置：

// server.js - Node.js 服务器
import fs from 'fs'
import path from 'path'
import { fileURLToPath } from 'url'
import express from 'express'
import { createServer as createViteServer } from 'vite'

const __dirname = path.dirname(fileURLToPath(import.meta.url))

async function createServer() {
  const app = express()

  // 开发模式下创建 Vite 服务器
  const vite = await createViteServer({
    server: { middlewareMode: true },
    appType: 'custom'
  })
  
  app.use(vite.ssrLoadModule)

  app.use('*', async (req, res) => {
    try {
      const url = req.originalUrl

      let template = fs.readFileSync(
        path.resolve(__dirname, 'index.html'),
        'utf-8'
      )
      
      // 应用 Vite HTML 转换
      template = await vite.transformIndexHtml(url, template)
      
      // 加载服务端入口
      const { render } = await vite.ssrLoadModule('/src/entry-server.js')
      
      // 渲染应用
      const appHtml = await render(url)
      
      // 注入渲染结果
      const html = template.replace('<!--ssr-outlet-->', appHtml)
      
      res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
    } catch (e) {
      vite.ssrFixStacktrace(e)
      console.error(e)
      res.status(500).end(e.message)
    }
  })

  app.listen(3000)
}

createServer()

2. 应用入口配置：

// entry-client.js - 客户端入口
import { createApp } from './main'
const { app, router } = createApp()

router.isReady().then(() => {
  app.mount('#app')
})

// entry-server.js - 服务端入口
import { createApp } from './main'
import { renderToString } from '@vue/server-renderer'

export async function render(url) {
  const { app, router } = createApp()
  
  await router.push(url)
  await router.isReady()
  
  return await renderToString(app)
}

3. 构建配置：

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        client: 'src/entry-client.js',
        server: 'src/entry-server.js'
      }
    },
    ssr: true // 启用 SSR 构建
  },
  ssr: {
    noExternal: ['some-package'] // 不外部化的包
  }
})

与 Nuxt/Next 的区别：

架构层面：

功能对比：

1. 路由处理：

// Vite - 手动配置路由
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

// Nuxt - 文件系统路由
// pages/index.vue → '/'
// pages/about.vue → '/about'

// Next.js - 文件系统路由  
// pages/index.js → '/'
// pages/about.js → '/about'

2. 数据获取：

// Vite - 自定义实现
export async function render(url, manifest) {
  const data = await fetchData(url)
  return { html: renderApp(data), preloadLinks: '' }
}

// Nuxt - 内置 API
export default {
  async asyncData({ params }) {
    return await $fetch(`/api/posts/${params.id}`)
  }
}

// Next.js - 内置 API
export async function getServerSideProps(context) {
  const data = await fetchData(context.params.id)
  return { props: { data } }
}

优势对比：

Vite SSR 优势：

• 灵活性高：完全自定义 SSR 架构
• 框架无关：支持 Vue、React、Svelte 等
• 性能卓越：极快的开发体验
• 轻量级：只提供必需的 SSR 能力

Nuxt/Next 优势：

• 开箱即用：提供完整的 SSR 解决方案
• 生态丰富：大量现成的模块和插件
• 约定明确：减少配置决策成本
• 生产就绪：内置性能优化和最佳实践

适用场景：

选择 Vite SSR：

• 需要高度定制的 SSR 方案
• 多框架支持需求
• 已有复杂的后端架构
• 对构建性能要求极高

选择 Nuxt/Next：

• 快速构建标准 SSR 应用
• 团队对框架熟悉度高
• 需要完整的全栈解决方案
• 优先考虑开发效率

实际应用建议：

• 新项目优先考虑 Nuxt 3 或 Next.js
• 现有项目迁移可考虑 Vite SSR
• 复杂企业应用可基于 Vite 构建定制方案

How does Vite handle static assets (images, SVG, fonts, etc.)?

考察点：Vite静态资源处理策略和优化方案。

答案：

Vite 提供了智能的静态资源处理机制，根据文件大小、类型和引用方式自动选择最优的处理策略，同时支持多种导入方式来满足不同的使用场景。

静态资源处理策略：

1. 自动判断处理方式：

// 小于 4KB 的资源会被内联为 base64
import smallIcon from './icon-small.png' // → data:image/png;base64,...

// 大于 4KB 的资源会被复制到输出目录并返回 URL
import largeImage from './hero-image.jpg' // → /assets/hero-image.a8b9c123.jpg

// 可通过配置修改阈值
export default defineConfig({
  build: {
    assetsInlineLimit: 8192 // 8KB 以下内联
  }
})

2. 显式资源导入：

// 强制导入为 URL（不内联）
import imageUrl from './image.png?url'

// 强制导入为字符串
import imageRaw from './image.svg?raw'

// 导入为 Web Workers
import MyWorker from './worker.js?worker'

// 导入为内联 Web Workers
import InlineWorker from './worker.js?worker&inline'

图片资源处理：

1. 基础用法：

<template>
  <!-- 直接引用 public 目录下的资源 -->
  <img src="/logo.png" alt="Logo" />
  
  <!-- 通过 import 引用 src 目录下的资源 -->
  <img :src="heroImage" alt="Hero" />
</template>

<script setup>
import heroImage from '@/assets/hero.jpg'
</script>

2. 响应式图片：

// 多尺寸图片处理
import hero1x from './[email protected]'
import hero2x from './[email protected]'
import hero3x from './[email protected]'

const heroSrcSet = `
  ${hero1x} 1x,
  ${hero2x} 2x,
  ${hero3x} 3x
`

SVG 资源处理：

1. 多种导入方式：

// 作为 URL 导入
import iconUrl from './icon.svg'

// 作为字符串导入（用于内联）
import iconSvg from './icon.svg?raw'

// 作为 Vue 组件导入（需插件支持）
import IconComponent from './icon.svg?component'

2. SVG 优化配置：

// vite.config.js
import { defineConfig } from 'vite'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

export default defineConfig({
  plugins: [
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      symbolId: 'icon-[dir]-[name]',
      customDomId: '__svg__icons__dom__'
    })
  ]
})

字体资源处理：

1. 字体文件导入：

/* CSS 中使用字体 */
@font-face {
  font-family: 'MyFont';
  src: url('./assets/fonts/MyFont.woff2') format('woff2'),
       url('./assets/fonts/MyFont.woff') format('woff');
  font-display: swap;
}

/* 或者从 node_modules 导入 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

2. 动态字体加载：

// 动态加载字体
async function loadFont() {
  const font = new FontFace(
    'MyFont',
    `url(${await import('./assets/fonts/MyFont.woff2')})`
  )
  await font.load()
  document.fonts.add(font)
}

Public 目录处理：

1. 静态资源放置：

public/
├── favicon.ico          # 直接访问：/favicon.ico
├── robots.txt          # 直接访问：/robots.txt  
├── images/
│   └── logo.png        # 直接访问：/images/logo.png
└── fonts/
    └── custom.woff2    # 直接访问：/fonts/custom.woff2

2. 动态 public 资源：

// 动态构建 public 资源路径
function getPublicPath(path) {
  return new URL(path, import.meta.url).href
}

// 在组件中使用
const logoPath = getPublicPath('/images/logo.png')

资源优化配置：

1. 输出目录结构：

export default defineConfig({
  build: {
    assetsDir: 'static', // 静态资源输出目录
    rollupOptions: {
      output: {
        assetFileNames: (assetInfo) => {
          const info = assetInfo.name.split('.')
          const ext = info[info.length - 1]
          
          if (/\.(png|jpe?g|gif|svg|webp|ico)$/i.test(assetInfo.name)) {
            return `images/[name]-[hash][extname]`
          }
          if (/\.(woff2?|eot|ttf|otf)$/i.test(assetInfo.name)) {
            return `fonts/[name]-[hash][extname]`
          }
          return `assets/[name]-[hash][extname]`
        }
      }
    }
  }
})

2. CDN 配置：

export default defineConfig({
  base: process.env.NODE_ENV === 'production' 
    ? 'https://cdn.example.com/' 
    : '/',
    
  experimental: {
    renderBuiltUrl(filename, { hostType }) {
      if (hostType === 'js') {
        return `https://cdn.example.com/${filename}`
      }
      return { relative: true }
    }
  }
})

性能优化建议：

• 小图标使用内联 base64，减少 HTTP 请求
• 大图片使用 URL 引用，启用浏览器缓存
• 使用现代图片格式（WebP、AVIF）
• 配置合适的 CDN 加速静态资源加载
• 使用 HTTP/2 Push 预加载关键资源

How to configure Vite for Multi-Page Applications (MPA)?

考察点：Vite多页面应用的配置和项目结构设计。

答案：

Vite 原生支持多页面应用（MPA）配置，通过 build.rollupOptions.input 指定多个入口点，每个页面可以有独立的 HTML、JS 和 CSS，适合构建传统的多页面网站或微前端应用。

基础 MPA 配置：

1. 项目结构：

project/
├── index.html           # 主页
├── admin.html          # 管理后台页面
├── mobile.html         # 移动端页面
├── src/
│   ├── main/
│   │   ├── main.js     # 主页入口
│   │   └── App.vue
│   ├── admin/
│   │   ├── main.js     # 后台入口
│   │   └── Admin.vue
│   └── mobile/
│       ├── main.js     # 移动端入口
│       └── Mobile.vue
└── vite.config.js

2. Vite 配置：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  
  build: {
    rollupOptions: {
      input: {
        // 定义多个入口点
        main: resolve(__dirname, 'index.html'),
        admin: resolve(__dirname, 'admin.html'),
        mobile: resolve(__dirname, 'mobile.html')
      },
      
      output: {
        // 自定义输出文件名规则
        chunkFileNames: 'js/[name]-[hash].js',
        entryFileNames: 'js/[name]-[hash].js',
        assetFileNames: 'assets/[name]-[hash].[ext]'
      }
    }
  },
  
  // 开发服务器配置
  server: {
    open: '/index.html' // 默认打开的页面
  }
})

3. HTML 页面配置：

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>主页 - My App</title>
  <meta charset="UTF-8" />
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main/main.js"></script>
</body>
</html>

<!-- admin.html -->
<!DOCTYPE html>
<html>
<head>
  <title>管理后台 - My App</title>
  <meta charset="UTF-8" />
</head>
<body>
  <div id="admin-app"></div>
  <script type="module" src="/src/admin/main.js"></script>
</body>
</html>

高级 MPA 配置：

1. 共享代码和样式：

// src/shared/utils.js - 共享工具
export const formatDate = (date) => {
  return new Intl.DateTimeFormat('zh-CN').format(date)
}

// src/shared/styles/common.scss - 共享样式
$primary-color: #007acc;
$font-size-base: 14px;

.btn {
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  background: $primary-color;
  color: white;
  cursor: pointer;
}

2. 环境差异化配置：

// vite.config.js
export default defineConfig(({ mode }) => {
  const config = {
    plugins: [vue()],
    build: {
      rollupOptions: {
        input: {
          main: resolve(__dirname, 'index.html'),
          admin: resolve(__dirname, 'admin.html')
        }
      }
    }
  }
  
  if (mode === 'development') {
    // 开发环境特殊配置
    config.define = {
      __ENABLE_MOCK__: 'true'
    }
  }
  
  if (mode === 'production') {
    // 生产环境代码分割优化
    config.build.rollupOptions.output = {
      manualChunks: {
        vue: ['vue', 'vue-router'],
        vendor: ['axios', 'lodash-es'],
        ui: ['element-plus']
      }
    }
  }
  
  return config
})

页面间共享依赖优化：

1. 共享 Chunk 配置：

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: (id) => {
          // Vue 相关包分离到 vue chunk
          if (id.includes('vue')) {
            return 'vue'
          }
          
          // 工具库分离到 vendor chunk
          if (id.includes('lodash') || id.includes('axios')) {
            return 'vendor'
          }
          
          // UI 库分离
          if (id.includes('element-plus')) {
            return 'element-plus'
          }
          
          // 共享业务代码
          if (id.includes('src/shared')) {
            return 'shared'
          }
        }
      }
    }
  }
})

2. 预加载优化：

<!-- 在各页面中预加载共享资源 -->
<head>
  <link rel="preload" href="/assets/vue-[hash].js" as="script">
  <link rel="preload" href="/assets/vendor-[hash].js" as="script">
  <link rel="prefetch" href="/assets/shared-[hash].js" as="script">
</head>

开发时页面切换：

1. 开发服务器中间件：

// vite.config.js
export default defineConfig({
  plugins: [
    vue(),
    {
      name: 'mpa-dev-middleware',
      configureServer(server) {
        server.middlewares.use('/pages', (req, res, next) => {
          // 提供页面切换导航
          res.end(`
            <h2>开发页面导航</h2>
            <ul>
              <li><a href="/">主页</a></li>
              <li><a href="/admin.html">管理后台</a></li>
              <li><a href="/mobile.html">移动端</a></li>
            </ul>
          `)
        })
      }
    }
  ]
})

构建产物结构：

dist/
├── index.html
├── admin.html
├── mobile.html
├── js/
│   ├── main-a1b2c3.js      # 主页入口
│   ├── admin-d4e5f6.js     # 后台入口
│   ├── mobile-g7h8i9.js    # 移动端入口
│   ├── vue-j1k2l3.js       # Vue 共享 chunk
│   ├── vendor-m4n5o6.js    # 工具库 chunk
│   └── shared-p7q8r9.js    # 业务共享 chunk
└── assets/
    ├── main-s1t2u3.css
    ├── admin-v4w5x6.css
    └── images/

适用场景：

• 传统企业网站：官网、产品页、关于我们等独立页面
• 后台管理系统：用户端和管理端分离
• 移动适配：桌面版和移动版独立页面
• 微前端：多个独立应用的构建基础

最佳实践：

• 合理规划页面间的代码共享
• 使用 manualChunks 优化加载性能
• 配置合适的预加载策略
• 保持各页面的独立性和可维护性

What Vite-related issues have you encountered in real projects? How did you solve them?

考察点：Vite实际使用中的常见问题和解决方案。

答案：

在实际项目开发中，Vite 虽然提供了优秀的开发体验，但仍会遇到一些特定场景下的问题。以下是常见问题及其解决方案。

常见问题及解决方案：

1. 依赖预构建问题：

// 问题：某些包无法正确预构建，导致开发时报错
// 错误信息：The following dependencies are imported but could not be resolved

// 解决方案：
export default defineConfig({
  optimizeDeps: {
    // 强制预构建特定依赖
    include: [
      'element-plus/lib/locale/lang/zh-cn',
      'dayjs/plugin/customParseFormat'
    ],
    // 排除有问题的包
    exclude: ['@my/problematic-package']
  }
})

2. 环境变量在不同环境下的问题：

// 问题：生产环境下环境变量未正确加载

// 解决方案：检查变量前缀和文件命名
// .env.production
VITE_API_URL=https://api.production.com

// 确保在 vite.config.js 中正确处理
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '')
  
  return {
    define: {
      // 手动注入环境变量
      __APP_ENV__: JSON.stringify(env.VITE_API_URL)
    }
  }
})

3. 第三方库 CommonJS 兼容性问题：

// 问题：某些 npm 包使用 CommonJS，导致构建失败
// 错误：require is not defined

// 解决方案1：配置 SSR 外部化
export default defineConfig({
  ssr: {
    noExternal: ['problematic-package']
  }
})

// 解决方案2：使用 ESM 版本或 polyfill
export default defineConfig({
  define: {
    global: 'globalThis'
  },
  optimizeDeps: {
    include: ['buffer', 'process']
  }
})

4. 动态导入路径问题：

// 问题：动态导入使用变量路径时构建失败
// 错误的写法
const moduleName = 'MyModule'
import(`./modules/${moduleName}.vue`) // ❌ Vite 无法分析

// 解决方案：使用 Glob 导入
const modules = import.meta.glob('./modules/*.vue')
const component = await modules[`./modules/${moduleName}.vue`]()

// 或者使用显式路径映射
const moduleMap = {
  MyModule: () => import('./modules/MyModule.vue'),
  OtherModule: () => import('./modules/OtherModule.vue')
}
const component = await moduleMap[moduleName]()

5. 开发服务器代理问题：

// 问题：复杂的 API 代理配置不生效

// 解决方案：详细配置代理规则
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
        configure: (proxy, options) => {
          proxy.on('error', (err, req, res) => {
            console.log('proxy error', err)
          })
          proxy.on('proxyReq', (proxyReq, req, res) => {
            console.log('Sending Request:', req.method, req.url)
          })
        }
      },
      // WebSocket 代理
      '/ws': {
        target: 'ws://localhost:8080',
        ws: true
      }
    }
  }
})

6. 生产构建体积优化：

// 问题：构建产物体积过大

// 解决方案：分析和优化
export default defineConfig({
  build: {
    // 启用 gzip 压缩报告
    reportCompressedSize: true,
    
    rollupOptions: {
      output: {
        // 细化 chunk 分割
        manualChunks: (id) => {
          if (id.includes('node_modules')) {
            if (id.includes('vue')) return 'vue'
            if (id.includes('element-plus')) return 'ui'
            if (id.includes('lodash')) return 'utils'
            return 'vendor'
          }
        }
      }
    }
  },
  
  // 使用 Bundle Analyzer 插件
  plugins: [
    process.env.ANALYZE && bundleAnalyzer()
  ].filter(Boolean)
})

7. CSS 样式隔离问题：

// 问题：全局样式污染和 CSS 模块冲突

// 解决方案：配置 CSS 模块
export default defineConfig({
  css: {
    modules: {
      // 只对 .module.css 文件启用 CSS 模块
      generateScopedName: '[name]__[local]___[hash:base64:5]',
      
      // 全局样式白名单
      globalModulePaths: [/\.global\.(css|scss)$/]
    },
    
    preprocessorOptions: {
      scss: {
        // 避免样式重复导入
        additionalData: `@use "@/styles/variables.scss" as *;`
      }
    }
  }
})

8. HMR 失效问题：

// 问题：某些文件修改后 HMR 不生效

// 解决方案：配置文件监听
export default defineConfig({
  server: {
    watch: {
      // 忽略 node_modules 提高性能
      ignored: ['!**/node_modules/your-package/**']
    }
  },
  
  // 自定义 HMR 处理
  plugins: [{
    name: 'custom-hmr',
    handleHotUpdate(ctx) {
      if (ctx.file.endsWith('.json')) {
        // JSON 文件变更时强制刷新
        ctx.server.ws.send({
          type: 'full-reload'
        })
        return []
      }
    }
  }]
})

调试和排查技巧：

• 使用 DEBUG=vite:* 环境变量启用详细日志
• 检查浏览器开发者工具的网络面板
• 使用 vite --debug 命令获取更多信息
• 清除 node_modules/.vite 缓存目录
• 检查依赖版本兼容性

预防措施：

• 定期更新 Vite 和相关插件版本
• 使用 TypeScript 提高代码健壮性
• 配置详细的错误处理和日志记录
• 建立完善的开发环境文档

What is the underlying implementation principle of Vite’s plugin system, and how does it differ from the Rollup plugin ecosystem?

考察点：Vite插件系统的底层架构和与Rollup的关系。

答案：

Vite 插件系统巧妙地基于 Rollup 插件架构，在完全兼容 Rollup 插件的同时，扩展了专门用于开发时的钩子函数，实现了"一套插件，两种模式"的设计理念。

底层实现原理：

1. 双模式架构：

// Vite 插件在不同模式下的执行
function createPlugin() {
  return {
    name: 'example-plugin',
    
    // 通用钩子（开发+构建都执行）
    resolveId(id, importer) {
      // 模块解析逻辑
    },
    
    transform(code, id) {
      // 代码转换逻辑  
    },
    
    // Vite 开发专用钩子
    configureServer(server) {
      // 只在开发模式执行
    },
    
    // Rollup 构建专用钩子
    generateBundle(options, bundle) {
      // 只在构建模式执行
    }
  }
}

2. 插件容器（Plugin Container）：

// Vite 内部插件容器实现概念
class PluginContainer {
  constructor(plugins) {
    this.plugins = plugins
  }
  
  async resolveId(id, importer) {
    for (const plugin of this.plugins) {
      if (plugin.resolveId) {
        const result = await plugin.resolveId.call(
          this.createContext(plugin), 
          id, 
          importer
        )
        if (result) return result
      }
    }
  }
  
  async transform(code, id) {
    for (const plugin of this.plugins) {
      if (plugin.transform) {
        const result = await plugin.transform.call(
          this.createContext(plugin),
          code,
          id
        )
        if (result) {
          code = result.code || result
        }
      }
    }
    return code
  }
}

与 Rollup 插件体系的关系：

1. 完全兼容性：

// Rollup 插件可直接在 Vite 中使用
import commonjs from '@rollup/plugin-commonjs'
import { nodeResolve } from '@rollup/plugin-node-resolve'
import terser from '@rollup/plugin-terser'

export default defineConfig({
  plugins: [
    // 直接使用 Rollup 插件
    nodeResolve(),
    commonjs(),
    terser()
  ]
})

2. 钩子函数对比：

共享钩子（Rollup 原生）：

const rollupHooks = {
  // 构建钩子
  buildStart: '构建开始',
  resolveId: '模块ID解析', 
  load: '模块加载',
  transform: '代码转换',
  buildEnd: '构建结束',
  
  // 输出钩子  
  outputOptions: '输出配置',
  renderStart: '渲染开始',
  generateBundle: '生成bundle',
  writeBundle: '写入bundle'
}

Vite 扩展钩子：

const viteHooks = {
  // 配置钩子
  config: '修改配置',
  configResolved: '配置解析完成',
  configureServer: '配置开发服务器',
  configurePreviewServer: '配置预览服务器',
  
  // 开发专用
  handleHotUpdate: '处理热更新'
}

3. 执行时机差异：

// 开发模式：Vite Plugin Container
Development Mode:
config → configResolved → configureServer → 
resolveId → load → transform → handleHotUpdate

// 构建模式：Rollup Plugin System  
Build Mode:
config → configResolved → buildStart → 
resolveId → load → transform → generateBundle

插件执行顺序控制：

1. 强制执行顺序：

export default defineConfig({
  plugins: [
    // pre: 在 Vite 内置插件之前执行
    { 
      ...myPlugin(), 
      enforce: 'pre' 
    },
    
    // 默认：正常顺序执行
    vue(),
    
    // post: 在所有插件之后执行
    { 
      ...anotherPlugin(), 
      enforce: 'post' 
    }
  ]
})

2. 条件应用：

// 插件条件应用机制
function conditionalPlugin() {
  return {
    name: 'conditional',
    
    // 只在特定命令下应用
    apply: 'build', // 'serve' | 'build' | (config, env) => boolean
    
    // 或者使用函数判断
    apply(config, { command }) {
      return command === 'build' && config.build.ssr
    }
  }
}

高级插件开发模式：

1. 插件工厂模式：

function createAdvancedPlugin(options = {}) {
  const { 
    framework = 'vue',
    optimization = true,
    customTransforms = []
  } = options
  
  return {
    name: 'advanced-plugin',
    
    configResolved(config) {
      this.isDev = config.command === 'serve'
      this.framework = framework
    },
    
    async transform(code, id) {
      // 基于配置的动态转换
      if (this.framework === 'vue' && id.endsWith('.vue')) {
        return await transformVue(code, this.isDev)
      }
      
      if (optimization && !this.isDev) {
        return await optimizeCode(code)
      }
      
      return null
    }
  }
}

2. 插件组合模式：

function createPluginSuite(options) {
  return [
    // 核心插件
    createCorePlugin(options.core),
    
    // 条件插件
    ...(options.enableDevTools ? [devToolsPlugin()] : []),
    ...(options.enableAnalytics ? [analyticsPlugin()] : []),
    
    // 环境特定插件
    process.env.NODE_ENV === 'development' && mockPlugin(),
    process.env.NODE_ENV === 'production' && compressionPlugin()
  ].filter(Boolean)
}

性能优化策略：

• 插件钩子函数使用异步处理避免阻塞
• 合理使用 enforce 控制执行顺序
• 避免重复的文件系统操作
• 缓存转换结果提高性能
• 使用条件应用减少不必要的插件执行

核心优势：

• 兼容性：完全兼容 Rollup 生态
• 扩展性：支持开发时特有功能
• 一致性：开发和构建使用相同插件
• 灵活性：支持复杂的插件组合和条件应用

How does Vite manage dependency graphs? How does it track dependencies during hot updates?

考察点：Vite依赖图管理和HMR机制的底层实现。

答案：

Vite 通过构建和维护模块依赖图来实现精确的热更新。依赖图记录了模块间的导入导出关系，当文件发生变更时，Vite 能够精确定位需要更新的模块范围，实现高效的增量更新。

依赖图数据结构：

1. 模块节点（Module Node）：

// Vite 内部模块节点结构概念
class ModuleNode {
  constructor(url) {
    this.url = url              // 模块 URL
    this.id = null             // 模块 ID
    this.file = null           // 文件路径
    this.type = 'js'           // 模块类型
    
    // 依赖关系
    this.importers = new Set()  // 谁导入了这个模块
    this.importedModules = new Set() // 这个模块导入了谁
    
    // HMR 相关
    this.acceptedHmrDeps = new Set()
    this.isSelfAccepting = false
    
    // 转换结果缓存
    this.transformResult = null
    this.ssrTransformResult = null
  }
}

2. 模块图（Module Graph）：

// Vite 模块图管理器概念实现
class ModuleGraph {
  constructor() {
    this.urlToModuleMap = new Map()
    this.idToModuleMap = new Map() 
    this.fileToModulesMap = new Map()
  }
  
  // 获取或创建模块节点
  async getModuleByUrl(url) {
    let mod = this.urlToModuleMap.get(url)
    if (!mod) {
      mod = new ModuleNode(url)
      this.urlToModuleMap.set(url, mod)
    }
    return mod
  }
  
  // 建立依赖关系
  async updateModuleInfo(mod, importedModules) {
    // 清除旧的依赖关系
    for (const imported of mod.importedModules) {
      imported.importers.delete(mod)
    }
    
    // 建立新的依赖关系
    mod.importedModules.clear()
    for (const imported of importedModules) {
      mod.importedModules.add(imported)
      imported.importers.add(mod)
    }
  }
}

依赖图构建过程：

1. 模块解析和依赖发现：

// 依赖解析过程
async function transformRequest(url, server) {
  const mod = await server.moduleGraph.getModuleByUrl(url)
  
  if (mod.transformResult) {
    return mod.transformResult
  }
  
  // 读取和转换文件
  const code = await fs.readFile(mod.file, 'utf-8')
  const result = await transformCode(code, url)
  
  // 分析依赖关系
  const importedUrls = extractImports(result.code)
  const importedModules = await Promise.all(
    importedUrls.map(url => server.moduleGraph.getModuleByUrl(url))
  )
  
  // 更新依赖图
  await server.moduleGraph.updateModuleInfo(mod, importedModules)
  
  mod.transformResult = result
  return result
}

2. 实时依赖追踪：

// ES 模块导入分析
function extractImports(code) {
  const imports = []
  
  // 静态导入：import { a } from './module'
  const staticImportRegex = /import\s+.*?\s+from\s+['"]([^'"]+)['"]/g
  let match
  while ((match = staticImportRegex.exec(code)) !== null) {
    imports.push(match[1])
  }
  
  // 动态导入：import('./module')
  const dynamicImportRegex = /import\s*\(\s*['"]([^'"]+)['"]\s*\)/g
  while ((match = dynamicImportRegex.exec(code)) !== null) {
    imports.push(match[1])
  }
  
  return imports
}

热更新依赖追踪机制：

1. 文件变更检测：

// 文件监听和变更处理
const chokidar = require('chokidar')

class ViteDevServer {
  setupFileWatcher() {
    const watcher = chokidar.watch(this.config.root, {
      ignored: ['**/node_modules/**', '**/.git/**']
    })
    
    watcher.on('change', async (file) => {
      await this.handleFileChange(file)
    })
  }
  
  async handleFileChange(file) {
    const modules = this.moduleGraph.getModulesByFile(file)
    const hmrContext = {
      file,
      timestamp: Date.now(),
      modules: [...modules],
      server: this
    }
    
    // 执行插件的 handleHotUpdate 钩子
    await this.pluginContainer.handleHotUpdate(hmrContext)
    
    if (hmrContext.modules.length > 0) {
      this.updateModules(hmrContext.modules, hmrContext.timestamp)
    }
  }
}

2. 受影响模块计算：

// 计算需要更新的模块范围
function getAffectedModules(changedModule, moduleGraph) {
  const affectedModules = new Set()
  const visited = new Set()
  
  function traverse(mod) {
    if (visited.has(mod)) return
    visited.add(mod)
    
    // 检查模块是否接受热更新
    if (mod.isSelfAccepting) {
      affectedModules.add(mod)
      return // 停止向上传播
    }
    
    // 检查模块是否接受特定依赖的更新
    if (mod.acceptedHmrDeps.has(changedModule)) {
      affectedModules.add(mod)
      return
    }
    
    // 向导入者传播
    for (const importer of mod.importers) {
      traverse(importer)
    }
  }
  
  traverse(changedModule)
  
  // 如果没有模块接受更新，则需要全页面刷新
  if (affectedModules.size === 0) {
    return { type: 'full-reload' }
  }
  
  return { type: 'update', modules: [...affectedModules] }
}

HMR API 和边界定义：

1. 客户端 HMR API：

// 模块中定义 HMR 边界
if (import.meta.hot) {
  // 接受自身更新
  import.meta.hot.accept()
  
  // 接受特定依赖的更新
  import.meta.hot.accept('./component.vue', (newComponent) => {
    updateComponent(newComponent)
  })
  
  // 处理更新时的副作用
  import.meta.hot.dispose((data) => {
    // 清理定时器、事件监听器等
    clearInterval(data.timer)
  })
  
  // 状态保持
  if (import.meta.hot.data.count) {
    count.value = import.meta.hot.data.count
  }
  
  import.meta.hot.accept(() => {
    import.meta.hot.data.count = count.value
  })
}

2. 框架级 HMR 集成：

// Vue HMR 插件示例
function vueHmrPlugin() {
  return {
    name: 'vue-hmr',
    
    handleHotUpdate(ctx) {
      if (!ctx.file.endsWith('.vue')) return
      
      const prevDescriptor = getPrevDescriptor(ctx.file)
      const nextDescriptor = parseVueFile(ctx.read())
      
      const updates = []
      
      // 模板变化
      if (prevDescriptor.template !== nextDescriptor.template) {
        updates.push({
          type: 'template-update',
          path: ctx.file,
          timestamp: ctx.timestamp
        })
      }
      
      // 样式变化  
      if (prevDescriptor.styles !== nextDescriptor.styles) {
        updates.push({
          type: 'style-update',
          path: ctx.file,
          index: 0
        })
      }
      
      // 发送更新到客户端
      ctx.server.ws.send({
        type: 'update',
        updates
      })
      
      return [] // 阻止默认更新逻辑
    }
  }
}

依赖图优化策略：

1. 缓存和失效：

// 智能缓存失效
class ModuleGraph {
  invalidateModule(mod, timestamp) {
    mod.transformResult = null
    mod.ssrTransformResult = null
    
    // 递归失效依赖者的缓存
    for (const importer of mod.importers) {
      if (importer.lastInvalidationTimestamp < timestamp) {
        importer.lastInvalidationTimestamp = timestamp
        this.invalidateModule(importer, timestamp)
      }
    }
  }
}

2. 循环依赖处理：

// 检测和处理循环依赖
function detectCircularDependency(moduleGraph) {
  const visited = new Set()
  const visiting = new Set()
  const cycles = []
  
  function visit(mod, path = []) {
    if (visiting.has(mod)) {
      cycles.push([...path, mod])
      return
    }
    
    if (visited.has(mod)) return
    
    visiting.add(mod)
    path.push(mod)
    
    for (const imported of mod.importedModules) {
      visit(imported, path)
    }
    
    visiting.delete(mod)
    visited.add(mod)
    path.pop()
  }
  
  return cycles
}

性能特点：

• 精确更新：只更新真正受影响的模块
• 状态保持：支持组件状态在更新中保持
• 错误恢复：HMR 失败时自动回退到全页刷新
• 框架集成：与 Vue、React 等框架深度集成

What are the implementation details of Vite’s middleware mechanism and development server?

考察点：Vite开发服务器架构和中间件处理机制。

答案：

Vite 开发服务器基于 Connect 中间件系统构建，通过分层的中间件架构处理不同类型的请求。服务器在开发时充当 ES 模块转换代理，将传统的打包流程转换为按需编译的流式处理。

开发服务器架构：

1. 核心服务器结构：

// Vite 开发服务器核心实现概念
class ViteDevServer {
  constructor(config) {
    this.config = config
    this.middlewares = connect()
    this.moduleGraph = new ModuleGraph()
    this.pluginContainer = new PluginContainer()
    this.ws = new WebSocketServer() // HMR WebSocket
    this.transformCache = new Map()
  }
  
  async listen(port) {
    // 设置中间件栈
    this.setupMiddlewares()
    
    const httpServer = http.createServer(this.middlewares)
    
    // 升级 WebSocket 连接
    httpServer.on('upgrade', this.handleUpgrade.bind(this))
    
    return new Promise((resolve) => {
      httpServer.listen(port, () => {
        console.log(`Dev server running at http://localhost:${port}`)
        resolve(httpServer)
      })
    })
  }
}

2. 中间件注册顺序：

setupMiddlewares() {
  const { middlewares } = this
  
  // 1. 用户自定义中间件（pre）
  this.config.server.middlewares?.forEach(middleware => {
    if (middleware.enforce === 'pre') {
      middlewares.use(middleware.handler)
    }
  })
  
  // 2. CORS 中间件
  if (this.config.server.cors) {
    middlewares.use(corsMiddleware())
  }
  
  // 3. 代理中间件
  if (this.config.server.proxy) {
    middlewares.use(proxyMiddleware(this.config.server.proxy))
  }
  
  // 4. 基础资源中间件
  middlewares.use(baseMiddleware())
  
  // 5. 模块转换中间件（核心）
  middlewares.use(transformMiddleware(this))
  
  // 6. 静态资源中间件
  middlewares.use(staticMiddleware(this.config.root))
  
  // 7. SPA 回退中间件
  middlewares.use(spaFallbackMiddleware())
  
  // 8. 用户自定义中间件（normal）
  this.config.server.middlewares?.forEach(middleware => {
    if (!middleware.enforce || middleware.enforce === 'normal') {
      middlewares.use(middleware.handler)
    }
  })
  
  // 9. HTML 处理中间件
  middlewares.use(htmlMiddleware(this))
  
  // 10. 404 处理中间件
  middlewares.use(notFoundMiddleware())
}

核心中间件实现：

1. 模块转换中间件：

function transformMiddleware(server) {
  return async (req, res, next) => {
    const url = req.url
    
    // 跳过非模块请求
    if (!isModuleRequest(url)) {
      return next()
    }
    
    try {
      // 从模块图获取模块信息
      const mod = await server.moduleGraph.getModuleByUrl(url)
      
      // 检查缓存
      if (mod.transformResult && !mod.needsUpdate) {
        res.setHeader('Content-Type', 'application/javascript')
        res.setHeader('Cache-Control', 'no-cache')
        res.setHeader('ETag', mod.etag)
        return res.end(mod.transformResult.code)
      }
      
      // 执行转换
      const result = await transformRequest(url, server)
      
      // 设置响应头
      res.setHeader('Content-Type', 'application/javascript')
      res.setHeader('Cache-Control', 'no-cache')
      res.setHeader('ETag', result.etag)
      
      // 发送转换结果
      res.end(result.code)
      
    } catch (error) {
      next(error)
    }
  }
}

2. 静态资源中间件：

function staticMiddleware(root, options = {}) {
  return (req, res, next) => {
    const url = req.url
    
    // 处理 public 目录资源
    if (url.startsWith('/')) {
      const filepath = path.join(root, 'public', url)
      
      if (fs.existsSync(filepath)) {
        const stat = fs.statSync(filepath)
        
        if (stat.isFile()) {
          // 设置 MIME 类型
          const ext = path.extname(filepath)
          const contentType = getMimeType(ext)
          res.setHeader('Content-Type', contentType)
          
          // 设置缓存头
          if (isPermanentAsset(url)) {
            res.setHeader('Cache-Control', 'max-age=31536000,immutable')
          }
          
          return fs.createReadStream(filepath).pipe(res)
        }
      }
    }
    
    next()
  }
}

3. HTML 处理中间件：

function htmlMiddleware(server) {
  return async (req, res, next) => {
    const url = req.url
    
    if (!url.endsWith('.html') && url !== '/') {
      return next()
    }
    
    try {
      const htmlPath = url === '/' ? '/index.html' : url
      const filepath = path.join(server.config.root, htmlPath)
      
      let html = await fs.promises.readFile(filepath, 'utf-8')
      
      // 应用 HTML 转换插件
      html = await server.pluginContainer.transformIndexHtml(url, html)
      
      // 注入 HMR 客户端代码
      if (server.config.server.hmr !== false) {
        html = injectHMRScript(html, server.config)
      }
      
      res.setHeader('Content-Type', 'text/html')
      res.setHeader('Cache-Control', 'no-cache')
      res.end(html)
      
    } catch (error) {
      next(error)
    }
  }
}

4. 代理中间件：

function proxyMiddleware(proxyConfig) {
  const proxies = Object.entries(proxyConfig).map(([path, options]) => {
    const proxy = httpProxy.createProxyServer(options)
    
    return {
      path,
      proxy,
      options
    }
  })
  
  return (req, res, next) => {
    const url = req.url
    
    for (const { path, proxy, options } of proxies) {
      if (url.startsWith(path)) {
        // 重写路径
        if (options.rewrite) {
          req.url = options.rewrite(req.url)
        }
        
        // 代理请求
        return proxy.web(req, res, {
          target: options.target,
          changeOrigin: options.changeOrigin
        })
      }
    }
    
    next()
  }
}

WebSocket 处理：

1. HMR WebSocket 服务：

class WebSocketServer {
  constructor() {
    this.clients = new Set()
  }
  
  handleUpgrade(request, socket, head) {
    if (request.url === '/vite-hmr') {
      this.wss.handleUpgrade(request, socket, head, (ws) => {
        this.clients.add(ws)
        
        ws.on('close', () => {
          this.clients.delete(ws)
        })
        
        // 发送连接确认
        ws.send(JSON.stringify({ type: 'connected' }))
      })
    }
  }
  
  send(data) {
    const message = JSON.stringify(data)
    this.clients.forEach(client => {
      if (client.readyState === 1) { // OPEN
        client.send(message)
      }
    })
  }
}

2. HMR 消息类型：

// 发送不同类型的 HMR 消息
function sendHMRUpdate(server, updates) {
  server.ws.send({
    type: 'update',
    updates: updates.map(update => ({
      type: update.type, // 'js-update' | 'css-update' | 'full-reload'
      path: update.path,
      acceptedPath: update.acceptedPath,
      timestamp: update.timestamp
    }))
  })
}

// 错误处理
function sendError(server, error) {
  server.ws.send({
    type: 'error',
    err: {
      message: error.message,
      stack: error.stack,
      id: error.id,
      frame: error.frame,
      plugin: error.plugin
    }
  })
}

请求处理流程：

1. 模块请求处理：

浏览器请求 → 中间件栈 → 模块转换 → 依赖分析 → 代码转换 → 响应
     ↓           ↓         ↓         ↓         ↓         ↓
   /src/App.vue → transform → Vue SFC → ES模块 → 注入HMR → 返回JS

2. 资源请求处理：

静态资源请求 → 路径解析 → 文件读取 → MIME设置 → 缓存头 → 响应
      ↓           ↓         ↓         ↓         ↓         ↓
  /assets/logo.png → public目录 → 文件流 → image/png → Cache → 返回

性能优化机制：

1. 缓存策略：

// 多层缓存系统
const cacheLayer = {
  // 文件系统缓存
  fsCache: new Map(),
  
  // 转换结果缓存
  transformCache: new Map(),
  
  // 依赖解析缓存
  resolveCache: new Map(),
  
  // HTTP 缓存头
  httpCache: {
    'Cache-Control': 'max-age=0, must-revalidate',
    'ETag': 'generated-hash'
  }
}

2. 并发控制：

// 防止重复转换
const transformQueue = new Map()

async function transformRequest(url, server) {
  if (transformQueue.has(url)) {
    return await transformQueue.get(url)
  }
  
  const promise = doTransform(url, server)
  transformQueue.set(url, promise)
  
  try {
    const result = await promise
    return result
  } finally {
    transformQueue.delete(url)
  }
}

开发服务器优势：

• 按需编译：只转换浏览器实际请求的模块
• 即时响应：毫秒级的模块转换和响应
• 智能缓存：多层缓存避免重复计算
• 错误友好：详细的错误信息和堆栈跟踪
• 可扩展性：丰富的中间件和插件接口

实战型高级题目

Write a Vite plugin: implement automatic import path replacement functionality

考察点：Vite插件开发实践和代码转换技能。

答案：

下面实现一个功能完整的 Vite 插件，能够自动替换 import 路径，支持多种替换规则和配置选项。

完整插件实现：

// vite-plugin-import-path-replace.js
import { createFilter } from '@rollup/pluginutils'
import MagicString from 'magic-string'
import path from 'path'

/**
 * Vite 插件：自动替换 import 路径
 * @param {Object} options 配置选项
 * @param {Object} options.replacements 路径替换规则
 * @param {Array} options.include 包含文件模式
 * @param {Array} options.exclude 排除文件模式
 * @param {boolean} options.caseSensitive 是否大小写敏感
 * @param {boolean} options.verbose 是否输出详细日志
 */
function createImportPathReplacePlugin(options = {}) {
  const {
    replacements = {},
    include = ['**/*.js', '**/*.ts', '**/*.vue', '**/*.jsx', '**/*.tsx'],
    exclude = ['node_modules/**'],
    caseSensitive = true,
    verbose = false
  } = options

  // 创建文件过滤器
  const filter = createFilter(include, exclude)
  
  // 编译替换规则为正则表达式
  const compiledRules = compileReplacementRules(replacements, caseSensitive)
  
  return {
    name: 'vite:import-path-replace',
    
    // 确保在其他转换之前执行
    enforce: 'pre',
    
    transform(code, id) {
      // 过滤不需要处理的文件
      if (!filter(id)) {
        return null
      }
      
      // 检查是否包含 import 语句
      if (!hasImportStatements(code)) {
        return null
      }
      
      const magicString = new MagicString(code)
      let hasReplacements = false
      
      // 处理各种 import 语句
      const replacements = [
        ...findStaticImports(code),
        ...findDynamicImports(code),
        ...findReExports(code)
      ]
      
      for (const replacement of replacements) {
        const newPath = applyReplacementRules(replacement.path, compiledRules)
        
        if (newPath && newPath !== replacement.path) {
          magicString.overwrite(
            replacement.start,
            replacement.end,
            `'${newPath}'`
          )
          hasReplacements = true
          
          if (verbose) {
            console.log(`[import-path-replace] ${id}:`)
            console.log(`  ${replacement.path} → ${newPath}`)
          }
        }
      }
      
      if (!hasReplacements) {
        return null
      }
      
      return {
        code: magicString.toString(),
        map: magicString.generateMap({ hires: true })
      }
    }
  }
}

/**
 * 编译替换规则
 */
function compileReplacementRules(replacements, caseSensitive) {
  const rules = []
  
  for (const [pattern, replacement] of Object.entries(replacements)) {
    let regex
    
    if (pattern instanceof RegExp) {
      regex = pattern
    } else {
      // 转义特殊字符并创建正则表达式
      const escapedPattern = pattern.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
      const flags = caseSensitive ? 'g' : 'gi'
      regex = new RegExp(escapedPattern, flags)
    }
    
    rules.push({
      pattern: regex,
      replacement: replacement
    })
  }
  
  return rules
}

/**
 * 检查代码是否包含 import 语句
 */
function hasImportStatements(code) {
  return /\b(import|export)\s/.test(code)
}

/**
 * 查找静态 import 语句
 */
function findStaticImports(code) {
  const imports = []
  const regex = /\bimport\s+(?:[^'"]*\s+from\s+)?['"]([^'"]+)['"]/g
  let match
  
  while ((match = regex.exec(code)) !== null) {
    imports.push({
      path: match[1],
      start: match.index + match[0].indexOf(match[1]) - 1,
      end: match.index + match[0].indexOf(match[1]) + match[1].length + 1,
      type: 'static-import'
    })
  }
  
  return imports
}

/**
 * 查找动态 import() 语句
 */
function findDynamicImports(code) {
  const imports = []
  const regex = /\bimport\s*\(\s*['"]([^'"]+)['"]\s*\)/g
  let match
  
  while ((match = regex.exec(code)) !== null) {
    imports.push({
      path: match[1],
      start: match.index + match[0].indexOf(match[1]) - 1,
      end: match.index + match[0].indexOf(match[1]) + match[1].length + 1,
      type: 'dynamic-import'
    })
  }
  
  return imports
}

/**
 * 查找 export...from 语句
 */
function findReExports(code) {
  const exports = []
  const regex = /\bexport\s+(?:\*|\{[^}]*\})\s+from\s+['"]([^'"]+)['"]/g
  let match
  
  while ((match = regex.exec(code)) !== null) {
    exports.push({
      path: match[1],
      start: match.index + match[0].indexOf(match[1]) - 1,
      end: match.index + match[0].indexOf(match[1]) + match[1].length + 1,
      type: 're-export'
    })
  }
  
  return exports
}

/**
 * 应用替换规则
 */
function applyReplacementRules(importPath, rules) {
  let result = importPath
  
  for (const rule of rules) {
    if (typeof rule.replacement === 'function') {
      // 函数形式的替换
      result = result.replace(rule.pattern, rule.replacement)
    } else {
      // 字符串替换
      result = result.replace(rule.pattern, rule.replacement)
    }
  }
  
  return result !== importPath ? result : null
}

// 导出插件
export default createImportPathReplacePlugin

使用示例：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import importPathReplace from './plugins/vite-plugin-import-path-replace'

export default defineConfig({
  plugins: [
    vue(),
    importPathReplace({
      replacements: {
        // 简单字符串替换
        '@/components': './src/components',
        '@/utils': './src/utils',
        '@/api': './src/api',
        
        // 正则表达式替换
        /^lodash$/: 'lodash-es',
        /^@\/views\/(.+)$/: './src/pages/$1',
        
        // 函数形式替换（高级用法）
        '^element-ui': (match) => {
          return 'element-plus' // 自动升级 UI 库
        },
        
        // 环境相关替换
        '@/config': process.env.NODE_ENV === 'production' 
          ? './src/config/prod' 
          : './src/config/dev'
      },
      
      // 只处理特定文件类型
      include: ['**/*.vue', '**/*.js', '**/*.ts'],
      
      // 排除 node_modules
      exclude: ['node_modules/**', 'dist/**'],
      
      // 启用详细日志
      verbose: true,
      
      // 大小写敏感
      caseSensitive: true
    })
  ]
})

高级功能扩展：

// 支持条件替换和路径解析
function createAdvancedImportPathReplace(options = {}) {
  return {
    name: 'vite:advanced-import-path-replace',
    
    configResolved(config) {
      this.isProduction = config.command === 'build'
      this.root = config.root
    },
    
    transform(code, id) {
      const replacements = []
      
      // 基于文件路径的条件替换
      if (id.includes('/mobile/')) {
        replacements.push({
          pattern: /^@\/components\//,
          replacement: '@/components/mobile/'
        })
      }
      
      // 基于环境的替换
      if (this.isProduction) {
        replacements.push({
          pattern: /^@\/api\/mock/,
          replacement: '@/api/prod'
        })
      }
      
      // 相对路径转绝对路径
      replacements.push({
        pattern: /^\.\.?\//,
        replacement: (match, offset, string) => {
          return path.resolve(path.dirname(id), match)
        }
      })
      
      return applyReplacements(code, replacements)
    }
  }
}

插件特点：

• 灵活配置：支持字符串、正则、函数等多种替换规则
• 性能优化：使用 MagicString 提供高效的源码映射
• 类型安全：支持 TypeScript 项目
• 调试友好：提供详细的替换日志
• 扩展性强：支持自定义转换逻辑

适用场景：

• 路径别名统一化
• 第三方库版本迁移
• 环境差异化配置
• 组件库按需导入优化
• 历史代码重构

结合实际场景的开放题

How to integrate Vite into micro-frontend architecture? What challenges are encountered?

考察点：Vite在微前端场景下的应用和架构设计。

答案：

Vite 在微前端架构中的集成需要考虑模块联邦、资源隔离、通信机制等多个方面。虽然 Vite 原生不支持 Webpack 的 Module Federation，但可以通过插件和架构设计实现类似功能。

集成方案：

1. 基于 Module Federation 的方案：

// 安装 Vite 的 Module Federation 插件
npm install @originjs/vite-plugin-federation -D

// vite.config.js - 主应用配置
import { defineConfig } from 'vite'
import federation from '@originjs/vite-plugin-federation'

export default defineConfig({
  plugins: [
    federation({
      name: 'shell-app',
      remotes: {
        'micro-app-1': 'http://localhost:3001/assets/remoteEntry.js',
        'micro-app-2': 'http://localhost:3002/assets/remoteEntry.js'
      },
      shared: {
        vue: {
          singleton: true,
          requiredVersion: '^3.0.0'
        },
        'vue-router': {
          singleton: true
        }
      }
    })
  ],
  
  build: {
    target: 'esnext',
    minify: false,
    cssCodeSplit: false
  }
})

// 微应用配置
export default defineConfig({
  plugins: [
    federation({
      name: 'micro-app-1',
      filename: 'remoteEntry.js',
      exposes: {
        './App': './src/App.vue',
        './Counter': './src/components/Counter.vue'
      },
      shared: {
        vue: { singleton: true },
        'vue-router': { singleton: true }
      }
    })
  ]
})

2. 基于 ESM 的微前端方案：

// 主应用动态加载微应用
class MicroAppLoader {
  constructor() {
    this.apps = new Map()
  }
  
  async loadApp(name, url) {
    if (this.apps.has(name)) {
      return this.apps.get(name)
    }
    
    try {
      // 动态导入微应用
      const module = await import(/* @vite-ignore */ url)
      const app = await module.bootstrap({
        container: `#${name}-container`,
        routes: this.getRoutesForApp(name)
      })
      
      this.apps.set(name, app)
      return app
    } catch (error) {
      console.error(`Failed to load micro app ${name}:`, error)
      throw error
    }
  }
  
  async mountApp(name, container) {
    const app = this.apps.get(name)
    if (app && app.mount) {
      await app.mount(container)
    }
  }
  
  async unmountApp(name) {
    const app = this.apps.get(name)
    if (app && app.unmount) {
      await app.unmount()
    }
  }
}

// 使用示例
const loader = new MicroAppLoader()

// 路由变化时动态加载
router.beforeEach(async (to) => {
  const appName = to.meta.microApp
  if (appName) {
    await loader.loadApp(appName, `http://localhost:${to.meta.port}/dist/index.js`)
    await loader.mountApp(appName, `#app-${appName}`)
  }
})

主要挑战和解决方案：

1. 样式隔离问题：

// 解决方案：CSS Modules + Scoped CSS
// vite.config.js
export default defineConfig({
  css: {
    modules: {
      // 微应用使用唯一的类名前缀
      generateScopedName: '[local]_[hash:base64:8]_micro1',
      hashPrefix: 'micro-app-1'
    }
  },
  
  plugins: [
    // 使用 PostCSS 插件添加作用域
    {
      name: 'micro-app-scoped-css',
      transform(code, id) {
        if (id.endsWith('.css')) {
          return {
            code: `.micro-app-1 { ${code} }`,
            map: null
          }
        }
      }
    }
  ]
})

2. 路由冲突和状态管理：

// 微应用路由配置
export function createRouter(base = '/') {
  return createVueRouter({
    history: createWebHistory(base),
    routes: [
      {
        path: '/dashboard',
        component: () => import('./views/Dashboard.vue')
      }
    ]
  })
}

// 主应用路由集成
const microAppRoutes = [
  {
    path: '/micro-app-1/*',
    component: MicroAppWrapper,
    meta: { 
      microApp: 'micro-app-1',
      port: 3001 
    }
  }
]

// 状态隔离
const createIsolatedStore = (namespace) => {
  return createPinia({
    // 使用命名空间隔离状态
    plugins: [
      ({ store }) => {
        store.$id = `${namespace}-${store.$id}`
      }
    ]
  })
}

3. 依赖共享和版本管理：

// 共享依赖管理
const sharedDependencies = {
  vue: {
    singleton: true,
    version: '3.3.0',
    requiredVersion: '^3.0.0'
  },
  'vue-router': {
    singleton: true,
    version: '4.2.0'
  },
  pinia: {
    singleton: true,
    version: '2.1.0'
  }
}

// 版本检查插件
function createVersionCheckPlugin() {
  return {
    name: 'version-check',
    configResolved(config) {
      // 检查共享依赖版本兼容性
      checkDependencyVersions(config.dependencies, sharedDependencies)
    }
  }
}

4. 跨应用通信：

// 事件总线通信
class MicroAppEventBus {
  constructor() {
    this.events = new Map()
  }
  
  subscribe(event, callback, appId) {
    if (!this.events.has(event)) {
      this.events.set(event, new Set())
    }
    this.events.get(event).add({ callback, appId })
  }
  
  publish(event, data, fromApp) {
    const subscribers = this.events.get(event) || new Set()
    subscribers.forEach(({ callback, appId }) => {
      if (appId !== fromApp) { // 避免自发自收
        callback(data)
      }
    })
  }
  
  unsubscribe(event, appId) {
    const subscribers = this.events.get(event)
    if (subscribers) {
      subscribers.forEach(sub => {
        if (sub.appId === appId) {
          subscribers.delete(sub)
        }
      })
    }
  }
}

// 全局状态管理
window.__MICRO_APP_BUS__ = new MicroAppEventBus()

5. 构建和部署优化：

// 微应用独立构建配置
export default defineConfig({
  build: {
    lib: {
      entry: './src/main.js',
      name: 'MicroApp1',
      fileName: 'index',
      formats: ['es']
    },
    rollupOptions: {
      external: ['vue', 'vue-router', 'pinia'], // 外部化共享依赖
      output: {
        globals: {
          vue: 'Vue',
          'vue-router': 'VueRouter',
          pinia: 'Pinia'
        }
      }
    }
  },
  
  // CDN 资源配置
  base: process.env.NODE_ENV === 'production' 
    ? 'https://cdn.example.com/micro-app-1/' 
    : '/'
})

最佳实践：

• 制定严格的依赖版本管理策略
• 使用统一的 UI 设计系统和组件库
• 建立完善的错误监控和降级机制
• 实施自动化的集成测试流程
• 合理设计应用边界和通信协议

How to implement unified multi-terminal development (Web/MiniProgram/SSR) based on Vite?

考察点：Vite跨平台开发能力和统一构建方案。

答案：

基于 Vite 实现多端统一开发需要通过条件编译、适配器模式和平台特定的构建配置来处理不同平台的差异性，同时保持代码的最大复用性。

整体架构设计：

1. 项目结构设计：

src/
├── platforms/          # 平台特定代码
│   ├── web/
│   │   ├── main.js
│   │   ├── router.js
│   │   └── index.html
│   ├── miniprogram/
│   │   ├── main.js
│   │   ├── app.json
│   │   └── adapters/
│   └── ssr/
│       ├── entry-client.js
│       ├── entry-server.js
│       └── server.js
├── shared/             # 共享代码
│   ├── components/     # 通用组件
│   ├── composables/    # 通用逻辑
│   ├── utils/          # 工具函数
│   └── api/            # API 层
├── adapters/           # 平台适配器
│   ├── storage.js
│   ├── request.js
│   └── navigation.js
└── config/
    └── platforms.js    # 平台配置

2. 平台识别和条件编译：

// config/platforms.js
export const PLATFORMS = {
  WEB: 'web',
  MINIPROGRAM: 'miniprogram', 
  SSR: 'ssr'
}

export const getCurrentPlatform = () => {
  if (typeof window === 'undefined') {
    return PLATFORMS.SSR
  }
  
  if (typeof wx !== 'undefined') {
    return PLATFORMS.MINIPROGRAM
  }
  
  return PLATFORMS.WEB
}

// Vite 插件：条件编译
function createConditionalCompilePlugin(platform) {
  return {
    name: 'conditional-compile',
    transform(code, id) {
      // 处理平台特定的条件编译
      const platformBlocks = [
        { platform: 'web', regex: /\/\*\s*#ifdef\s+WEB\s*\*\/([\s\S]*?)\/\*\s*#endif\s*\*\//g },
        { platform: 'miniprogram', regex: /\/\*\s*#ifdef\s+MP\s*\*\/([\s\S]*?)\/\*\s*#endif\s*\*\//g },
        { platform: 'ssr', regex: /\/\*\s*#ifdef\s+SSR\s*\*\/([\s\S]*?)\/\*\s*#endif\s*\*\//g }
      ]
      
      let result = code
      
      platformBlocks.forEach(({ platform: blockPlatform, regex }) => {
        result = result.replace(regex, (match, content) => {
          return blockPlatform === platform ? content : ''
        })
      })
      
      return result
    }
  }
}

平台适配器实现：

1. 存储适配器：

// adapters/storage.js
class StorageAdapter {
  constructor() {
    this.platform = getCurrentPlatform()
  }
  
  setItem(key, value) {
    /* #ifdef WEB */
    localStorage.setItem(key, JSON.stringify(value))
    /* #endif */
    
    /* #ifdef MP */
    wx.setStorageSync(key, value)
    /* #endif */
    
    /* #ifdef SSR */
    // SSR 环境下可能需要使用其他存储方案
    global.__storage__ = global.__storage__ || {}
    global.__storage__[key] = value
    /* #endif */
  }
  
  getItem(key) {
    /* #ifdef WEB */
    const item = localStorage.getItem(key)
    return item ? JSON.parse(item) : null
    /* #endif */
    
    /* #ifdef MP */
    return wx.getStorageSync(key) || null
    /* #endif */
    
    /* #ifdef SSR */
    return global.__storage__?.[key] || null
    /* #endif */
  }
}

export const storage = new StorageAdapter()

2. 网络请求适配器：

// adapters/request.js
class RequestAdapter {
  constructor() {
    this.platform = getCurrentPlatform()
  }
  
  async request(options) {
    const { url, method = 'GET', data, headers = {} } = options
    
    /* #ifdef WEB */
    const response = await fetch(url, {
      method,
      headers: {
        'Content-Type': 'application/json',
        ...headers
      },
      body: data ? JSON.stringify(data) : undefined
    })
    return await response.json()
    /* #endif */
    
    /* #ifdef MP */
    return new Promise((resolve, reject) => {
      wx.request({
        url,
        method,
        data,
        header: headers,
        success: (res) => resolve(res.data),
        fail: reject
      })
    })
    /* #endif */
    
    /* #ifdef SSR */
    const { default: axios } = await import('axios')
    const response = await axios({ url, method, data, headers })
    return response.data
    /* #endif */
  }
}

export const request = new RequestAdapter()

3. 路由适配器：

// adapters/navigation.js
class NavigationAdapter {
  navigateTo(path, params = {}) {
    /* #ifdef WEB */
    const router = useRouter()
    router.push({ path, query: params })
    /* #endif */
    
    /* #ifdef MP */
    const query = Object.keys(params)
      .map(key => `${key}=${encodeURIComponent(params[key])}`)
      .join('&')
    const url = query ? `${path}?${query}` : path
    
    wx.navigateTo({ url })
    /* #endif */
    
    /* #ifdef SSR */
    // SSR 环境下的路由处理
    if (typeof window !== 'undefined') {
      window.location.href = `${path}?${new URLSearchParams(params)}`
    }
    /* #endif */
  }
  
  goBack() {
    /* #ifdef WEB */
    const router = useRouter()
    router.back()
    /* #endif */
    
    /* #ifdef MP */
    wx.navigateBack()
    /* #endif */
    
    /* #ifdef SSR */
    if (typeof window !== 'undefined') {
      window.history.back()
    }
    /* #endif */
  }
}

export const navigation = new NavigationAdapter()

统一组件开发：

1. 跨平台组件：

<!-- shared/components/Button.vue -->
<template>
  <button 
    :class="buttonClasses"
    @click="handleClick"
  >
    <slot />
  </button>
</template>

<script setup>
import { computed } from 'vue'
import { getCurrentPlatform, PLATFORMS } from '@/config/platforms'

const props = defineProps({
  type: {
    type: String,
    default: 'default'
  },
  size: {
    type: String, 
    default: 'medium'
  }
})

const emit = defineEmits(['click'])

const platform = getCurrentPlatform()

const buttonClasses = computed(() => {
  const baseClass = 'btn'
  const platformClass = `btn--${platform}`
  const typeClass = `btn--${props.type}`
  const sizeClass = `btn--${props.size}`
  
  return [baseClass, platformClass, typeClass, sizeClass]
})

const handleClick = (event) => {
  /* #ifdef MP */
  // 小程序特有的点击处理逻辑
  wx.vibrateShort()
  /* #endif */
  
  emit('click', event)
}
</script>

<style scoped>
.btn {
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

/* #ifdef WEB */
.btn--web {
  transition: all 0.3s ease;
}
.btn--web:hover {
  opacity: 0.8;
}
/* #endif */

/* #ifdef MP */
.btn--miniprogram {
  /* 小程序特有样式 */
  border-radius: 8rpx;
  padding: 16rpx 32rpx;
}
/* #endif */
</style>

构建配置：

1. 多平台构建配置：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

const platform = process.env.PLATFORM || 'web'

const platformConfigs = {
  web: {
    entry: './src/platforms/web/main.js',
    outDir: 'dist/web',
    formats: ['es'],
    rollupOptions: {
      input: {
        index: './src/platforms/web/index.html'
      }
    }
  },
  
  miniprogram: {
    entry: './src/platforms/miniprogram/main.js',
    outDir: 'dist/miniprogram',
    formats: ['cjs'],
    rollupOptions: {
      external: ['wx'],
      output: {
        format: 'cjs',
        entryFileNames: 'app.js'
      }
    }
  },
  
  ssr: {
    entry: {
      client: './src/platforms/ssr/entry-client.js',
      server: './src/platforms/ssr/entry-server.js'
    },
    outDir: 'dist/ssr',
    ssr: true
  }
}

export default defineConfig({
  plugins: [
    vue(),
    createConditionalCompilePlugin(platform)
  ],
  
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  
  build: platformConfigs[platform],
  
  define: {
    __PLATFORM__: JSON.stringify(platform)
  }
})

2. 构建脚本：

{
  "scripts": {
    "dev:web": "PLATFORM=web vite",
    "dev:mp": "PLATFORM=miniprogram vite build --watch",
    "dev:ssr": "PLATFORM=ssr npm run build:ssr && npm run serve:ssr",
    
    "build:web": "PLATFORM=web vite build",
    "build:mp": "PLATFORM=miniprogram vite build",
    "build:ssr": "PLATFORM=ssr vite build",
    "build:all": "npm run build:web && npm run build:mp && npm run build:ssr"
  }
}

开发体验优化：

• 统一的开发调试工具
• 平台差异自动提示和检查
• 共享代码的类型安全保障
• 自动化的多平台测试流程

Best practices and pitfall experiences of Vite in large-scale team collaboration.

考察点：大型项目中Vite的工程化实践和团队协作经验。

答案：

在大规模团队协作中，Vite 需要从开发规范、性能优化、构建流程、团队协作等多个维度进行工程化实践，以确保项目的稳定性和开发效率。

开发环境标准化：

1. 统一开发环境配置：

// .viterc.js - 团队统一配置
export default {
  // Node.js 版本要求
  engines: {
    node: '>=16.0.0',
    npm: '>=8.0.0'
  },
  
  // 统一的 Vite 版本
  viteVersion: '4.4.0',
  
  // 必需的插件和版本
  requiredPlugins: {
    '@vitejs/plugin-vue': '^4.2.0',
    '@vitejs/plugin-react': '^4.0.0',
    'vite-plugin-eslint': '^1.8.0'
  },
  
  // 团队共享配置
  teamConfig: {
    server: {
      port: 3000,
      host: '0.0.0.0'
    },
    
    build: {
      sourcemap: true,
      reportCompressedSize: false // 大项目关闭以提升构建速度
    }
  }
}

// 环境检查脚本
function checkEnvironment() {
  const nodeVersion = process.version
  const requiredVersion = '16.0.0'
  
  if (!semver.gte(nodeVersion, requiredVersion)) {
    console.error(`Node.js version ${requiredVersion} or higher is required`)
    process.exit(1)
  }
}

2. 开发工具链统一：

// vite.config.base.js - 基础配置
export const createBaseConfig = (options = {}) => {
  return {
    plugins: [
      // 代码质量检查
      eslint({
        include: ['src/**/*.{js,ts,vue,jsx,tsx}'],
        exclude: ['node_modules', 'dist'],
        failOnError: true
      }),
      
      // TypeScript 检查
      checker({
        typescript: true,
        vueTsc: true,
        enableBuild: false // 构建时禁用以提升速度
      }),
      
      // 团队代码规范检查
      {
        name: 'team-standards',
        transform(code, id) {
          // 检查是否使用了禁止的 API
          if (code.includes('eval(')) {
            this.error('eval() is not allowed in team standards')
          }
          
          // 检查组件命名规范
          if (id.endsWith('.vue') && !/^[A-Z]/.test(path.basename(id))) {
            this.warn(`Vue component should use PascalCase: ${id}`)
          }
        }
      }
    ],
    
    resolve: {
      alias: {
        '@': path.resolve(process.cwd(), 'src'),
        '@components': path.resolve(process.cwd(), 'src/components'),
        '@utils': path.resolve(process.cwd(), 'src/utils'),
        '@api': path.resolve(process.cwd(), 'src/api')
      }
    }
  }
}

大型项目性能优化：

1. 构建性能优化：

// vite.config.performance.js
export default defineConfig({
  // 依赖预构建优化
  optimizeDeps: {
    // 大型项目需要显式包含所有依赖
    include: [
      'vue',
      'vue-router', 
      'pinia',
      'element-plus',
      'lodash-es',
      'dayjs',
      'axios'
    ],
    
    // 排除问题依赖
    exclude: ['@iconify/icons-ep'],
    
    // esbuild 配置优化
    esbuildOptions: {
      target: 'esnext'
    }
  },
  
  // 服务器配置
  server: {
    // 预热经常使用的文件
    warmup: {
      clientFiles: [
        './src/components/common/**/*.vue',
        './src/utils/**/*.js'
      ]
    },
    
    // 文件系统缓存
    fs: {
      cachedChecks: true
    }
  },
  
  // 构建优化
  build: {
    // 关闭压缩大小报告（大项目很慢）
    reportCompressedSize: false,
    
    // 增大 chunk 大小警告阈值
    chunkSizeWarningLimit: 1000,
    
    // 优化 chunk 分割
    rollupOptions: {
      output: {
        manualChunks: (id) => {
          // 第三方库分离
          if (id.includes('node_modules')) {
            if (id.includes('vue')) return 'vue'
            if (id.includes('element-plus')) return 'element-plus'
            if (id.includes('echarts')) return 'echarts'
            return 'vendor'
          }
          
          // 业务模块分离
          if (id.includes('src/modules/')) {
            const module = id.split('src/modules/')[1].split('/')[0]
            return `module-${module}`
          }
        }
      }
    }
  }
})

2. 开发服务器优化：

// 大型项目的开发服务器配置
export default defineConfig({
  server: {
    // 开启 HTTP/2
    https: true,
    
    // 增加并发请求限制
    middlewareMode: false,
    
    // 优化 HMR
    hmr: {
      // 使用自定义端口避免冲突
      port: 24678,
      
      // 覆盖检测
      overlay: {
        warnings: false, // 大项目关闭警告覆盖
        errors: true
      }
    },
    
    // 代理配置（多环境）
    proxy: createProxyConfig()
  }
})

function createProxyConfig() {
  const env = process.env.NODE_ENV || 'development'
  const targets = {
    development: 'http://dev-api.company.com',
    testing: 'http://test-api.company.com',
    staging: 'http://staging-api.company.com'
  }
  
  return {
    '/api': {
      target: targets[env],
      changeOrigin: true,
      configure: (proxy) => {
        // 代理错误处理
        proxy.on('error', (err, req, res) => {
          console.error('Proxy error:', err)
        })
      }
    }
  }
}

团队协作规范：

1. Git 工作流和 CI/CD 集成：

# .github/workflows/vite-ci.yml
name: Vite CI/CD

on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'npm'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Run linting
        run: npm run lint
      
      - name: Run type checking
        run: npm run type-check
      
      - name: Run tests
        run: npm run test:coverage
      
      - name: Build application
        run: npm run build
        env:
          NODE_ENV: production
      
      - name: Bundle analysis
        run: npm run analyze
      
      - name: Upload coverage
        uses: codecov/codecov-action@v3

  build-and-deploy:
    needs: test
    if: github.ref == 'refs/heads/main'
    runs-on: ubuntu-latest
    steps:
      - name: Build for production
        run: npm run build:prod
      
      - name: Deploy to staging
        run: npm run deploy:staging

2. 代码分层和模块化：

// 大型项目的分层架构
src/
├── applications/        # 应用层
│   ├── admin/          # 管理后台应用
│   ├── mobile/         # 移动端应用
│   └── web/            # Web 应用
├── modules/            # 业务模块
│   ├── user/
│   │   ├── api/
│   │   ├── components/
│   │   ├── stores/
│   │   ├── types/
│   │   └── index.ts
│   ├── product/
│   └── order/
├── shared/             # 共享代码
│   ├── components/     # 通用组件
│   ├── composables/    # 组合式函数
│   ├── utils/          # 工具函数
│   ├── types/          # 类型定义
│   └── constants/      # 常量定义
├── infrastructure/     # 基础设施层
│   ├── http/          # HTTP 客户端
│   ├── storage/       # 存储抽象
│   ├── router/        # 路由配置
│   └── plugins/       # 插件配置
└── config/            # 配置文件
    ├── vite/
    ├── env/
    └── build/

// 模块导出规范
// modules/user/index.ts
export { UserApi } from './api'
export { UserStore } from './stores'
export { UserProfile, UserList } from './components'
export type { User, UserCreateRequest } from './types'

常见踩坑和解决方案：

1. 内存和性能问题：

// 问题：大型项目开发时内存占用过高
// 解决方案：优化依赖和缓存策略

export default defineConfig({
  // 限制 esbuild 内存使用
  esbuild: {
    loader: 'tsx',
    include: /src\/.*\.[tj]sx?$/,
    exclude: /node_modules/
  },
  
  // 优化文件监听
  server: {
    watch: {
      // 忽略大文件夹
      ignored: [
        '**/node_modules/**',
        '**/dist/**',
        '**/.git/**',
        '**/coverage/**',
        '**/logs/**'
      ],
      
      // 使用轮询模式（WSL 环境）
      usePolling: process.env.USE_POLLING === 'true'
    }
  },
  
  // 分割配置文件
  plugins: loadPluginsByEnvironment(process.env.NODE_ENV)
})

2. 团队成员环境不一致：

// 解决方案：环境检查和自动修复
// scripts/check-env.js
async function checkAndFixEnvironment() {
  // 检查 Node 版本
  checkNodeVersion()
  
  // 检查 npm 源
  await checkNpmRegistry()
  
  // 检查必需依赖
  await checkRequiredDependencies()
  
  // 生成环境报告
  generateEnvironmentReport()
}

function checkNodeVersion() {
  const required = '>=16.0.0'
  const current = process.version
  
  if (!semver.satisfies(current, required)) {
    console.error(`❌ Node.js ${required} required, current: ${current}`)
    console.log(`💡 Install via nvm: nvm install 18 && nvm use 18`)
    process.exit(1)
  }
  
  console.log(`✅ Node.js version: ${current}`)
}

3. 构建产物不一致：

// 解决方案：锁定构建环境和依赖
// package.json
{
  "engines": {
    "node": ">=16.0.0",
    "npm": ">=8.0.0"
  },
  
  "volta": {
    "node": "18.17.0",
    "npm": "9.6.7"
  },
  
  "scripts": {
    "preinstall": "node scripts/check-env.js",
    "build:ci": "cross-env CI=true NODE_ENV=production vite build",
    "build:analyze": "npm run build:ci && npx vite-bundle-analyzer dist"
  }
}

// 构建环境标准化
const buildConfig = {
  // 确保构建产物一致性
  build: {
    target: 'es2015',
    cssTarget: 'chrome61',
    
    rollupOptions: {
      output: {
        // 固定文件名格式
        entryFileNames: 'assets/[name].[hash].js',
        chunkFileNames: 'assets/[name].[hash].js',
        assetFileNames: 'assets/[name].[hash].[ext]'
      }
    }
  }
}

监控和维护：

• 建立构建性能监控仪表板
• 定期进行依赖更新和安全扫描
• 收集和分析团队开发效率数据
• 持续优化工程化工具和流程

Code challenge example: Write a plugin - Automatically inject .env variables to window object

考察点：Vite插件开发能力和环境变量处理技巧。

答案：

实现一个 Vite 插件，能够自动将符合条件的环境变量注入到 window 对象中，同时提供安全过滤和类型转换功能。

完整插件实现：

// vite-plugin-env-to-window.js
import { loadEnv } from 'vite'
import path from 'path'

/**
 * 自动注入环境变量到 window 对象的 Vite 插件
 * @param {Object} options 配置选项
 * @param {string} options.prefix 环境变量前缀，默认 'VITE_WINDOW_'
 * @param {string} options.namespace window 对象的命名空间，默认 '__ENV__'
 * @param {Array} options.include 包含的变量名（支持正则）
 * @param {Array} options.exclude 排除的变量名（支持正则）
 * @param {boolean} options.enableTypeConversion 是否启用类型转换
 * @param {boolean} options.enableSafeMode 是否启用安全模式
 * @param {Function} options.transformer 自定义变量转换函数
 */
function createEnvToWindowPlugin(options = {}) {
  const {
    prefix = 'VITE_WINDOW_',
    namespace = '__ENV__',
    include = [],
    exclude = [],
    enableTypeConversion = true,
    enableSafeMode = true,
    transformer = null,
    mode = null
  } = options

  let envVars = {}
  let config = null

  return {
    name: 'vite:env-to-window',
    
    configResolved(resolvedConfig) {
      config = resolvedConfig
      
      // 加载环境变量
      const mode = resolvedConfig.mode
      const envDir = resolvedConfig.envDir || process.cwd()
      const loadedEnv = loadEnv(mode, envDir, '')
      
      // 过滤和处理环境变量
      envVars = processEnvVariables(loadedEnv, {
        prefix,
        include,
        exclude,
        enableTypeConversion,
        enableSafeMode,
        transformer
      })
      
      if (config.command === 'serve') {
        console.log('🌍 Environment variables to be injected into window:')
        console.table(envVars)
      }
    },

    transformIndexHtml: {
      enforce: 'pre',
      transform(html, context) {
        // 生成注入脚本
        const injectionScript = generateInjectionScript(envVars, namespace)
        
        // 在 head 标签末尾注入脚本
        const headEndIndex = html.indexOf('</head>')
        if (headEndIndex !== -1) {
          return html.slice(0, headEndIndex) + 
                 injectionScript + 
                 html.slice(headEndIndex)
        }
        
        // 如果没有 head 标签，在 body 开始处注入
        const bodyStartIndex = html.indexOf('<body>')
        if (bodyStartIndex !== -1) {
          const insertIndex = html.indexOf('>', bodyStartIndex) + 1
          return html.slice(0, insertIndex) + 
                 injectionScript + 
                 html.slice(insertIndex)
        }
        
        return html
      }
    },

    // 开发模式下的 HMR 支持
    configureServer(server) {
      server.ws.on('vite:env-updated', (data) => {
        // 环境变量变更时重新加载
        const newEnvVars = processEnvVariables(data.env, options)
        if (JSON.stringify(newEnvVars) !== JSON.stringify(envVars)) {
          envVars = newEnvVars
          
          // 通知客户端更新
          server.ws.send({
            type: 'custom',
            event: 'env-vars-updated',
            data: { envVars: newEnvVars, namespace }
          })
        }
      })
    },

    // 构建时优化
    generateBundle(options, bundle) {
      if (config.command === 'build') {
        // 在构建产物中添加环境变量信息（用于调试）
        const envInfo = {
          injectedVars: Object.keys(envVars),
          namespace,
          buildTime: new Date().toISOString()
        }
        
        this.emitFile({
          type: 'asset',
          fileName: 'env-injection-info.json',
          source: JSON.stringify(envInfo, null, 2)
        })
      }
    }
  }
}

/**
 * 处理环境变量
 */
function processEnvVariables(env, options) {
  const { 
    prefix, 
    include, 
    exclude, 
    enableTypeConversion, 
    enableSafeMode, 
    transformer 
  } = options

  const result = {}

  for (const [key, value] of Object.entries(env)) {
    // 前缀过滤
    if (prefix && !key.startsWith(prefix)) {
      continue
    }

    // 移除前缀后的实际键名
    const actualKey = prefix ? key.slice(prefix.length) : key

    // include/exclude 过滤
    if (include.length > 0) {
      const shouldInclude = include.some(pattern => {
        if (pattern instanceof RegExp) {
          return pattern.test(actualKey)
        }
        return actualKey.includes(pattern)
      })
      if (!shouldInclude) continue
    }

    if (exclude.length > 0) {
      const shouldExclude = exclude.some(pattern => {
        if (pattern instanceof RegExp) {
          return pattern.test(actualKey)
        }
        return actualKey.includes(pattern)
      })
      if (shouldExclude) continue
    }

    // 安全模式检查
    if (enableSafeMode && isSensitiveVariable(actualKey, value)) {
      console.warn(`⚠️  Skipping potentially sensitive variable: ${actualKey}`)
      continue
    }

    // 自定义转换器
    let processedValue = value
    if (transformer && typeof transformer === 'function') {
      processedValue = transformer(actualKey, value)
    }

    // 类型转换
    if (enableTypeConversion) {
      processedValue = convertValueType(processedValue)
    }

    result[actualKey] = processedValue
  }

  return result
}

/**
 * 类型转换
 */
function convertValueType(value) {
  if (typeof value !== 'string') {
    return value
  }

  // 布尔值转换
  if (value.toLowerCase() === 'true') return true
  if (value.toLowerCase() === 'false') return false

  // 数字转换
  if (/^\d+$/.test(value)) {
    return parseInt(value, 10)
  }
  
  if (/^\d*\.\d+$/.test(value)) {
    return parseFloat(value)
  }

  // JSON 转换
  if ((value.startsWith('{') && value.endsWith('}')) || 
      (value.startsWith('[') && value.endsWith(']'))) {
    try {
      return JSON.parse(value)
    } catch {
      // 解析失败，返回原值
    }
  }

  return value
}

/**
 * 检查是否为敏感变量
 */
function isSensitiveVariable(key, value) {
  const sensitiveKeywords = [
    'password', 'secret', 'key', 'token', 
    'private', 'auth', 'credential', 'pass'
  ]

  const keyLower = key.toLowerCase()
  const valueLower = String(value).toLowerCase()

  // 检查键名
  if (sensitiveKeywords.some(keyword => keyLower.includes(keyword))) {
    return true
  }

  // 检查值的格式（简单启发式）
  if (value.length > 20 && /^[A-Za-z0-9+/=_-]+$/.test(value)) {
    return true // 可能是 base64 编码的密钥
  }

  return false
}

/**
 * 生成注入脚本
 */
function generateInjectionScript(envVars, namespace) {
  const script = `
<script>
  (function() {
    'use strict';
    
    // 创建命名空间
    if (typeof window !== 'undefined') {
      window['${namespace}'] = window['${namespace}'] || {};
      
      // 注入环境变量
      const envVars = ${JSON.stringify(envVars, null, 2)};
      Object.assign(window['${namespace}'], envVars);
      
      // 提供访问方法
      window['${namespace}'].get = function(key, defaultValue) {
        return this.hasOwnProperty(key) ? this[key] : defaultValue;
      };
      
      window['${namespace}'].has = function(key) {
        return this.hasOwnProperty(key);
      };
      
      window['${namespace}'].all = function() {
        return Object.assign({}, this);
      };
      
      // 开发模式下的热更新支持
      if (import.meta && import.meta.hot) {
        import.meta.hot.on('env-vars-updated', (data) => {
          Object.assign(window['${namespace}'], data.envVars);
          console.log('🔄 Environment variables updated');
        });
      }
      
      // 调试信息
      if (console && console.groupCollapsed) {
        console.groupCollapsed('🌍 Injected Environment Variables');
        console.table(envVars);
        console.groupEnd();
      }
    }
  })();
</script>
`
  return script
}

// 默认导出
export default createEnvToWindowPlugin

// 命名导出（支持不同的导入方式）
export { createEnvToWindowPlugin }

使用示例：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import envToWindow from './plugins/vite-plugin-env-to-window'

export default defineConfig({
  plugins: [
    vue(),
    
    // 基础用法
    envToWindow(),
    
    // 高级配置
    envToWindow({
      // 只处理 VITE_WINDOW_ 前缀的变量
      prefix: 'VITE_WINDOW_',
      
      // 注入到 window.__APP_CONFIG__ 命名空间
      namespace: '__APP_CONFIG__',
      
      // 包含特定变量
      include: ['API_URL', 'VERSION', /^FEATURE_/],
      
      // 排除敏感变量
      exclude: ['SECRET', 'PRIVATE'],
      
      // 启用类型转换
      enableTypeConversion: true,
      
      // 启用安全模式
      enableSafeMode: true,
      
      // 自定义转换器
      transformer: (key, value) => {
        if (key === 'VERSION') {
          return `v${value}`
        }
        return value
      }
    })
  ]
})

环境变量文件：

# .env
VITE_WINDOW_API_URL=https://api.example.com
VITE_WINDOW_VERSION=1.0.0
VITE_WINDOW_ENABLE_MOCK=true
VITE_WINDOW_MAX_RETRY=3
VITE_WINDOW_FEATURES=["feature1","feature2"]

# 这些不会被注入（没有 VITE_WINDOW_ 前缀）
DB_PASSWORD=secret123
JWT_SECRET=mysecret

客户端使用：

// 在应用中使用注入的环境变量
console.log(window.__ENV__.API_URL)        // "https://api.example.com"
console.log(window.__ENV__.VERSION)        // "1.0.0"
console.log(window.__ENV__.ENABLE_MOCK)    // true (自动类型转换)
console.log(window.__ENV__.MAX_RETRY)      // 3 (自动类型转换)
console.log(window.__ENV__.FEATURES)       // ["feature1", "feature2"]

// 使用提供的方法
const apiUrl = window.__ENV__.get('API_URL', 'http://localhost:3000')
const hasFeature = window.__ENV__.has('FEATURE_X')
const allVars = window.__ENV__.all()

插件特性：

• 安全过滤：自动识别和排除敏感变量
• 类型转换：自动转换字符串为合适的 JavaScript 类型
• 热更新支持：开发模式下支持环境变量热更新
• 命名空间隔离：避免全局变量冲突
• 调试友好：提供详细的注入信息和日志
• 构建优化：生产环境下生成注入信息文件