⚠️温馨提示： 文档中包含【1个】暂不支持的区域，请通过搜索关键字【暂不支持的文档区域】进行后续处理

performance-notes.zip

飞书文档开发难点（一）—— 首屏加载优化

首屏加载是一个老生常谈的问题，今天我们先来讲这个点，彻底给大家讲清楚，以后你就不用去看任何其他资料和首屏加载相关方案实现啦！

首屏性能指标

  • FP First Paint / 首次绘制
  • FCP First Contentful Paint / 首次内容绘制
  • FMP First Meaningful Paint / 首次有效绘制
  • LCP Largest Contentful Paint / 最大内容绘制

其中 FP、FCP 都可以用 Performance 工具检测

FMP 我们可以自己使用 MutationObserver 来实现

除了这些，还有我们平常不怎么关注的：

First Contentful Paint (FCP) 从网页开始加载到网页任何部分的内容呈现在屏幕上所用的时间

Largest Contentful Paint (LCP) 从网页开始加载到屏幕上呈现最大的文本块或图片元素所用的时间

Interaction to Next Paint (INP) 与网页进行的每次点按、点击或键盘互动的延迟时间。 根据互动次数，此指标选择网页的最差（或接近最差）互动延迟时间作为单个代表性值，以描述网页的整体响应能力

Total Blocking Time (TBT) 从 FCP 到 可交互时间 (TTI) 之间的总时长，其中主线程处于阻塞状态的时间足够长，足以阻止输入响应能力

Cumulative Layout Shift (CLS) 从页面开始加载到其 生命周期状态 更改为隐藏期间发生的所有意外布局偏移的累计得分

首字节时间 (TTFB) 网络使用资源的第一个字节响应用户请求所需的时间

借助 webvital

减少首屏加载文件资源体积

  1. 优化图片 ：使用合适的图片格式（如WebP），并对图片进行压缩。确保图片尺寸适合其显示区域，不要使用过大的图片。

  2. 延迟加载 ：使用懒加载（lazy loading）技术，只有在用户滚动到特定区域时才加载相关资源。

  3. 精简CSS和JavaScript ：

    • 代码压缩 ：移除代码中的空格、注释和多余字符，减少文件大小。
    • 合并文件 ：将多个CSS和JavaScript文件合并为一个文件，减少HTTP请求次数。
    • 树摇（Tree Shaking） ：移除未使用的代码，减少打包文件的体积。

  4. 使用CDN ：将静态资源托管在内容分发网络（CDN）上，缩短资源加载的时间。

  5. 减少第三方库 ：评估和移除不必要的第三方库，使用更轻量级的替代方案。

  6. 启用浏览器缓存 ：设置适当的缓存策略，使浏览器能够缓存常用的文件，减少重复加载。

  7. 压缩文本资源 ：启用Gzip或Brotli压缩，减少HTML、CSS和JavaScript文件的体积。

  8. 服务端渲染（SSR）和静态生成 ：使用服务端渲染或静态生成技术，减少客户端渲染的压力。

预加载主要内容

  1. 使用 <link rel="preload"> 标签 ：

    • 预加载关键资源如字体、图片、CSS和JavaScript文件。
    • 示例：
    <link rel="preload" href="styles/main.css" as="style">
<link rel="preload" href="scripts/main.js" as="script">
<link rel="preload" href="fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

  2. 优先加载关键CSS ：

    • 将关键CSS直接嵌入到HTML文件的头部，减少首次渲染的阻塞。
    • 示例：
    <style>
/* Critical CSS */
body { margin: 0; padding: 0; font-family: Arial, sans-serif; }
</style>

  3. 异步加载和延迟加载JavaScript ：

    • 使用 async 或 defer 属性来加载非关键的JavaScript文件，避免阻塞HTML解析。
    • 示例：
    <script src="scripts/main.js" defer></script>

  4. 预加载字体 ：

    • 通过预加载字体资源，避免首次渲染时的字体闪烁（FOIT）。
    • 示例：
    <link rel="preload" href="fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

  5. 预加载关键图片 ：

    • 对于首屏关键图片，可以使用预加载标签提前加载，确保它们尽快显示。
    • 示例：
    <link rel="preload" href="images/hero.jpg" as="image">

  6. 配置HTTP/2 Server Push ：

    • 如果服务器支持HTTP/2，可以配置服务器在客户端请求HTML时推送关键资源。
    • 示例（在服务器配置中）：
    location / {
    http2_push /styles/main.css;
    http2_push /scripts/main.js;
}

  7. 优先加载核心框架 ：

    • 对于使用JavaScript框架（如React、Vue）的应用，可以优先加载框架核心代码，确保应用尽快可交互。

预渲染

https://github.com/Tofandel/prerenderer#readme

让我们修正之前的配置，确保正确使用 @prerenderer/webpack-plugin 和 @prerenderer/renderer-puppeteer 进行预渲染。以下是一个详细的配置示例：

安装必要的依赖

npm install webpack webpack-cli webpack-dev-server html-webpack-plugin @prerenderer/webpack-plugin @prerenderer/renderer-puppeteer --save-dev

设置 Webpack 配置

在项目根目录下创建一个 webpack.config.js 文件，并添加以下配置：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const PrerendererWebpackPlugin = require('@prerenderer/webpack-plugin');
const PuppeteerRenderer = require('@prerenderer/renderer-puppeteer');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
    }),
    new PrerendererWebpackPlugin({
      staticDir: path.join(__dirname, 'dist'),
      routes: ['/'],
      renderer: new PuppeteerRenderer({
        inject: {},
        headless: true,
        renderAfterDocumentEvent: 'render-event',
      }),
    }),
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
    historyApiFallback: true,
  },
};

创建 React 应用

在 src 目录下创建 index.js 文件和 index.html 文件。

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './styles.css';

class App extends React.Component {
  componentDidMount() {
    document.dispatchEvent(new Event('render-event'));
  }

  render() {
    return (
      <div>
        <h1>Hello, Webpack Pre-rendered!</h1>
        <p>This is a pre-rendered page.</p>
      </div>
    );
  }
}

ReactDOM.hydrate(<App />, document.getElementById('root'));

<!-- src/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webpack Pre-rendering</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

创建样式文件

在 src 目录下创建一个 styles.css 文件，并添加一些样式。

/* src/styles.css */
body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

h1 {
  color: #333;
}

p {
  color: #666;
}

运行构建和开发服务器

npx webpack --mode development
npx webpack serve

解释

  1. 安装依赖 ：

    • 安装 Webpack 及其相关插件，包括 @prerenderer/webpack-plugin 和 @prerenderer/renderer-puppeteer 。

  2. 设置 Webpack 配置 ：

    • 配置 Webpack 的入口文件和输出路径。
    • 配置 HtmlWebpackPlugin 插件用于生成 HTML 文件。
    • 配置 PrerendererWebpackPlugin 插件用于预渲染 / 路由，并使用 PuppeteerRenderer 渲染器。
    • 配置开发服务器并启用 historyApiFallback 以支持单页面应用（SPA）的路由。

  3. 创建 React 应用 ：

    • 在 index.js 中创建一个简单的 React 应用，并在 componentDidMount 中触发 render-event 事件，以便 @prerenderer/webpack-plugin 知道何时页面渲染完成。
    • 在 index.html 中创建基本的 HTML 结构。

  4. 创建样式文件 ：

    • 在 styles.css 中添加一些基本样式。

  5. 运行构建和开发服务器 ：

    • 使用 Webpack 进行开发构建和启动开发服务器。

通过这种方式，您可以使用 Webpack 和 @prerenderer/webpack-plugin 实现针对首页的预渲染，生成静态 HTML 文件，提升首页加载速度和用户体验。

服务端渲染

内容到达前端时，就已经可以进行绘制了。

这块很多同学面试被问到过：描述从输入 URL 到页面整体渲染完成整个过程

分为纯 SSR 或部分服务端渲染

飞书文档开发难点（二）—— 动态物料体系

由于项目整体架构复杂，并且设计之初便考虑能有更多物料轻松接入的可能，因此，我们整体考虑采取了动态物料体系的方案，这个方案无论你当下开发 文档项目 、 低代码平台 、 无代码平台 等，都是不错的方案选择，希望可以帮你拓宽业务与架构视野！

动态物料体系设计

动态体系，需要有规范约定，这个约定我们可以叫 DSL （Domain Specific Language），也可以称为 JSON Schema。

物料加载机制实现

借助统一的物料体系设计，我们下层实现物料加载底座，通过物料动态注册等机制实现动态物料逻辑

远程物料开发与构建

通过字节内部 rspack 进行构建，远程资源加载方案我们有一个演变过程：

基于 monorepo 架构，远程物料单独开发构建，主体应用在运行时加载远程物料并处理

远程物料加载与运行时处理

飞书文档开发难点（三）—— 白板实现方案优化

白板方案，大部分同学第一反应，那肯定是 canvas 啊，没错，但是，可以很直接地告诉大家，canvas 方案在大家平常小数据量的可视化场景，没太大问题，但是如果是大量数据的渲染，canvas 瓶颈也明显，为了进一步优化白板性能，我们进行了以下尝试

Webassembly

如果还有同学没见识过 Webassembly，建议同学们去看看上次公开课内容： 【飞书文档】面试被算法干吐了？字节大佬带你突破极限，冲击 30K+ 必掌握算法与 WebAssembly 技术

Skia

这个很多同学都比较陌生，这个库是 C++ 编写的图形处理库，目前由 Google 公司维护。

其实，浏览器 canvas 底层就是 skia： https://chromium.googlesource.com/chromium/blink/+/refs/heads/main/Source/core/html/HTMLCanvasElement.cpp

可视区绘制

简历优化（30K+ 简历样板）

技能描述

  • 熟练掌握 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. 全面的技术储备

    1. Vue 经验、React 经验，Vue3 + Typescript，React18（Hooks、Concurrent）【框架基础】
    2. 框架原理，React 生态库原理（React-Router、Redux）、Vue 生态库原理
    3. 工程化（构建工具：Webpack、Vite、Rspack、ESBuild、swc）
    4. CI/CD 自动化，自动化构建、自动化部署
    5. 基建能力（Node、命令行工具开发 Cli），UI 库、图表库、工具库
    6. 业务方面（管理系统、图表类），衍生 -> 可视化、编辑器、云表格、低代码、SaaS 产品、数字孪生、三维可视化

  2. 至少参加过两个以上大型项目，并主导过一个复杂项目

    1. 管理系统，（项目搭建、方案、技术栈、CI/CD 等等）
    2. 可视化、编辑器、云表格、低代码、SaaS 产品、数字孪生、三维可视化

  3. 面试表现好

    1. 个人介绍【 打个草稿 】，基本信息、技术栈、项目重难点

    2. STAR：

      • 遇到了什么问题 question，需求
      • 怎么评估解决方案，方案对比，方案落地 react 状态管理（redux、mobx、jotai、recoil）Vue3 -> Pinia
      • 方案落地
      • 反思，优化
    • 面试过程中，重点去复习只是重难点（v8 内存管理、Promise A+ 规范、事件循环、this、面向对象编程原型）
    • 技术储备，由你的项目经验体验，技术怎样在你的项目中落地的

  4. 学历

    1. 大专，尽快考一个本科证（年限去掉）
    2. 民办
    3. 内推，学历问题、工作经历的问题

补足短板

  • 项目简单，管理后台一做就是大半年，天天 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
  • 协同编辑器（文档类、画板类）wangEditor、CKEditor
  • 团队基建工程（UI 库、图表库、Cli -> 产生产物 npm 包）
  • 3D 可视化数字孪生 bigdata
  • 低代码平台

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

  • 企业级脚手架工具开发实践

  • 企业级文档编辑器飞书文档开发实践

  • 大厂 UI 组件库（Vue3）整体设计与开发实践

  • 大厂业务 Hooks 库（React 18）整体设计与开发实践

  • 埋点与数据监控平台实战

  • 3D 可视化数字孪生实战 💥

    • 基于 cesium 方案的 WebGIS 开发实践
    • 基于 WebGL 3D 可视化开发实践

不同阶段对前端人的硬性要求

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

1~3年

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

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

3~5年

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

  • 关注社区中关于进阶的资料和路线，强化基础知识；

  • 深入掌握常用框架的高级用法，探索其原理；

  • 在业务开发中不仅完成功能，还需考虑项目结构设计、封装基础工具、设计和开发基础组件；

  • 思考提高团队效率的方法，例如：

    • 集成代码检验和风格统一插件（如 eslint、stylelint、prettier、spellcheck）；
    • 从工程化角度提高本地开发效率，优化webpack构建，探索esbuild、vite等工具；
    • 对于多项目开发，整理差异和统一部分，建立内部脚手架以减少重复工作；
    • 尝试搭建CI/CD平台，维护公司内部的通用npm包；
    • 培养软技能，如沟通协作，协调各角色共同推进目标。

5年以上

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

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

职业规划指导

评论区选取三位同学互动，其他同学也可以联系咨询老师，文字方式提供辅导解答。

【未知组件reminder】