ESM（ECMAScript Modules）在现代浏览器中得到了广泛支持，使得前端开发可以直接利用 import 和 export 进行模块化开发，而无需借助打包工具。浏览器通过 <script type="module"> 标签来加载 ES 模块。Vite 正是利用了这一特性来实现无打包的开发模式。

项目初始化与创建

首先，我们需要通过 Vite 的 CLI 工具来创建项目。Vite5 提供了更加简洁的项目初始化方式，可以使用以下命令：

npm create vite@latest

在执行此命令后，CLI 会询问你选择框架类型（例如，Vue、React、Svelte 等），并且提供是否使用 TypeScript 的选项。选择完后，CLI 会自动初始化项目并安装相关依赖。

选择项目模板 ：Vue、React、Preact、Vanilla 等。
选择是否启用 TypeScript ：Vite 支持 TypeScript，无需额外配置。
安装依赖 ：默认安装 vite 、 @vitejs/plugin-vue 等基础依赖。

Vite 配置文件 (vite.config.ts)

Vite5 的配置文件 vite.config.ts 是一个 TypeScript 配置文件，通常包含以下几个部分：

基本配置项

root ：设置项目根目录，默认是项目所在目录。
base ：设置公共路径，如果你的应用部署到非根目录时可以设置。
plugins ：插件配置，用于集成各种功能，如 Vue、React 支持等。

import { defineConfig } from 'vite';
export default defineConfig({
  base: '/',
  plugins: [
    // 插件配置
  ],
});

开发与构建配置

server ：开发服务器配置，包括端口、代理、热更新等。
build ：打包相关配置，优化构建过程，例如指定打包路径、分割代码等。

export default defineConfig({
  server: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:5000',
    },
  },
  build: {
    outDir: 'dist',
    chunkSizeWarningLimit: 500, // 设置构建文件大小警告
  },
});

环境变量与模式

Vite 支持环境变量的配置，可以在 .env 文件中进行设置。例如，开发环境和生产环境可能会有不同的 API 地址：

VITE_API_URL=http://localhost:3000

在 vite.config.ts 中可以通过 import.meta.env 来访问这些变量。

Vue 与 React 项目配置基于 TypeScript

Vue 项目配置

Vue 项目默认使用 @vitejs/plugin-vue 插件。在 vite.config.ts 中进行如下配置：

import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite';
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': '/src', // 设置路径别名
    },
  },
});

React 项目配置

React 项目使用 @vitejs/plugin-react 插件，确保 JSX 和 React 语法正常工作：

import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
export default defineConfig({
  plugins: [react()],
});

常见配置与优化手段

插件优化

Vite 提供了丰富的插件支持，例如：

@vitejs/plugin-vue ：Vue 项目配置
@vitejs/plugin-react ：React 项目配置
vite-plugin-compress ：支持压缩代码，减小打包文件大小

import vue from '@vitejs/plugin-vue';
export default defineConfig({
  plugins: [vue()],
});

代码分割与懒加载

Vite 内置支持代码分割，开发者可以使用动态 import() 来实现懒加载：

const Component = defineAsyncComponent(() => import('./Component.vue'));

优化构建速度

Vite 默认采用 esbuild 进行编译，极大提高了构建速度。你可以通过以下几种方式进一步优化：

开启 esbuild 缓存：减少重复编译。
利用 build.rollupOptions 配置：自定义代码分割策略，减少冗余模块。

build: {
  rollupOptions: {
    output: {
      manualChunks(id) {
        if (id.includes('node_modules')) {
          return 'vendor';
        }
      },
    },
  },
}

开发模式优化

开启热更新 (HMR) ：通过 server.hmr 配置调整热更新的行为，避免开发时的性能瓶颈。
自动化测试与CI集成 ：Vite 支持与 Jest 或 Mocha 集成，用于自动化测试。

【中高级】面试官：了解过微内核设计思想吗？Vite5 的插件化设计思想是怎样完成个性化打包构建需求的？

微内核设计思想

微内核设计思想源于操作系统中的微内核架构，目的是将核心功能与扩展功能解耦，从而提高系统的灵活性、可扩展性和定制化程度。在微内核设计中，系统的核心部分负责基本的功能和管理，而附加的功能（如驱动、插件等）通过插件或模块的形式进行扩展。

在前端工具中，微内核设计思想通常体现在构建工具和开发框架中，允许用户根据需求通过插件的方式扩展工具的功能，而不需要修改工具的核心部分。这使得开发者可以针对不同的应用场景和需求，选择合适的插件进行组合，从而获得个性化的构建体验。

Vite5 的插件化设计思想

Vite5 强烈体现了微内核设计思想，通过插件化的方式让用户能够根据需要定制构建过程。Vite5 的核心只负责项目启动、构建流的管理以及一些基础功能，而扩展功能（例如，支持 Vue、React、TypeScript、代码压缩等）则通过插件来实现。

Vite5 插件架构概览

Vite5 的插件化设计是基于 Rollup 插件架构的，Vite 本身就是建立在 Rollup 的基础上。其插件系统允许开发者定义一系列钩子和生命周期方法来在不同阶段进行插拔式的操作。主要包括以下几个部分：

插件生命周期钩子 ：插件在 Vite 的生命周期中通过钩子与构建过程进行交互。例如， transform 钩子允许插件修改文件内容， build 钩子可以在构建阶段进行操作。
插件接口 ：Vite 提供了一些基础接口，开发者可以实现自己的插件，并通过配置项启用它们。

插件系统的实现

Vite5 的插件通过 vite.config.ts 文件中的 plugins 数组进行配置。每个插件可以是一个对象，包含一些钩子和插件行为。Vite 内置的插件包括对 Vue、React、TypeScript 等框架的支持，外部插件则通过社区开发和维护。

典型插件介绍

@vitejs/plugin-vue

这是一个官方插件，用于处理 Vue 单文件组件（SFC）。它让 Vite 支持 Vue 项目，处理 Vue 文件的解析、编译、热更新等任务。该插件背后实际使用了 Vue 的编译工具（如 vue/compiler-sfc ）。

import vue from '@vitejs/plugin-vue';
export default defineConfig({
  plugins: [vue()],
});

插件实现 ：

Transform ：将 .vue 文件转换为标准的 JavaScript 代码。
Hot Module Replacement (HMR) ：对 Vue 单文件组件进行热更新。
代码分割 ：支持按需加载 Vue 组件，提升构建性能。

@vitejs/plugin-react

该插件用于支持 React 项目，包括 JSX 转换、React Fast Refresh 和代码分割等。它帮助开发者无缝集成 React 开发环境，提供了一些 Vite 钩子的扩展。

import react from '@vitejs/plugin-react';
export default defineConfig({
  plugins: [react()],
});

插件实现 ：

JSX 转换 ：使用 esbuild 转换 JSX 代码。
Fast Refresh ：支持 React 的快速热更新。
Tree Shaking ：自动移除未使用的 React 组件和代码。

vite-plugin-compress

这是一个用于压缩构建输出文件的插件，支持 Gzip、Brotli 等常见的压缩格式。它非常适合优化生产环境中的文件大小，减少网络传输时间。

import viteCompression from 'vite-plugin-compress';
export default defineConfig({
  plugins: [viteCompression()],
});

插件实现 ：

Build ：在构建阶段，插件会读取输出文件，并使用压缩算法生成新的压缩文件。
输出优化 ：生成 .gz 或 .br 格式的文件，浏览器支持时会自动加载这些文件，减小文件传输大小。

插件生命周期

Vite5 的插件系统基于 Rollup 的插件架构，提供了一系列生命周期钩子，允许开发者在构建过程的不同阶段插入自定义逻辑。以下是对这些生命周期钩子的详细说明：

Vite 独有的钩子

config(config, env) ：在 Vite 解析配置之前调用，允许插件修改 Vite 的配置。 config 参数是用户的配置对象， env 参数包含当前的模式（ mode ）和命令（ command ）。
configResolved(resolvedConfig) ：在 Vite 配置解析完成后调用，提供最终的配置对象，插件可以在此阶段访问完整的配置。
configureServer(server) ：用于配置开发服务器，插件可以在此添加自定义中间件或修改服务器行为。
transformIndexHtml(html) ：在开发阶段，修改 HTML 模板的钩子，插件可以在此修改 index.html 的内容。
handleHotUpdate(ctx) ：在热模块替换（HMR）过程中调用，插件可以在此处理模块更新的逻辑。

Rollup 通用钩子

options(options) ：在构建开始之前调用，允许插件修改 Rollup 的选项。
buildStart(options) ：在每次构建开始时调用，插件可以在此执行构建前的初始化操作。
resolveId(source, importer, options) ：在模块解析过程中调用，插件可以在此自定义模块 ID 的解析逻辑。
load(id) ：在加载模块时调用，插件可以在此提供模块的内容。
transform(code, id) ：在转换模块时调用，插件可以在此修改模块的代码。
buildEnd(error) ：在构建结束时调用，插件可以在此执行构建后的操作。
generateBundle(options, bundle) ：在生成 bundle 时调用，插件可以在此修改输出的 bundle。
closeBundle() ：在构建完成并关闭 bundle 时调用，插件可以在此执行清理或其他收尾工作。

插件执行顺序

Vite 插件的执行顺序由其在配置中的声明顺序和 enforce 属性决定：

Alias 插件 ：首先执行，用于处理路径别名等解析配置。
enforce: 'pre' 的插件 ：在 Vite 的核心插件之前执行，适用于需要在构建前进行配置或修改的场景。
Vite 核心插件 ：执行 Vite 内置的插件，如处理静态资源、HTML 模板等。
无 enforce 属性的插件 ：在核心插件之后执行，适用于一般的插件扩展。
enforce: 'post' 的插件 ：最后执行，适用于需要在构建后进行操作的场景，如代码压缩、优化等。

自定义 Vite 插件

在 Vite5 中，我们不仅能使用现有的插件，还能创建自定义插件来满足一些特殊的需求。以下是两个比较复杂的自定义 Vite 插件的例子，它们能够支持更多的个性化场景。

自定义插件：Emoji 替换插件

插件功能描述

该插件扫描项目源代码中的文本，查找特定的 Emoji 标识符，并将其替换为实际的 Emoji 图像。例如，将 :smile: 替换为 😀， :heart: 替换为 ❤️。

插件实现步骤

创建插件文件

在项目根目录下创建一个名为 vite-plugin-emoji-replacer.ts 的文件，并添加以下内容：

import { Plugin } from 'vite';

export function emojiReplacerPlugin(): Plugin {
  return {
    name: 'vite-plugin-emoji-replacer',
    transform(code, id) {
      // 仅处理 JavaScript 和 TypeScript 文件
      if (id.endsWith('.js') || id.endsWith('.ts')) {
        const emojiMap: Record<string, string> = {
          ':smile:': '😀',
          ':heart:': '❤️',
          ':thumbsup:': '👍',
          ':rocket:': '🚀',
          ':fire:': '🔥',
          // 添加更多的 Emoji 替换规则
        };

        let transformedCode = code;
        for (const [key, value] of Object.entries(emojiMap)) {
          const regex = new RegExp(`\\${key}`, 'g');
          transformedCode = transformedCode.replace(regex, value);
        }

        return {
          code: transformedCode,
          map: null, // 如果需要 source map，可以在此生成
        };
      }
      return null;
    },
  };
}

在 `vite.config.ts` 中使用插件

在项目根目录下的 vite.config.ts 文件中，引入并使用该插件：

import { defineConfig } from 'vite';
import { emojiReplacerPlugin } from './vite-plugin-emoji-replacer';

export default defineConfig({
  plugins: [emojiReplacerPlugin()],
});

使用示例

在项目中的任意 .js 或 .ts 文件中，使用 Emoji 标识符，例如：

const message = 'Hello, world! :smile: :rocket:';
console.log(message);

在构建过程中，插件会将 :smile: 替换为 😀， :rocket: 替换为 🚀，最终输出的代码将是：

const message = 'Hello, world! 😀 🚀';
console.log(message);

插件扩展

为了使插件更具实用性和可配置性，可以添加以下功能：

配置选项 ：允许用户自定义 Emoji 替换规则，例如通过插件选项传入自定义的替换映射。
支持其他文件类型 ：扩展插件，使其支持处理其他类型的文件，如 .vue 、 .jsx 等。
性能优化 ：对于大型项目，优化正则表达式的匹配方式，确保插件在构建过程中的高效执行。

自定义插件：代码统计插件

这个插件的作用是统计项目中每个模块的大小，并输出统计报告。可以通过 build 钩子来收集每个文件的构建信息，并将其输出为报告文件。

import { Plugin } from "vite";
import fs from "fs/promises";
import path from "path";

export function codeSizeReportPlugin(): Plugin {
  return {
    name: "code-size-report",
    // config
    async generateBundle(_, bundle) {
      const stats: string[] = [];
      // 遍历 bundle 中的文件
      for (const fileName in bundle) {
        const asset = bundle[fileName];
        if (asset.type === "asset") {
          // 处理 OutputAsset 类型
          const codeSize = asset.source ? asset.source.length : 0;
          stats.push(`- **${fileName}**: ${(codeSize / 1024).toFixed(2)} kB`);
        } else if (asset.type === "chunk") {
          // 处理 OutputChunk 类型
          const codeSize = asset.code ? asset.code.length : 0;
          stats.push(`- **${fileName}**: ${(codeSize / 1024).toFixed(2)} kB`);
        }
      }

      const markdown = `# Build Stats\n\n${stats.join("\n")}\n`;

      // 获取输出目录
      const outDir = path.resolve(__dirname, "dist");
      // 确保输出目录存在
      await fs.mkdir(outDir, { recursive: true });
      // 写入 build-stats.md 文件
      await fs.writeFile(path.join(outDir, "build-stats.md"), markdown);
    },
  };
}

【专家级】面试官：我们有 rspack 这类构建工具，如果让你从零到一实现 Vite 全生态，具体思路是什么？

在构建现代前端开发工具链时，例如 VoidZero 提出了构建统一、高性能的 JavaScript 开发工具链的愿景。该工具链涵盖了解析、格式化、代码检查、打包、最小化、测试等多个方面，旨在提升开发者的生产力。

Bundleless：无打包的开发体验

VoidZero 提出了 Bundleless 的概念，即在开发环境中取消传统的代码打包过程。这样可以显著提升开发服务器的启动速度和模块热更新（HMR）的性能。通过原生 ES 模块导入方式，开发服务器可以直接提供源码，浏览器在请求源码时进行转换和加载，避免了繁琐的打包过程。

AST（抽象语法树）：统一工具链的基础

在 VoidZero 的愿景中，AST（抽象语法树）扮演着关键角色。通过使用统一的 AST，工具链中的各个组件（如解析器、转换器、打包器等）可以共享相同的代码表示，减少了重复解析的开销，确保了工具链的一致性和高性能。

从 Vite 到 Oxc，再到 Rolldown，最终到 Vitest：全链路统一

VoidZero 的工具链包括多个关键项目：

Vite ：作为前端构建工具，Vite 提供了快速的开发服务器和高效的构建功能。
Oxc ：这是一个高性能的 JavaScript 语言工具链，负责代码的解析和转换。
Rolldown ：作为 Rollup 的 Rust 实现，Rolldown 提供了高效的打包功能。
Vitest ：这是一个功能齐全的 Web 应用程序测试运行器，支持多种测试框架和断言库。

Vite 构建过程详述

Vite 构建过程（Vite Build）

1. 项目初始化

与开发模式类似，构建过程同样从读取和解析 vite.config.js 配置文件开始，进行初始化配置。

2. 入口解析

Vite 使用 Rollup 作为其底层打包工具。在构建开始时，Vite 会将项目的入口文件传递给 Rollup。Rollup 从入口文件出发，递归解析所有的依赖模块，构建模块依赖图。

3. 插件处理

Vite 和 Rollup 的插件系统在构建过程中起到关键作用。插件可以在不同的构建阶段对代码进行处理，如：

代码转换 : 使用 Babel 或 TypeScript 将源代码转换为浏览器兼容的 JavaScript 代码。
代码压缩 : 使用 Terser 对 JavaScript 代码进行压缩，减少文件体积。
CSS 处理 : 使用 PostCSS 对 CSS 进行预处理、合并和压缩。
资源处理 : 处理静态资源（图片、字体等），将它们转换为适合生产环境使用的格式。

4. Tree Shaking

Rollup 的 Tree Shaking 功能在构建过程中移除未使用的代码，确保最终的打包产物中只包含实际需要的部分。Tree Shaking 通过静态分析模块的导入和导出，删除那些没有被引用的代码。

5. 代码拆分

为了优化加载性能，Vite 支持代码拆分。Rollup 会根据模块的依赖关系，将代码拆分成多个模块块（chunks）。这些模块块在生产环境中可以按需加载，减少初始加载时间。

6. 生成输出

Rollup 将所有的模块块进行打包，生成最终的输出文件。输出文件会根据配置文件中的 output 选项进行分类，通常包括：

index.html : 入口 HTML 文件。
main.js : 主入口 JavaScript 文件。
vendor.js : 第三方依赖。
common.js : 公共模块。

7. 资源优化

在构建过程中，Vite 对静态资源进行优化处理：

CSS 文件 : 合并和压缩 CSS 文件，生成最终的 CSS 文件，并为其生成 Source Map。
静态资源 : 压缩图片、字体等资源，并为这些资源生成合适的文件名（包括内容哈希），以便于缓存管理。

8. 缓存策略

Vite 会为生成的静态资源文件添加内容哈希，确保浏览器在文件内容发生变化时能够正确更新缓存。这有助于浏览器有效管理缓存，提升页面加载性能。

总结

Vite 本地开发服务

项目初始化 ：读取并解析 vite.config.js 配置文件。
启动开发服务器 ：基于 express 启动 HTTP 服务器。
ESM 支持 ：利用浏览器的原生 ESM 进行模块加载。
按需编译 ：实时编译请求的模块。
热模块替换（HMR） ：通过 WebSocket 实现模块的局部更新。
Source Maps ：自动生成 Source Maps，便于调试。

Vite 构建过程

项目初始化 ：读取并解析 vite.config.js 配置文件。
入口解析 ：使用 Rollup 构建模块依赖图。
插件处理 ：通过插件系统进行代码转换、压缩和资源处理。
Tree Shaking ：移除未使用的代码。
代码拆分 ：将代码拆分成多个模块块。
生成输出 ：打包生成最终的输出文件。
资源优化 ：优化 CSS 和静态资源。
缓存策略 ：为静态资源添加内容哈希，便于缓存管理。

Vite 源码核心实现

我们实现本地开发构建，使用 esbuild 作为 TypeScript 编译器并在服务器上实时编译 TypeScript 文件。

项目结构

项目基础结构

/my-project
|-- src
|   |-- index.html
|   |-- index.ts
|   |-- hello.ts
|-- tsconfig.json
|-- package.json
|-- server.js

Typescript 配置

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ES6",
    "outDir": "./dist",
    "rootDir": "./src",
    "moduleResolution": "node"
  },
  "include": ["src/**/*"]
}

安装依赖

我们需要安装 express 和 esbuild 来搭建服务器并进行 TypeScript 编译。

npm install express esbuild @types/express --save-dev

编写 server（ `server.js` ）

我们将使用 esbuild 的 API 来动态编译 TypeScript。这里的服务器将处理对 .ts 文件的请求，并在浏览器请求时即时编译它们。

server.js :

const express = require("express");
const esbuild = require("esbuild");
const fs = require("fs");
const path = require("path");
const app = express();
const port = 3000;

app.get("/", (req, res) => {
  res.sendFile(__dirname + "/src/index.html");
});

app.get("/*.ts", async (req, res) => {
  try {
    const reqPath = req.path;
    
    const file = fs.readFileSync(
      path.join(__dirname, "src", reqPath),
      "utf8"
    );
    
    const result = await esbuild.transform(file, {
      loader: "ts",
      format: "esm",
      target: "es2017",
    });
    res.type("js");
    res.send(result.code);
  } catch (error) {
    console.error(error);
    res.status(500).send("Server error");
  }
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

定义 HTML 文件 ( `src/index.html` )

修改 HTML 文件，使其直接请求 TypeScript 文件。浏览器将收到经过 esbuild 编译后的 JavaScript 代码。

index.html :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TypeScript Module Example</title>
</head>
<body>
    <script type="module" src="/src/index.ts"></script>
</body>
</html>

运行项目

启动服务器，然后在浏览器中访问 http://localhost:3000 来查看结果。

node server.js

或者指定 package.json，通过脚本命令启动服务

{
    "scripts": {
        "dev": "node server.js"
    }
}

专家简历优化指南（目标 35K+ ）

核心技能

熟练掌握 HTML、CSS、JavaScript、Typescript 以及 OOP、FP、 AOP 等设计思想
掌握样式体系构建与落地，对 css 预编译、css in js、module css 以及 utility-first CSS 有深入研究，并从零改良过样式体系以支持 SSR、SSG
熟悉 React、Vue 相关技术栈，熟悉 React、Vue 及相关技术框架的实现原理
掌握构建工具 Webpack、Vite 等，掌握编译工具 Babel，并深入理解其原理，并参与 Rspack 构建
丰富的数据可视化经验，熟悉 Canvas、svg 开发范式，理解 Echarts、Antv 原理，能根据业务需求基于 d3、zrender 开发自定义渲染引擎
丰富的跨端开发经验，熟练使用 Taro、Flutter、React-Native 开发跨端应用，对构建 hybird App 有丰富经验，深入理解跨端开发编译原理
基于 Node.js 开发脚手架、打包构建优化工具及中间件服务
掌握常用设计模式、算法与安全知识，追求开发高质量、高可维护性代码，追求极致产品体验
团队管理经验，并在项目架构设计与性能优化方面具有丰富经验
算法与编程技术
- 精通各种算法题的分类及解决方法，包括排序与查找、数据结构、动态规划、贪心算法、回溯算法、分治算法、图论算法、数学算法等。
- 重点掌握动态规划的基本概念、解题步骤和经典题目。
3D 数字孪生平台开发经验
- 熟练使用 WebGL 和 WebAssembly 技术，开发高效的 3D 渲染引擎。
- 精通正射影像和倾斜摄影技术，具备 Tile 和模型（包括白膜和精模）的处理经验，能够使用 Blender 进行模型制作。
- 熟悉材质、光效和粒子系统的实现与优化。
全面性能优化能力
- 具备打包构建优化经验，熟练使用 Webpack 进行模块打包，掌握 chunk、treeshaking、happypack、cache-loader 等优化技巧，并使用 Webpack Module Federation 进行模块联邦管理。
- 精通资源优化，能够有效进行图片、字体压缩，管理请求队列，并通过 OSS 和 CDN 提升资源加载速度。
- 具有应用性能优化经验，包括数据结构优化和应用模块更新。
- 深入了解缓存机制，熟悉强缓存（Expiration、Cache-Control）、协商缓存（Etag）和策略缓存（Service-Worker）的配置与管理。

项目重难点

这个环节至关重要，很多同学不重视，简历随便写一写就开始投递了，结果投出去几百份可能一家公司面试都没有，结果就在怀疑前端行情出问题了

STAR 法则：

遇到了什么问题 question，需求
怎么评估解决方案，方案对比，方案落地 react 状态管理（redux、mobx、jotai、recoil）Vue3 -> Pinia
具体方案落地
结果反思，细节优化思考

反面案例

技术栈：Java、Vue2、echarts、WEui、BaiduMap、JavaScript 、HTTP数据库：MySQL管理工具：SVN

责任描述：

1）产品前端研发负责人，主要负责整体样式沟通，样式调配实现；门户、管理平台、移动端、智端、可视化等前端内容实现；

2）实现组织管理、人员管理、党员关系转接、待办通知、绩效考核（复杂功能算法实现）、发展党员（25个流程）、可视化等主体功能，兼容性优化、适配1920*1080屏幕以及响应式布局实现；

3）相关功能开发，包含前后端、数据库；

4）门户框架搭建、门户整体设计、后端接口、门户前端 UI 实现等；

5）微信小程序框架搭建、小程序页面设计及开发、知识图谱技术预演；

6 ）项目经理工作辅助，包含需求沟通、UI设计沟通、交付材料项目经历整理、前端代码质量管理、部分功能设计。

项目经历深度优化

工作内容和成果

【 架构设计 】参与智慧管理平台整体架构设计、技术选型与方案评审，担任全栈开发，完成相关核心模块
【 企微开发 】对接企业微信生态，基于企微 SDK 完成平台支付、消息推送、机器人等功能开发
【 可视化 】主导完成平台可视化渲染引擎（可视化图表的组件，数据协议）设计与开发，基于 echarts （svgRenderer、canvasRenderer 一千万行数据的表格渲染【不能使用 虚拟滚动 】 canvas table，chunk）封装业务图表库，服务于平台可视化场景
【 地图开发 】使用百度地图 SDK，封装业务地图渲染器（MapRenderer），包含：地图撒点、地区数据下钻等功能
【 小程序与App 】基于 uniapp 实现智慧党建用户端多端开发落地，产物编译为 H5、微信小程序两端应用
【 团队基建 】推进团队业务组件库、图表库与基础库沉淀，完成 10+ 个业务组件沉淀，以此提升了团队协同开发效率
【优化】设计产品响应式系统，基于 media query 设计响应式端点规则，适配不同端应用的展示
【 自研 OA 打通 】...

以 STAR 法则梳理

【技术栈】

Java、Vue2、ECharts、WEui、BaiduMap、JavaScript、HTTP
数据库 ：MySQL
管理工具 ：SVN

【产品前端研发负责人】

情境 (Situation) ：担任产品前端研发负责人，负责门户、管理平台、移动端、智端、可视化等前端内容的实现。
任务 (Task) ：主要任务是与设计团队沟通，调配和实现整体样式，确保产品界面的一致性和用户体验。
行动 (Action) ：我协调设计与开发团队，定期召开样式沟通会，亲自进行样式的调配与实现，并负责不同平台和设备的前端内容开发。
结果 (Result) ：成功实现了多个平台的前端开发工作，提升了产品的用户体验和一致性，获得了团队和用户的高度评价。

【实现复杂功能及优化】

情境 (Situation) ：项目需要实现复杂功能算法和大规模功能模块，包括组织管理、人员管理、党员关系转接、待办通知、绩效考核、发展党员（25个流程）和可视化功能。
任务 (Task) ：负责上述复杂功能的实现，并优化其兼容性和响应式布局。
行动 (Action) ：通过设计和实现复杂算法，确保各模块的功能性；进行兼容性优化，使系统适配1920*1080屏幕和响应式布局。
结果 (Result) ：成功实现并优化了所有复杂功能，系统在不同设备和分辨率下均表现良好，提高了用户操作的流畅度和满意度。

【全面功能开发】

情境 (Situation) ：需要进行前后端和数据库的全面开发，确保系统各功能模块的无缝集成。
任务 (Task) ：开发和实现相关功能，包括前端UI、后端接口和数据库交互。
行动 (Action) ：采用Java、Vue2等技术，开发并调试各功能模块，与后端团队密切合作，确保接口的准确性和数据的一致性。
结果 (Result) ：成功完成了所有功能模块的开发和集成，系统运行稳定，性能优异，受到了客户的好评。

【微信小程序开发与知识图谱预演】

情境 (Situation) ：项目需要开发微信小程序，并进行知识图谱技术的预演。
任务 (Task) ：负责小程序框架的搭建、页面设计及开发，同时进行知识图谱的技术预演。
行动 (Action) ：使用WEui、JavaScript等技术，设计并开发小程序页面，进行知识图谱的技术预演和验证。
结果 (Result) ：成功搭建了微信小程序框架，完成了页面设计和开发工作，知识图谱技术预演顺利，通过了技术验证。

【项目经理工作辅助】

情境 (Situation) ：在项目中辅助项目经理，确保项目需求沟通顺畅，UI设计协调到位，交付材料齐全，前端代码质量高。
任务 (Task) ：辅助项目经理进行需求沟通、UI设计沟通、交付材料整理、前端代码质量管理以及部分功能设计。
行动 (Action) ：积极参与需求和UI设计的沟通，整理和管理项目交付材料，进行代码审查和质量管理，并参与功能设计。
结果 (Result) ：成功辅助项目经理完成了项目的各项工作，提高了项目的开发效率和交付质量，确保了项目的顺利进行。

高级项目实战提升简历看点

你可能不具备这些项目的实战经验，很多同学写了很多年管理系统，简单增删改查项目，如果不跳出这个圈子，很难在薪资上有非常大的突破！

企业级可视化无代码平台架构设计与实践（Vue3）
企业级类 mantine 组件库架构设计与实践（React18）
企业级类 VueUse Composition 库架构设计与实践（Vue3）
企业级团队脚手架命令行工具架构设计与实践（Nodejs）
企业级监控平台全栈架构设计与实践（Vanilla + React19 + Vue3）
企业级编辑器类飞书文档架构设计与实践（React19）
企业级通用低代码平台架构设计与实践（React19）
企业级数字孪生低代码平台架构设计与实践（Vanilla + Webassembly + Vue3）
- 基于 cesium（arcGis、超图）方案的 WebGIS 开发实践
- 基于 openlayer、mapbox 开发
- 基于 WebGL 3D 可视化开发实践
企业级类 react-use hooks 库架构设计与实践（规划中）
企业级类剪映视频剪辑工具架构设计与实践（规划中）
企业级类扣子、Dify AI 应用引擎架构设计与实践（规划中）
- 流程引擎
- RAG
- Function Calling
- Prompt Engineering
- 本地模型与模型供应商接入

冲刺年包 50W+ 薪资长线规划

冲刺核心要素

全面的技术储备
1. 框架基础
  - Vue 和 React 经验：包括 Vue3 + Typescript 和 React18（Hooks、Concurrent）
  - 掌握框架原理：React 生态库（React-Router、Redux）和 Vue 生态库原理
2. 工程化能力
  - 构建工具：Webpack、Vite、Rspack、ESBuild、swc
  - CI/CD 自动化：自动化构建和自动化部署
3. 基建能力
  - Node.js、命令行工具开发（Cli）
  - UI 库、图表库、工具库开发
4. 业务领域经验
  - 管理系统和图表类应用
  - 可视化、编辑器、云表格、低代码平台、SaaS 产品、数字孪生、三维可视化
项目经验
- 参与过至少两个大型项目，并主导过一个复杂项目
1. 管理系统：包括项目搭建、技术方案选择、技术栈构建、CI/CD 流程
2. 其他领域项目：如可视化、编辑器、云表格、低代码平台、SaaS 产品、数字孪生、三维可视化
面试表现
1. 个人介绍
  - 准备个人介绍草稿，涵盖基本信息、技术栈和项目重难点
2. STAR 法则
  - 问题描述：阐述遇到的问题或需求
  - 解决方案评估：方案对比与选择（如 React 状态管理：redux、mobx、jotai、recoil，Vue3 使用 Pinia）
  - 方案实施：具体的实施步骤
  - 反思与优化：项目反思及优化建议
3. 面试准备
  - 重点复习知识点：如 v8 内存管理、Promise A+ 规范、事件循环、this、面向对象编程原型
  - 技术储备：结合项目经验展示技术在项目中的应用
学历提升
1. 现有学历：大专
2. 未来计划：尽快取得本科证书（不需要注明具体年限）
3. 学历背景：民办学校
4. 内推建议：应对学历和工作经历问题，通过内推提升机会

自身短板与补益

项目简单，管理后台一做就是大半年，天天 CRUD
- 看开源项目（react-hook-form ts 类型、hook 处理、状态管理、架构 Provider，keyPath）
- 找一些不错的项目练手
- 拿好的项目，学习完放在简历里， 可视化、编辑器、云表格、低代码、SaaS 产品、数字孪生、三维可视化
- 1.自研：15K， 2.外包：20K ，这个火坑， 灰（供需决定）
技术栈掌握不深不广，只会用 Vue2 （Vue3 + Typescript），React18（React stack reconciler）
架构、方案设计没碰过
- React，create-react-app、umi，没有真正从零到一去设计初始化过一个项目
- Vue，Vue CLI，Vite/Webpack。Vue2 CLI 创出来项目 1. webpack、2.vite
没有专精的技能或业务
- 自驱（假定自己是 Leader），项目的赢利点、商业价值【 可视化、编辑器、白板、团队基建、AI产品 】
- 与生俱来有些东西，好奇心、自驱力、清晰规划
- 我：管理平台，HPE（官网、后台管理），云表格（维格表、飞书云表格）、云编辑器（CKEditor 老【html string】）（语雀、【石墨文档】）

妙码学院——全程陪跑、督学、真·企业级全栈项目矩阵、内推

⚠️ 暂不支持的文档区域，【文档小组件】

跨端开发 Taro（Taro 编译器 compiler、运行时 runtime）、uniapp
协同编辑器（文档类、画板类）
团队基建工程（UI 库、图表库、Cli -> 产生产物 npm 包）
3D 可视化数字孪生 bigdata
低代码平台
AI 应用引擎与开发平台

2025 课程体系全新升级，除了基础知识夯实，融入了更多项目实战内容，并且项目实战持续更新，目前包含：

企业级可视化无代码平台架构设计与实践（Vue3）
企业级类 mantine 组件库架构设计与实践（React18）
企业级类 VueUse Composition 库架构设计与实践（Vue3）
企业级团队脚手架命令行工具架构设计与实践（Nodejs）

企业级监控平台全栈架构设计与实践（Vanilla + React19 + Vue3）
企业级编辑器类飞书文档架构设计与实践（React19）
企业级通用低代码平台架构设计与实践（React19）
企业级数字孪生低代码平台架构设计与实践（Vanilla + Webassembly + Vue3）
- 基于 cesium（arcGis、超图）方案的 WebGIS 开发实践
- 基于 openlayer、mapbox 开发
- 基于 WebGL 3D 可视化开发实践
企业级类 react-use hooks 库架构设计与实践（规划中）
企业级类剪映视频剪辑工具架构设计与实践（规划中）
企业级类扣子、Dify AI 应用引擎架构设计与实践（规划中）
- 流程引擎
- RAG
- Function Calling
- Prompt Engineering
- 本地模型与模型供应商接入

妙码学院全网独家项目实战矩阵

所有项目实战，均完全 从零到一手写 ， 纯原创 ，项目架构与编码规范真一线大厂级。

企业级项目实战完整详细介绍与演示，可联系咨询老师获取。

企业级项目实战矩阵包括：

企业级可视化无代码平台架构设计与实践（Vue3）
企业级类 mantine 组件库架构设计与实践（React18）
企业级类 VueUse Composition 库架构设计与实践（Vue3）
企业级团队脚手架命令行工具架构设计与实践（Nodejs）
企业级监控平台全栈架构设计与实践（Vanilla + React19 + Vue3）
企业级编辑器类飞书文档架构设计与实践（React19）
企业级通用低代码平台架构设计与实践（React19）
企业级数字孪生低代码平台架构设计与实践（Vanilla + Webassembly + Vue3）
- 基于 cesium（arcGis、超图）方案的 WebGIS 开发实践
- 基于 openlayer、mapbox 开发
- 基于 WebGL 3D 可视化开发实践
企业级类 react-use hooks 库架构设计与实践（规划中）
企业级类剪映视频剪辑工具架构设计与实践（规划中）
企业级类扣子、Dify AI 应用引擎架构设计与实践（规划中）
- 流程引擎
- RAG
- Function Calling
- Prompt Engineering
- 本地模型与模型供应商接入

前端阶段性能力与冲刺目标

以下是对您提供的内容进行权威和专业化改写的建议：

1~3 年

在此阶段，重点在于评估个人的基础知识和热情。对前端基础、计算机原理、网络通信和算法等领域的要求较高。由于在此阶段难以评估业务深度，因此更多关注基础知识的掌握程度。

关键在于通过学术教育或网络资源加强基础知识；
在简历中以多种方式展示对前端的热情，展现个人潜力；
积极探索前沿技术，关注国内外技术动态；
尝试开发小型项目或参与社区开源项目；
建立技术博客，以输出促进知识吸收。

3~5 年

此阶段通常是向成为独立工程师发展的关键时期，避免重复使用有限的经验。

关注社区中关于进阶的资料和路线，强化基础知识；
深入掌握常用框架的高级用法，探索其原理；
在业务开发中不仅完成功能，还需考虑项目结构设计、封装基础工具、设计和开发基础组件；
思考提高团队效率的方法，例如：
- 集成代码检验和风格统一插件（如 eslint、stylelint、prettier、spellcheck）；
- 从工程化角度提高本地开发效率，优化webpack构建，探索esbuild、vite等工具；
- 对于多项目开发，整理差异和统一部分，建立内部脚手架以减少重复工作；
- 尝试搭建CI/CD平台，维护公司内部的通用npm包；
- 培养软技能，如沟通协作，协调各角色共同推进目标。

5年+

进入此阶段，可能朝技术专家或管理方向发展。期望您能够独立负责高复杂度项目，突破关键技术难题。

负责技术调研，关注行业趋势，选择最优技术方案，具备决策能力；
拥有丰富的技术经验和技术储备，能够解决遇到的困难，并有自己的方法论；
协助或主导业务目标制定，合理推动项目达成预期效果；
是否具有团队领导经验，能够协调跨团队项目，处理团队成员情绪问题，解决技能分布不平衡等问题；
打造技术氛围，促进团队共同成长。

【未知组件reminder】

前端前沿技术爱好者

Vite5 基础进阶与原理深度剖析，前端专家分享 bundleless 构建细节

【 初中级 】面试官：详细说说 Vite5 工程化配置细节，常见配置和优化手段

项目初始化与创建

Vite 配置文件 (vite.config.ts)

基本配置项

开发与构建配置

环境变量与模式

Vue 与 React 项目配置基于 TypeScript

Vue 项目配置

React 项目配置

常见配置与优化手段

插件优化

代码分割与懒加载

优化构建速度

开发模式优化

【 中高级 】面试官：了解过微内核设计思想吗？Vite5 的插件化设计思想是怎样完成个性化打包构建需求的？

微内核设计思想

Vite5 的插件化设计思想

Vite5 插件架构概览

插件系统的实现

典型插件介绍

@vitejs/plugin-vue

@vitejs/plugin-react

vite-plugin-compress

插件生命周期

Vite 独有的钩子

Rollup 通用钩子

插件执行顺序

自定义 Vite 插件

自定义插件：Emoji 替换插件

插件功能描述

插件实现步骤

创建插件文件

在 vite.config.ts 中使用插件

使用示例

插件扩展

自定义插件：代码统计插件

【 专家级 】面试官：我们有 rspack 这类构建工具，如果让你从零到一实现 Vite 全生态，具体思路是什么？

Bundleless：无打包的开发体验

AST（抽象语法树）：统一工具链的基础

从 Vite 到 Oxc，再到 Rolldown，最终到 Vitest：全链路统一

Vite 构建过程详述

Vite 构建过程（Vite Build）

1. 项目初始化

2. 入口解析

3. 插件处理

4. Tree Shaking

5. 代码拆分

6. 生成输出

7. 资源优化

8. 缓存策略

总结

Vite 本地开发服务

Vite 构建过程

Vite 源码核心实现

项目结构

安装依赖

编写 server（ server.js ）

定义 HTML 文件 ( src/index.html )

运行项目

专家简历优化指南（目标 35K+ ）

核心技能

项目重难点

反面案例

项目经历深度优化

以 STAR 法则梳理

高级项目实战提升简历看点

冲刺年包 50W+ 薪资长线规划

冲刺核心要素

自身短板与补益

妙码学院——全程陪跑、督学、真·企业级全栈项目矩阵、内推

妙码学院全网独家项目实战矩阵

前端阶段性能力与冲刺目标

1~3 年

3~5 年

5年+

【初中级】面试官：详细说说 Vite5 工程化配置细节，常见配置和优化手段

【中高级】面试官：了解过微内核设计思想吗？Vite5 的插件化设计思想是怎样完成个性化打包构建需求的？

在 `vite.config.ts` 中使用插件

【专家级】面试官：我们有 rspack 这类构建工具，如果让你从零到一实现 Vite 全生态，具体思路是什么？

编写 server（ `server.js` ）

定义 HTML 文件 ( `src/index.html` )