项目迁移 ：将现有独立项目整合到统一仓库。
PNPM 配置 ：
- 创建 pnpm-workspace.yaml 文件，指定工作空间路径。
- 在每个子包中维护独立的 package.json 。
依赖管理 ：使用 pnpm add 安装依赖，支持跨包共享。
统一脚本 ：通过根目录的 package.json 统一管理构建、测试等脚本。
工具链引入 ：集成 ESLint、Prettier、Husky 等工具，规范代码。

基本原理

工作空间（Workspaces）

定义：通过 pnpm-workspace.yaml 文件指定多个子包路径，PNPM 会将这些子包识别为工作空间。
功能：
- 子包之间可以直接使用本地符号链接引用。
- 所有依赖集中在根目录的 node_modules ，减少安装量。

依赖管理原理

去重机制 ：PNPM 使用全局缓存存储依赖，避免重复安装。
软链接机制 ：子包中依赖的模块通过软链接到根目录的 node_modules ，实现快速引用。
版本一致性 ：根目录 package.json 的依赖可以强制统一子包依赖版本。

子包构建原理

局部构建 ：PNPM 支持通过 --filter 参数选择性地构建特定子包，提升构建效率。
缓存利用 ：借助 PNPM 和构建工具的缓存功能，避免重复打包。

子包发布原理（结合 NX 或 Turbo）

发布工具 ：通常结合 Changeset、Turbo 等工具进行版本管理和自动发布。
流程：
1. 识别子包改动。
2. 自动生成变更日志。
3. 按子包生成新版本号并发布到 npm。

PNPM Monorepo 的优势

优势对比

维度	传统架构	PNPM Monorepo 架构
依赖管理	每个项目单独管理依赖	统一管理依赖，减少版本冲突
公共模块复用	需要手动同步和发布	子包间直接引用，快速共享
构建效率	每个项目单独构建，耗时长	按需构建，提升效率
磁盘占用	重复安装，磁盘占用高	去重机制，节省磁盘空间
协作成本	跨项目协作复杂，测试联调耗时	单仓库集中管理，便于协作

适用场景

多模块项目 ：如前端组件库、工具函数库。
微前端架构 ：多个前端项目整合为一个 Monorepo。
复杂后端服务 ：多个微服务的统一管理和部署。
传统架构存在依赖管理困难、代码复用性低等问题。
PNPM Monorepo 架构通过统一管理依赖和代码，大幅提升开发效率和协作体验。
架构迁移过程中需要注意工具链配置、依赖冲突解决以及构建和发布优化。

【中高级】组件库、脚手架、业务系统工程化基于 monorepo 架构设计有什么实践经验，请详细说明

前端团队现状与挑战

在大型团队开发中，组件库、脚手架和业务系统是常见的核心模块，它们通常具有以下特点：

组件库 ：提供复用的 UI 组件或工具函数，用于加速业务开发。
脚手架 ：用于快速创建新项目或模块，标准化项目结构和配置。
业务系统 ：作为面向最终用户的核心系统，通常依赖组件库和脚手架。

这些模块在分布式开发中存在以下问题：

依赖管理困难 ：组件库版本更新后，业务系统和脚手架的同步难以保证。
重复构建 ：不同模块需要独立构建，效率低下。
版本冲突 ：各模块依赖的库版本不一致，容易导致冲突。
协作复杂 ：跨模块调试和联调需要额外的时间成本。

引入 Monorepo 架构

解决方案概述

Monorepo 是一种将多个相关项目存储在同一个代码仓库中的管理方式，结合 pnpm、Turbo、tsup 和 Vite 等工具，可以有效解决上述问题。

统一依赖管理 ：通过 pnpm 的 Workspace 功能，所有子包共享依赖，避免版本冲突。
高效构建与调试 ：利用 turbo 按需构建，显著提升效率。
模块化管理 ：组件库、脚手架和业务系统通过清晰的分包结构实现独立开发与协作。

架构示意

root
├── packages
│   ├── ui                   # 组件库
│   ├── cli                  # 脚手架
├── apps
│   ├── business-system      # 业务系统
├── pnpm-workspace.yaml
├── turbo.json

依赖管理与 Workspace 配置

pnpm Workspace 配置

PNPM 的 Workspace 提供了多项目依赖管理的能力，核心是通过 pnpm-workspace.yaml 管理子包。

配置步骤：

在项目根目录创建 pnpm-workspace.yaml 文件：

packages:
  - "packages/*"
  - "apps/*"

每个子包拥有独立的 package.json 文件，例如：

{
  "name": "@miaoma/ui",
  "version": "1.0.0",
  "main": "dist/index.js",
  "dependencies": {}
}

安装共享依赖：

pnpm install

子包依赖管理

使用 PNPM 的工作空间机制添加依赖：

pnpm add @miaoma/ui --filter @miaoma/business-system

子包之间的依赖通过符号链接实现本地引用，减少重复安装。

子包构建方式选择

组件库构建：Tsup

Tsup 是一个零配置、高性能的打包工具，非常适合组件库的构建需求。

详细配置步骤：

安装 Tsup：

pnpm add tsup -D

在组件库子包的 package.json 中添加构建脚本：

{
  "scripts": {
    "build": "tsup src/index.ts --format esm,cjs --dts"
  }
}

执行打包：

pnpm build

业务系统开发与构建：Vite

Vite 提供了极快的开发服务器和高效的构建能力，非常适合业务系统。

配置步骤：

安装 Vite：

pnpm add vite -D

创建 vite.config.ts ：

import { defineConfig } from 'vite';

export default defineConfig({
  root: './',
  server: {
    port: 3000,
  },
  build: {
    outDir: 'dist',
  },
});

启动开发服务器：

pnpm dev

脚手架构建：按需编译

脚手架工具通常只需打包核心逻辑，可以直接使用 Tsup 或其他工具打包为 Node.js 可执行文件。

基于 Turbo 的流水线构建与启动

Turbo 的任务管理

Turbo 是一个高效的任务运行器，适合 Monorepo 场景下的任务编排。

配置步骤：

创建 turbo.json ：

{
  "pipeline": {
    "build": {
      "outputs": ["dist/**"]
    },
    "dev": {},
    "test": {}
  }
}

使用 Turbo 执行任务：

turbo run build

Turbo 支持跳过未改动的子包任务，极大提升构建效率。

并行与依赖任务

配置任务的依赖关系，例如先构建组件库再启动业务系统：

{
  "pipeline": {
    "dev": {
      "dependsOn": ["build"]
    }
  }
}

工程化规范与代码质量保证【了解】

统一代码规范

ESLint ：统一代码风格和语法检查。

pnpm add eslint -D

Prettier ：格式化代码，提高可读性。

pnpm add prettier -D

提交规范

Commitlint ：规范提交信息。

pnpm add @commitlint/config-conventional @commitlint/cli -D

配置 commitlint.config.js ：

module.exports = { extends: ['@commitlint/config-conventional'] };

自动化检查

Husky ：在 Git 钩子中集成自动检查。

pnpm add husky -D

初始化 Husky：

npx husky install

配置预提交检查脚本：

npx husky add .husky/pre-commit "pnpm lint"

【专家级】有没有了解过字节、阿里等中大厂前端基于 monorepo 工程架构最佳实践，举例说明

同学们可以多阅读大厂开源项目，提升自己工程化架构设计思维，例如：

公司	项目/模块	地址	简要说明
阿里	Ant Design	ant-design	企业级 UI 设计语言与 React 组件库。
阿里	ahooks	ahook	高质量的 React Hooks 库。
阿里	BizCharts	bizCharts	基于 G2 的 React 数据可视化库。
阿里	Umi	umi	企业级 React 应用框架，支持插件化扩展。
阿里	Qiankun	qiankun	微前端框架，基于 single-spa 改进。
字节	Arco Design	arco-design	企业级设计体系与组件库，支持 React 和 Vue。
字节	Semi Design	semi-design	灵活且扩展性强的设计系统。
字节	IconPark	icon-park	可自定义多风格图标库。
字节	VTable	VTable	面向大数据展示的可视化表格库。
字节	Garfish	garfish	微前端框架，支持模块化加载与隔离。
字节	rsbuild	rsbuild	高性能构建工具，类似 Vite 和 Esbuild。

阿里

阿里作为国内技术领先的大厂，其开源项目在设计和实现上体现了丰富的实践经验和高度的工程化思维。在 monorepo 架构下，阿里多个项目展现了模块化和高效协作的特点。

Ant Design

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

使用 pnpm 管理多包依赖，统一版本，提升包的发布和构建效率。
将核心组件库（ @ant-design/components ）、文档站点、工具包（如构建脚本、代码风格插件）等分离为多个包。
通过严格的依赖关系定义和共享配置（如 ESLint、TSConfig），确保多包之间协作的可靠性。
利用 lerna 或 changesets 实现变更记录自动生成，管理多个模块的版本发布。

ahooks

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

Hooks 被拆分为多个功能模块（如 useRequest 、 useDrag ），用户可以按需安装。
使用 pnpm + rollup 实现轻量化构建，避免重复依赖。
文档和测试代码与核心代码模块化管理，方便开发和维护。

Umi

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

核心框架、插件系统、测试工具（如 umi-test ）分模块管理，保证功能解耦。
通过 shared-utils 统一核心工具函数，降低重复实现。
提供完善的脚手架工具，自动生成多模块依赖的开发环境。

Qiankun

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

核心库（ qiankun ）、测试工具、示例项目（examples）统一管理。
使用 pnpm 的软链接功能，将本地开发包无缝集成到示例项目中，提升开发效率。
通过持续集成工具（如 GitHub Actions）自动化测试所有子包，确保框架稳定性。

字节

字节跳动近年来在前端领域的开源项目也展现了强大的技术实力，尤其在架构设计和工具开发上体现了对 monorepo 的深入理解。

Arco Design

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

核心组件（React/Vue）、主题工具、图标库等分为多个子包，灵活组合。
提供 @arco-dev/cli ，帮助开发者快速生成符合 monorepo 的项目结构。
集成多种工具（如 Jest、Storybook），统一测试和文档开发流程。

Semi Design

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

使用 Rush 或 pnpm 管理模块依赖，避免团队协作中出现版本不一致的问题。
将基础组件、业务组件、脚手架工具解耦，支持用户按需引用和定制。
多包发布使用 changesets 自动生成变更日志，降低维护成本。

IconPark

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

图标库分为 SVG 核心包、React 包、Vue 包等多个模块，适配不同前端框架。
使用 pnpm 的 workspace 特性，保持模块之间的依赖同步。
提供一键脚手架工具，生成新的图标模块，方便社区贡献。

VTable

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

表格渲染核心与业务逻辑解耦，核心功能支持按需加载。
使用 pnpm 和 eslint-config 等统一代码规范。

Garfish

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

核心库与插件模块化拆分，方便扩展。
集成 Lerna 和 pnpm，提升依赖管理和构建速度。

rsbuild

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

子模块拆分为核心构建引擎、适配器、工具包，保持灵活性。
利用 monorepo 管理开发环境依赖，统一使用 Rush 提升构建效率。

专家简历优化指南（目标 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) ：成功辅助项目经理完成了项目的各项工作，提高了项目的开发效率和交付质量，确保了项目的顺利进行。

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

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

大厂 UI 组件库（Vue3）整体设计与开发实践(monorepo 架构)
大厂业务 Hooks 库（React 18）整体设计与开发实践(从零到一的架构、规范流程)
企业级脚手架工具开发实践
企业级文档编辑器飞书文档开发实践
前端性能、异常与行为监控
3D 可视化数字孪生低代码实战 💥
- 基于 cesium（arcGis、超图）方案的 WebGIS 开发实践
- 基于 openlayer、mapbox 开发
- 基于 WebGL 3D 可视化开发实践

冲刺年包 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
低代码平台

课程体系 2.0 升级，除了基础知识夯实，融入了更多项目实战内容，包含：

企业级脚手架工具开发实践
企业级文档编辑器飞书文档开发实践
大厂 UI 组件库（Vue3）整体设计与开发实践
大厂业务 Hooks 库（React 18）整体设计与开发实践
埋点与数据监控平台实战
3D 可视化数字孪生实战 💥
- 基于 cesium 方案的 WebGIS 开发实践
- 基于 WebGL 3D 可视化开发实践

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

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

微前端在分拆原子应用场景下的落地与实践
协同编辑器从零到一架构实现
推动团队基建落地
- React UI 库
- Vue Composition API 库
- 企业级脚手架
数字孪生平台整体架构设计
企业级无代码可视化平台实践（Vue3）
低代码平台设计与实现
- 编排引擎
- 流程引擎
- 编辑器
- 代码执行器与 JavaScript 沙箱
用户行为分析 SDK 及监控可视化整体实现
可视化渲染引擎设计与实现
基于 RAG / Agent 前端 AI 应用流程编排平台

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

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

1~3 年

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

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

3~5 年

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

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

5年+

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

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

【未知组件reminder】

前端前沿技术爱好者

基于 pnpm monorepo 大厂项目工程化设计，字节架构师传授多场景项目架构要诀

【 初中级 】你的过往项目中，项目和工程化架构有没有做过，有没有了解过 monorepo 架构方案？

传统架构概述

什么是传统架构？

传统架构的优缺点

优点：

缺点：

PNPM Monorepo 架构概述

什么是 Monorepo？

为什么选择 PNPM？

架构演进过程

从传统架构到 Monorepo 架构的演进路径

阶段 1：传统架构痛点

阶段 2：引入 Monorepo

阶段 3：优化和自动化

关键步骤

基本原理

工作空间（Workspaces）

依赖管理原理

子包构建原理

子包发布原理（结合 NX 或 Turbo）

PNPM Monorepo 的优势

优势对比

适用场景

【 中高级 】组件库、脚手架、业务系统工程化基于 monorepo 架构设计有什么实践经验，请详细说明

前端团队现状与挑战

引入 Monorepo 架构

解决方案概述

架构示意

依赖管理与 Workspace 配置

pnpm Workspace 配置

配置步骤：

子包依赖管理

子包构建方式选择

组件库构建：Tsup

详细配置步骤：

业务系统开发与构建：Vite

配置步骤：

脚手架构建：按需编译

基于 Turbo 的流水线构建与启动

Turbo 的任务管理

配置步骤：

并行与依赖任务

工程化规范与代码质量保证【了解】

统一代码规范

提交规范

自动化检查

【 专家级 】有没有了解过字节、阿里等中大厂前端基于 monorepo 工程架构最佳实践，举例说明

阿里

Ant Design

ahooks

Umi

Qiankun

字节

Arco Design

Semi Design

IconPark

VTable

Garfish

rsbuild

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

核心技能

项目重难点

反面案例：

项目经历深度优化

以 STAR 法则梳理

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

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

冲刺核心要素

自身短板与补益

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

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

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

1~3 年

3~5 年

5年+

【初中级】你的过往项目中，项目和工程化架构有没有做过，有没有了解过 monorepo 架构方案？

【中高级】组件库、脚手架、业务系统工程化基于 monorepo 架构设计有什么实践经验，请详细说明

【专家级】有没有了解过字节、阿里等中大厂前端基于 monorepo 工程架构最佳实践，举例说明