学习并配置 Vite 工程、自动引入插件【Plan - May - Week 3】

一、Vite 插件

1、简介

Vite 的插件系统借鉴了 Rollup，同时扩展了开发时的能力（如中间件、HMR 等）。它允许开发者通过插件扩展构建流程、开发体验和调试功能。

插件可用于：

• 转换源码（如 JSX / TS 转换）
• 注入虚拟模块
• 修改 dev server 行为（如中间件、请求重写）
• 添加自定义构建逻辑（如代码压缩、分析）
• 兼容其他工具生态（如 legacy 浏览器支持）

2、插件开发基础

插件结构

interface Plugin {
    name: string;
    enforce?: 'pre' | 'post';
    config?: () => UserConfig;
    configResolved?: (config: ResolvedConfig) => void;
    configureServer?: (server: ViteDevServer) => void;
    transformIndexHtml?: Hook;
    resolveId?: Hook;
    load?: Hook;
    transform?: Hook;
    buildStart?: () => void;
    generateBundle?: Hook;
    closeBundle?: () => void;
}

关键钩子说明

钩子名称	作用说明
enforce	控制插件执行顺序（pre优先，post滞后）
config	修改 Vite 配置
configureServer	配置开发服务器（如添加中间件）
transform	转换模块代码（如将 TS 转为 JS）
resolveId	自定义模块解析逻辑
load	加载自定义模块内容
transformIndexHtml	修改 index.html 内容
closeBundle	构建完成后的清理或日志输出

3、插件运行时阶段

1. 初始化阶段
   • 解析用户配置，执行 config/configResolved
2. 开发服务器启动阶段
   • 执行 configureServer、transformIndexHtml 等
3. 模块加载/解析阶段
   • 执行 resolveId、load、transform
4. 构建阶段（rollup）
   • 执行 buildStart、generateBundle、closeBundle

4、内置插件使用示例

// vite.config.ts
import legacy from '@vitejs/plugin-legacy';

export default {
    plugins: [
        legacy({
            targets: ['defaults', 'not IE 11']
        })
    ]
}

• 该插件用于支持旧浏览器（通过 Babel 转译及 polyfill）

5、调试插件技巧

• 在插件内 console.log() 打印信息以调试运行时阶段
• 使用 vite --debug 查看插件加载顺序及调试信息
• 利用 enforce 控制执行顺序排查冲突

6、推荐插件生态

插件名	功能说明
@vitejs/plugin-vue	支持 Vue 单文件组件
@vitejs/plugin-react	支持 React 和 JSX
vite-plugin-pages	文件系统驱动的路由
vite-plugin-pwa	构建渐进式 Web 应用
vite-plugin-inspect	插件调试工具，查看插件钩子执行情况
vite-plugin-md	支持 Markdown 作为 Vue 组件
vite-plugin-compress	启用 gzip/brotli 压缩

7、自定义插件示例

// 插件：将代码中所有 foo 替换为 bar
function replaceFooPlugin() {
    return {
        name: 'replace-foo',
        transform(code, id) {
            if (id.endsWith('.js')) {
                return code.replace(/foo/g, 'bar');
            }
        }
    }
}

二、unplugin-auto-import 自动引入

1、插件简介

unplugin-auto-import是一个基于 unplugin 构建的通用自动导入插件，支持 Vite、Webpack、Rollup、ESBuild 构建工具。

它能自动导入函数/变量，减少手动 import 的重复性工作，极大提升开发效率，特别适合 Vue、React 等框架项目。

2、核心功能

• 自动导入指定模块的 API（如 Vue 的 ref, computed, React 的 useState 等）
• 支持自动类型声明（auto-imports.d.ts）
• 支持 ESLint 配合自动识别
• 可扫描多个目录、模块、文件
• 支持 Vue 的模板中自动导入

3、安装方式

npm install -D unplugin-auto-import

4、基本使用（以 Vite + Vue 为例）

在 vite.config.ts 配置：

import AutoImport from 'unplugin-auto-import/vite';

export default {
    plugins: [
        AutoImport({
            imports: [
                'vue',        // 自动导入 ref, reactive 等
                'vue-router', // 自动导入 useRouter 等
                {
                    axios: [
                        ['default', 'axios'] // 自动导入 axios 默认导出为 axios
                    ]
                }
            ],
            dts: 'src/auto-imports.d.ts', // 自动生成类型声明文件
        }),
    ]
}

自动生效的效果：

使用 ref 或 axios 时，无需手动导入：

const count = ref(0);
const res = await axios.get('/api/data');

不需要：

import { ref } from 'vue';
import axios from 'axios';

5、进阶配置

自定义目录扫描（如 utils）

AutoImport({
  dirs: [
    './src/composables',
    './src/utils'
  ],
})

类型声明控制

dts: './types/auto-imports.d.ts', // 自定义生成位置

配合 ESLint

• 自动生成 ESLint globals 配置，避免未定义警告：

eslintrc: {
  enabled: true, // 生成 eslintrc-auto-import.json
  filepath: './.eslintrc-auto-import.json',
}

• 然后在 .eslintrc 中引入该配置：

{
  "extends": ["./.eslintrc-auto-import.json"]
}

6、常见适配模块

模块	支持项举例
vue	ref, reactive, computed
vue-router	useRoute, useRouter
vue-i18n	useI18n
pinia	defineStore, storeToRefs
axios	axios（默认导出）
react	useState, useEffect, 等
vitest	describe, test, expect 等测试函数

7、工作机制

• 在构建时扫描代码 AST，自动为检测到的 API 插入对应 import
• 在 dts 类型声明文件中注册类型支持
• 与 unplugin 框架集成，可跨构建工具无缝支持

三、Vite 性能

1、性能优化目标

Vite 设计的目标是开发体验更快、构建速度更高效。其默认配置已具备良好性能，但在大型项目中仍有优化空间。

优化目标包括：

• 提升开发服务器启动速度
• 降低热更新延迟（HMR 性能）
• 加快生产环境构建与加载速度

2、开发时性能优化

减少依赖预构建时间

Vite 使用 esbuild 对依赖进行预构建：

• 避免引入大型、非 ESM 的包
• 使用优化后的构建版本（如 lodash-es 替代 lodash）

// vite.config.ts
export default {
  optimizeDeps: {
    include: ['lodash-es'],
    exclude: ['lodash']
  }
}

缩小模块热更新影响范围

• HMR 是基于模块依赖图递归更新的
• 建议拆分组件，避免模块依赖链过深

使用 defineExpose 限制组件暴露内容
使用 defineProps 和 defineEmits 精准声明依赖

3、构建时性能优化

使用生产环境优化构建参数

vite build --mode production

可激活压缩、tree-shaking、chunk 拆分等优化

利用 build.rollupOptions 手动拆分代码块

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

开启 gzip / brotli 压缩

import compress from 'vite-plugin-compression';

export default {
  plugins: [
    compress({ algorithm: 'brotliCompress' })
  ]
}

4、静态资源优化

图片优化

开发阶段使用压缩图片（如 webp 格式）

构建阶段推荐使用 vite-imagetools 插件

静态资源内联配置

export default {
  build: {
    assetsInlineLimit: 4096 // 默认 4kb
  }
}

5、调试与分析工具

构建性能分析插件

使用 rollup-plugin-visualizer 可分析产物结构：

import { visualizer } from 'rollup-plugin-visualizer';

export default {
  build: {
    rollupOptions: {
      plugins: [visualizer({ open: true })]
    }
  }
}

开发日志调试

vite --debug

可查看依赖扫描、预构建、HMR 等详细信息

6、服务端渲染 (SSR) 优化建议

使用 vite-ssr 或 vite-plugin-ssr

减少不必要的客户端 JS 注入

合理缓存 SSR 结果

四、Git 协作工作流

1、Git 工作流概述

Git 工作流定义了团队使用 Git 进行协作开发的规则和模式。选择合适的工作流有助于：

• 保持团队协作顺畅
• 提高代码质量与稳定性
• 降低合并冲突的频率

2、常见 Git 工作流类型

集中式工作流（Centralized Workflow）

特点：

• 类似 SVN 的开发模式
• 所有成员从一个中央主分支（如 main）拉取和推送代码
• 适合小团队或迁移自 SVN 的项目

优点：

• 简单，易于上手
• 所有人操作相同分支

缺点：

• 合并冲突频繁
• 缺乏版本隔离和分支管理能力

Feature 分支工作流（Feature Branch Workflow）

特点：

• 每个功能/修复点一个独立分支，如 feature/login-page
• 完成后合并至 main（或 develop）

优点：

• 隔离开发与主干，便于代码评审
• 适合持续集成（CI）

缺点：

• 分支多，需管理合并顺序
• 需要良好的命名与合并规范

Git Flow 工作流（Git Flow Workflow）

特点：

• 严格分支管理：main、develop、feature/*、release/*、hotfix/*
• main 仅保存稳定发布版本，开发在 develop 上进行

优点：

• 结构清晰，适合大项目
• 发布流程规范，支持版本化开发

缺点：

• 分支和流程复杂，初学者难以掌握
• 不太适合持续部署（CD）

Forking 工作流（Forking Workflow）

特点：

• 每人从主仓库 Fork 自己的仓库，开发后通过 PR（Pull Request）合并
• 开源社区常用，适用于贡献者较多的项目

优点：

• 权限控制严格，适合外部协作
• 每人独立环境，自由度高

缺点：

• 提交流程较繁琐
• 不适合频繁 push 的团队内协作

3、工作流选择建议

团队规模	推荐工作流	说明
小型	集中式 / Feature 分支	简单直接，便于沟通
中型	Feature 分支 / Git Flow	需一定分支管理，适合多人协作
大型	Git Flow / Forking	多人开发、多版本、权限控制
开源项目	Forking Workflow	PR 审核机制更适合外部贡献者参与

4、实践建议

小团队初期推荐 Feature 分支工作流

对版本管理严格要求、发布周期清晰的项目推荐 Git Flow

对外开源项目统一使用 Fork + PR 模式

所有工作流都建议配合 代码审查（Code Review） 和 CI/CD

学习资料来源：

插件 | Vite
unplugin-auto-import | 自动引入
性能 | Vite
Git 工作流程