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

high-interview-notes.zip

过往分享了很多进阶知识与架构内容，课程文档列表如下，配套对应课程文档和配套视频回放找咨询老师领取~ 希望对你的技术成长有一定辅助作用！

公开课内容偏原理理论和知识框架概览，系统提升与进阶可了解《大前端&全栈架构师训练营》

【飞书文档】类扣子、Dify AI 应用引擎架构设计与实践，前端专家助你武装 AI 开发平台业务与架构思维

【飞书文档】前端智能体 Ollama + Deepseek AI 开发平台全链路设计与实践，特邀字节专家分享前端人高光时刻

【飞书文档】NestJS 从入门到进阶全栈开发实战，字节专家带你突破前端开发能力边界

【飞书文档】前端性能优化核心点全面解析，高级前端专家传授涨薪高分面能力

【飞书文档】飞书低代码物料体系与编排引擎设计，字节前端专家在线评审实现工程重难点低代码核心，高薪面试技巧补益

【飞书文档】企业级低代码平台核心需求与方案设计，字节前端专家带你精研产品业务与工程架构低代码业务核心必看

【飞书文档】vite、rollup、tsup、tsc 打包构建工具详解，字节前端专家带你深入多业务构建方案

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

【飞书文档】前端单测、集成测试与端到端测试方案全面解析，字节大佬分享字节系产品分场景测试最佳实践

【飞书文档】css、cssinjs、tailwindcss 核心用法与进阶，字节系产品样式方案评审与最佳实践

【飞书文档】Typescript 进阶与高分技巧，字节面试官细数常问面试题与优秀开源项目最佳实践

【飞书文档】Docker 入门与服务编排进阶，字节前端专家带你光速掌握 CI/CD 运维技能

【飞书文档】ESLint 前端编码规范化与原理剖析，特邀字节大佬分享团队代码质量把控细节

【飞书文档】Notion 与飞书文档协同方案精析，字节前端专家传授百万年薪架构师级项目重难点飞书文档编辑器原理续，进阶

【飞书文档】Ant Design 组件库架构设计与开发实践，高级前端专家带你掌握基建面试技巧组件库与团队基建面试必看

【飞书文档】Taro、Tauri 多端开发实践与原理剖析，《Taro 多端开发权威指南》作者带你悟透多端框架原理多端开发涨薪必学

【飞书文档】Nest 服务端开发与原理深度剖析，《NestJS 实战》作者带你领略框架设计之美全栈进阶，企业级框架

【飞书文档】Babel 与编译原理详解，字节高级前端专家带你从零实现飞书表格公式执行器

【飞书文档】服务端渲染（SSR）与前后端同构技术原理揭秘，字节前端专家带你光速进阶全栈进阶必学

【飞书文档】大数据可视化引擎与数字孪生平台设计浅析，字节架构师：一起来剖析 DataWind 数据洞察平台架构之道

【飞书文档】飞书文档协同编辑器技术揭秘，特邀字节架构师分享富文本编辑器方案细节

【飞书文档】前端性能与异常监控平台全链路设计与实践，字节架构师：掌握这整套拿个 40K+ 不在话下吧

【飞书文档】字节面试专场——中厂在职学员冲击大厂 30K+，看看面试官如何评价大厂模拟面试，问得很深慎看

【飞书文档】冲击中大厂筹备与涨薪突击最优方案，特邀字节面试官带你体验大厂面试全流程

【飞书文档】Webpack 原理深度解读与面试专项突击，字节面试官带你手撕难缠打包构建面试原理题工程化与构建原理深入

【飞书文档】脚手架/CLI 工具原理与开发实践，特邀字节前端专家带你体悟大厂团队基建与研发工作流团队基建必看

【飞书文档】Vite 构建过程与源码深度剖析，你怎么也想不到一线大厂工程化构建面试会问这么深！

【飞书文档】Vue3 源码深度剖析，字节面试官教你轻松拿捏高级前端专家面试框架原理题

【飞书文档】React18 源码深度剖析，字节面试官教你轻松拿捏高级前端专家面试框架原理题

【飞书文档】前端破局 AI 应用开发，特邀字节大佬分享字节系 AI 场景落地应用与 AI 引擎编排流程探索前端新方向同学福音

【飞书文档】高级前端专家如何做性能优化？特邀字节大佬细数飞书应用优化细节（二）【内部培训版】

【飞书文档】小小微前端，轻松拿捏，特邀字节大佬开讲微前端架构与源码剖析【内部培训版】 35K+ 同学必看

【飞书文档】高级前端专家如何做项目架构与工程化设计？特邀字节大佬细数字节开源项目架构细节【超详细内培版】

【飞书文档】高级前端专家如何做性能优化？特邀字节大佬细数飞书应用优化细节（一）【超详细内培版】

【飞书文档】面试被算法干吐了？字节大佬带你突破极限，冲击 30K+ 必掌握算法与 WebAssembly 技术冲刺年包 50W+ 同学必看

【飞书文档】字节大佬带你弯道超车，深入剖析大厂面试真题~

【飞书文档】项目没有难点亮点？字节大佬带你前端项目弯道超车

【飞书文档】备战金九银十，进阶大前端，涨薪全突破！跳槽涨薪需求同学必看

来自字节面试官的灵魂三问

【 初中级 】字节面试官：你有没有了解过 ast？请问 js 的编译是怎么实现的，详细说说原理和具体流程
【 中高级 】字节面试官：Webpack loader 和 plugin 怎样使用，怎么自定义来完成工程打包？
【 专家级 】字节面试官：对于 monorepo 项目，如何实现自定义构建流，怎样通过增量编译与缓存加快构建速度？

【初中级】字节面试官：你有没有了解过 ast？请问 js 的编译是怎么实现的，详细说说原理和具体流程

编译原理是计算机科学中的一个重要领域，主要研究如何将高级编程语言的源代码转换为机器能理解的目标代码（通常是二进制代码或中间代码）。编译器的底层实现通常包含多个阶段，包括词法分析、语法分析、语义分析和代码生成。我们将通过详细说明这些阶段，并提供代码示例和流程图来帮助理解编译器的工作原理。

编译的使用场景非常多，比如：

前端资源构建与编译
多端框架编译时处理，Taro、Uniapp
飞书表格公式运行时编译&执行器实现

编译过程概述

编译过程分为以下几个步骤：

词法分析 ：将源代码 let x = 10 + 20 分析为词法单元（Token）。
语法分析 ：根据词法单元构建出抽象语法树（AST）。
语义分析 ：检查语义，确认变量声明和作用域，确保代码逻辑的正确性。
代码生成 ：将 AST 转换为目标代码，将 let 转换为 var 。

Babel 编译全过程拆解

Babel 最核心的流程我们可以概括为上图所示，parser -> traverse -> generator

我们以一个问题来切入，请听题：

请将以下代码，转为 ES5 代码

const a = 1;
let b = 2;
var c = "heyi";

转为

var a = 1;
var b = 2;
var c = "heyi";

parser

借助 @babel/parser 将源代码转为 ast 结构，即：

const parser = require('@babel/parser');

const ast = parser.parse(code);

traverse

借助 @babel/traverse 将 ast 进行处理生成新 ast，即：

const traverse = require('@babel/traverse');

// 访问者对象
const visitor = {
// 遍历声明表达式 
// 可以直接通过节点的类型操作AST节点。
VariableDeclaration(path) {
    // 替换
    if (path.node.kind === 'var') {
      path.node.kind = 'let';
    }
},
};
traverse.default(ast, visitor);

或者

const traverse = require('@babel/traverse');

traverse.default(ast, {
    enter(path) {
      if (path.isVariableDeclaration({ kind: 'var' })) {
        path.node.kind = 'let'
      }
    },
  })

generator

借助 @babel/generator 根据目标 ast 生成目标代码，示例：

const generator = require('@babel/generator')

generator.default(ast, {}, code).code

完整过程

const parser = require('@babel/parser');
const traverse = require('@babel/traverse');
const generator = require('@babel/generator');

const trans = (code) => {
  const ast = parser.parse(code);
  // 访问者对象
  const visitor = {
    // 遍历声明表达式 
    // 可以直接通过节点的类型操作AST节点。
    VariableDeclaration(path) {
        // 替换
        if (path.node.kind === 'var') {
          path.node.kind = 'let';
        }
    },
  };
  traverse.default(ast, visitor);
  // 生成代码
  const newCode = generator.default(ast, {}, code).code;
  return newCode;
};

const code = `const a = 1
let b = 2
var c = 3`;
console.log(trans(code));

编译原理详解

词法分析（Lexical Analysis）

词法分析是编译器的第一个阶段，它负责将源代码转换为 词法单元流 （Token Stream）。每个词法单元（Token）表示源代码中的一个最小元素，例如变量名、关键字、操作符、数字等。词法分析器会根据语言的定义来识别这些词法单元。

以下是一个简单的 JavaScript 词法分析器（lexer）的实现，它将源代码转换为词法单元流。

const TOKEN_TYPES = {
  KEYWORD: 'KEYWORD',
  IDENTIFIER: 'IDENTIFIER',
  OPERATOR: 'OPERATOR',
  NUMBER: 'NUMBER'
};

// 词法分析器
function lexer(input) {
  let tokens = [];
  let i = 0;

  while (i < input.length) {
    const char = input[i];

    // 匹配关键字 'let'
    if (char === 'l' && input.slice(i, i + 3) === 'let') {
      tokens.push({ type: TOKEN_TYPES.KEYWORD, value: 'let' });
      i += 3;
      continue;
    }

    // 匹配标识符 (变量名)
    if (/[a-zA-Z_]/.test(char)) {
      let identifier = '';
      while (i < input.length && /[a-zA-Z_]/.test(input[i])) {
        identifier += input[i];
        i++;
      }
      tokens.push({ type: TOKEN_TYPES.IDENTIFIER, value: identifier });
      continue;
    }

    // 匹配操作符和等号
    if (/[=+\-*\/]/.test(char)) {
      tokens.push({ type: TOKEN_TYPES.OPERATOR, value: char });
      i++;
      continue;
    }

    // 匹配数字
    if (/\d/.test(char)) {
      let num = '';
      while (i < input.length && /\d/.test(input[i])) {
        num += input[i];
        i++;
      }
      tokens.push({ type: TOKEN_TYPES.NUMBER, value: num });
      continue;
    }

    // 忽略空白字符
    i++;
  }

  return tokens;
}

// 测试
const sourceCode = 'let x = 10 + 20';
const tokens = lexer(sourceCode);
console.log(tokens);

对于输入 "let x = 10 + 20" ，词法分析器将输出如下的词法单元流：

[
  { "type": "IDENTIFIER", "value": "let" },
  { "type": "IDENTIFIER", "value": "x" },
  { "type": "OPERATOR", "value": "=" },
  { "type": "NUMBER", "value": "10" },
  { "type": "OPERATOR", "value": "+" },
  { "type": "NUMBER", "value": "20" }
]

语法分析（Parsing）

语法分析的任务是将词法单元流转换成 抽象语法树 （AST）。抽象语法树是编译器的核心数据结构，它以树的形式表达了代码的结构。语法分析器会根据语言的语法规则解析词法单元流，并构建出符合语言规范的 AST。

以下是一个简单的语法分析器，它将词法单元流转换为 AST。

const AST_NODE_TYPES = {
  VARIABLE_DECLARATION: 'VariableDeclaration',
  BINARY_EXPRESSION: 'BinaryExpression',
  IDENTIFIER: 'Identifier',
  LITERAL: 'Literal'
};

// 语法分析器
function parser(tokens) {
  let i = 0;

  function parseVariableDeclaration() {
    const token = tokens[i];
    if (token.type === TOKEN_TYPES.KEYWORD && token.value === 'let') {
      i++;
      const identifier = tokens[i];
      i++;
      const operator = tokens[i];
      i++;
      const expression = parseExpression();
      return {
        type: AST_NODE_TYPES.VARIABLE_DECLARATION,
        identifier: { type: AST_NODE_TYPES.IDENTIFIER, name: identifier.value },
        init: expression
      };
    }
  }

  function parseExpression() {
    let left = parsePrimary();

    while (i < tokens.length && tokens[i].type === TOKEN_TYPES.OPERATOR) {
      const operator = tokens[i].value;
      i++;
      const right = parsePrimary();
      left = {
        type: AST_NODE_TYPES.BINARY_EXPRESSION,
        operator,
        left,
        right
      };
    }

    return left;
  }

  function parsePrimary() {
    const token = tokens[i];
    if (token.type === TOKEN_TYPES.NUMBER) {
      i++;
      return { type: AST_NODE_TYPES.LITERAL, value: Number(token.value) };
    }
    if (token.type === TOKEN_TYPES.IDENTIFIER) {
      i++;
      return { type: AST_NODE_TYPES.IDENTIFIER, name: token.value };
    }
  }

  return parseVariableDeclaration();
}

// 测试
const ast = parser(tokens);
console.log(JSON.stringify(ast, null, 2));

语法分析器将生成以下 AST：

{
  "type": "VariableDeclaration",
  "identifier": {
    "type": "Identifier",
    "name": "x"
  },
  "init": {
    "type": "BinaryExpression",
    "operator": "+",
    "left": {
      "type": "Literal",
      "value": 10
    },
    "right": {
      "type": "Literal",
      "value": 20
    }
  }
}

语义分析（Semantic Analysis）

语义分析在 AST 的基础上进行，负责检查代码的正确性和安全性。例如，进行类型检查、作用域检查、变量声明的合法性等。语义分析确保代码不仅符合语法规则，还要保证程序在逻辑上是正确的。

以下是一个简单的语义分析器，它会检查变量是否已经声明，并抛出错误：

function semanticAnalysis(ast) {
  // 检查变量声明是否合法
  if (ast.type === AST_NODE_TYPES.VARIABLE_DECLARATION) {
    const varName = ast.identifier.name;
    if (varName === 'x') {
      console.log(`Variable '${varName}' is declared using let. Will be transformed to var.`);
    }
  }
}

// 语义分析阶段
semanticAnalysis(ast);

代码生成（Code Generation）

代码生成是编译器的最后一个阶段，它将经过语法和语义分析后的 AST 转换为目标代码。这个过程可以包括代码优化、生成中间代码（如字节码）、以及生成可执行的目标代码。

以下是一个简单的代码生成器，它将 AST 转换为 JavaScript 代码字符串：

function codeGeneration(node) {
  switch (node.type) {
    case AST_NODE_TYPES.VARIABLE_DECLARATION:
      return (
        'var ' +
        codeGeneration(node.identifier) +
        ' = ' +
        codeGeneration(node.init) +
        ';'
      );
    case AST_NODE_TYPES.BINARY_EXPRESSION:
      return (
        codeGeneration(node.left) +
        ' ' +
        node.operator +
        ' ' +
        codeGeneration(node.right)
      );
    case AST_NODE_TYPES.LITERAL:
      return node.value.toString();
    case AST_NODE_TYPES.IDENTIFIER:
      return node.name;
    default:
      throw new Error('Unknown node type: ' + node.type);
  }
}

// 生成目标代码
const generatedCode = codeGeneration(ast);
console.log(generatedCode);

编译器整体流程图

源代码
   ↓
词法分析器
   ↓
词法单元流（Tokens）
   ↓
语法分析器
   ↓
抽象语法树（AST）
   ↓
语义分析器
   ↓
经过检查的AST
   ↓
代码生成器
   ↓
目标代码

总结

编译器的底层实现通常包括词法分析、语法分析、语义分析和代码生成四个主要阶段。词法分析器将源代码转换为词法单元流，语法分析器将这些词法单元转换为抽象语法树，语义分析器在 AST 上执行类型检查和作用域检查，最后代码生成器将 AST 转换为目标代码。

【中高级】字节面试官：Webpack loader 和 plugin 怎样使用，怎么自定义来完成工程打包？

很多同学面试只能回答出常规 Webpack 问题，太浅，一定要往 Webpack 自定义 loader、plugin 封装与原理，Webpack 完整执行过程等方面详细深入。

Webpack5 基础配置提要

上面提到 Webpack 常见配置包含

mode: 'development'
entry: './src/index.js'
output
module.rules
Loader
Plugin
devServer

完整配置示例

以下是结合基础配置与 loader、plugin，以及自定义 plugin、loader 完整示例

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const MiaomaPlugin = require('./MiaomaPlugin'); // 自定义插件

module.exports = {
    mode: 'development', // or 'production'
    entry: './src/index.js', // 入口文件
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            },
            {
                test: /\.scss$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192, // 8KB 以下的图片转为 base64，以上的则拷贝文件
                            name: 'images/[name].[hash:8].[ext]'
                        }
                    }
                ]
            },
            {
                test: /\.txt$/,
                use: [
                    {
                        loader: path.resolve(__dirname, 'miaoma-loader.js') // 自定义 loader
                    }
                ]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html'
        }),
        new MiniCssExtractPlugin({
            filename: '[name].[contenthash].css'
        }),
        new MiaomaPlugin() // 使用自定义插件
    ],
    devServer: {
        contentBase: './dist',
        compress: true,
        port: 9000
    }
};

配置详解

mode: 'development' :
- 设置 Webpack 运行模式，可以是 development （开发模式）或 production （生产模式）。开发模式下代码不压缩，生产模式下会启用优化。
entry: './src/index.js' :
- 配置 Webpack 的入口文件，打包从此文件开始。
output :
- 配置打包后的文件输出位置和名称。 path.resolve 用于获取绝对路径， filename 用于设置输出的文件名。
module.rules :
- 配置各类文件的处理规则。 test 属性用于匹配文件类型， use 属性指定使用的 Loader。
Loader 使用 :
- babel-loader 处理 JavaScript 文件，将 ES6+ 代码转换为 ES5。
- css-loader 和 sass-loader 处理 CSS 和 SCSS 文件， MiniCssExtractPlugin.loader 将 CSS 提取为单独文件。
- url-loader 处理图片文件，8KB 以下的图片转为 base64，大于 8KB 的图片则拷贝到输出目录。
- 自定义 miaoma-loader.js 用于处理 .txt 文件内容，将 'foo' 替换为 'bar'。
Plugin 使用 :
- CleanWebpackPlugin 在每次打包前清理 dist 目录。
- HtmlWebpackPlugin 根据模板生成 HTML 文件，并自动注入打包后的 JS 文件。
- MiniCssExtractPlugin 将 CSS 提取到单独的文件中。
- 自定义 MiaomaPlugin 在编译完成后输出提示信息。
devServer :
- 配置开发服务器，指定内容目录、是否启用 gzip 压缩以及端口号。

Loader 和 Plugin 介绍

在 Webpack 中， Loader 和 Plugin 是两个非常重要的概念：

Loader 是用于转换模块的工具。例如，将 TypeScript 转换为 JavaScript，将 SCSS 转换为 CSS，或者将图片文件处理为可以导入的模块。Loader 主要用于文件内容的转换。
Plugin 是用于扩展 Webpack 功能的工具。它们可以在 Webpack 构建过程中执行更复杂的任务，如打包优化、资源管理、环境变量注入等。Plugin 主要用于处理构建过程中的各种任务。

常用 Loader

babel-loader : 将 ES6+ 语法转换为兼容性更好的 ES5 语法，通常与 @babel/preset-env 一起使用。
css-loader : 解析 CSS 文件中的 @import 和 url() ，并将其转换为 JavaScript 可以处理的模块。
style-loader : 将 CSS 插入到 DOM 中的 <style> 标签中。
file-loader : 处理文件（如图片、字体），并返回文件的 URL。
url-loader : 类似于 file-loader ，但当文件小于某个限制时，可以将文件内容转化为 Data URL。
sass-loader : 将 SCSS/SASS 文件编译为 CSS。

常用 Plugin

HtmlWebpackPlugin : 自动生成 HTML 文件，并自动注入打包后的资源（如 JS、CSS 文件）。
CleanWebpackPlugin : 在每次打包前清理输出目录，防止旧文件残留。
MiniCssExtractPlugin : 将 CSS 提取到单独的文件中，而不是内嵌在 JavaScript 中。
DefinePlugin : 创建全局常量，在编译时进行替换。
TerserPlugin : 用于压缩 JavaScript 代码，主要在生产环境中使用。

自定义 Loader 与 Plugin

自定义 Loader

Loader 实质上是一个函数，它接收源文件内容作为输入，并输出处理后的内容。可以通过 this.callback 返回结果。

示例：自定义一个 Loader，将文件内容中的 'miaoma' 替换为 '妙码学院'：

// miaoma-loader.js
module.exports = function (source) {
    // 替换 'miaoma' 为 '妙码学院'
    const result = source.replace(/miaoma/g, '妙码学院');
    // 返回处理后的内容
    return result;
};

自定义 Plugin

Plugin 是一个类（ES6+），它包含 apply 方法。 apply 方法接收一个 compiler 对象，通过这个对象你可以钩入 Webpack 的各个构建阶段。

示例：自定义一个 Plugin，编译完成后输出提示：

// MiaomaPlugin.js
class MiaomaPlugin {
    apply(compiler) {
        compiler.hooks.done.tap('MiaomaPlugin', (stats) => {
            console.log('编译完成！');
        });
    }
}

module.exports = MiaomaPlugin;

【专家级】字节面试官：对于 monorepo 项目，如何实现自定义构建流，怎样通过增量编译与缓存加快构建速度？

在现代前端和全栈项目开发中，Monorepo（单体仓库）模式已经成为了一个常见的选择。这种结构有助于更好的管理多个相关的项目，并共享代码。然而，随着项目规模的增长，如何有效地进行构建和加速构建过程成为了一个挑战

Monorepo 基本概念与实践

Monorepo（单体仓库） ：将多个相关项目放在同一个代码仓库中进行管理。它允许不同团队共享代码和工具，统一管理依赖和版本。
常见的工具 ：
- Lerna ：管理 monorepo 中的包和版本。
- Nx ：为 monorepo 提供增量构建、缓存和优化工具。
- Turorepo ：现代化的 Monorepo 管理工具，专门优化了构建速度和开发工作流。
- Yarn Workspaces ：通过 yarn 进行依赖管理，简化 monorepo 中的包管理。

Turborepo 方案调研

Turborepo 是一个现代化的 Monorepo 管理工具，专门优化了构建速度和开发工作流。Turborepo 的核心特点包括：

增量构建 ：只构建那些发生变化的部分。
构建缓存 ：缓存构建结果，避免重复构建相同内容。
并行构建 ：支持并行执行任务，进一步加快构建过程。
高效的工作流 ：支持通过简单的命令自动化构建、测试、发布等任务。

Turborepo 的构建流设计

增量构建

增量构建是提升构建速度的核心，Turborepo 会跟踪各个模块之间的依赖关系，只重新构建那些发生变化的模块。这是通过分析项目之间的依赖关系和文件差异来实现的。

Turborepo 内部使用 task pipeline 来描述构建任务的依赖关系。每个任务（如构建、测试、发布等）可以通过标记依赖来决定执行顺序。只要有文件变动，Turborepo 会自动识别出受影响的任务并执行。

通过以下命令可以查看当前影响的任务并执行增量构建：

turbo run build

缓存机制

Turborepo 提供了本地和远程缓存功能。构建缓存的作用是存储每次构建的中间结果，以便下次使用。构建缓存能够极大地减少重复构建的时间。

本地缓存 ：构建结果会缓存到本地，每次构建时，Turborepo 会首先检查是否有对应的缓存，如果有，直接复用缓存。
远程缓存 ：可以将缓存存储到远程服务（如 Vercel 提供的缓存服务），使得不同开发者和 CI/CD 流程可以共享缓存，提高效率。

在 Turborepo 中启用缓存非常简单，默认情况下，所有的任务都将启用缓存。如果你需要手动配置缓存策略，可以通过 turbo.json 配置文件进行调整。

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

并行化构建

Turborepo 会自动并行化任务的执行。对于互不依赖的任务，Turborepo 会尽可能并行执行，从而加速整个构建过程。

例如，如果你有多个独立的项目或模块，Turborepo 会在多个 CPU 核心上同时执行构建任务，减少总体构建时间。

使用以下命令启动并行构建：

turbo run build --parallel

依赖关系和任务管道

Turborepo 允许你定义任务之间的依赖关系。你可以为每个任务配置输入和输出，确保只有相关的任务被触发，而不需要重复执行整个构建过程。

例如，你可以在 turbo.json 中定义任务依赖：

{
  "pipeline": {
    "build": {
      "dependsOn": ["^build"]
    },
    "test": {
      "dependsOn": ["build"]
    }
  }
}

这意味着 test 任务会依赖于 build 任务， build 任务会依赖于其他模块的构建。

最佳实践

配置增量构建

增量构建是提高构建效率的关键。在 Turborepo 中，确保每个模块的输入和输出都被正确配置，以便工具能够判断哪些部分需要重新构建。

在 turbo.json 中配置任务的输入和输出：

{
  "pipeline": {
    "build": {
      "inputs": ["src/"],
      "outputs": ["dist/**"]
    }
  }
}

启用缓存

启用缓存是提升构建速度的另一重要手段。默认情况下，Turborepo 会为每个任务启用缓存，但你也可以根据需要进一步调整缓存策略。

远程缓存可以通过 Turborepo 提供的服务进行配置，或者你也可以设置自己的缓存服务（如 AWS S3 或 GitHub Actions 缓存）。

turbo login

通过此命令登录到 Vercel 或其他服务，以启用远程缓存。

优化 CI/CD 流程

Turborepo 在 CI/CD 中的表现尤为突出。通过利用增量构建、缓存和并行化构建，CI 流程可以大幅度缩短时间。

例如，使用 GitHub Actions 配合 Turborepo，你可以通过以下方式配置流水线：

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm install
      - run: turbo run build --cache

充分利用并行构建

确保最大化并行构建的能力。对于不依赖于其他任务的模块，尽量并行执行。这可以通过 --parallel 标志来实现。

turbo run build --parallel

依赖管理与模块拆分

将项目拆分为多个独立的模块，每个模块尽量独立，减少模块之间的依赖。这样可以通过增量构建和并行化构建最大化效率。

总结

使用 Turborepo 作为构建工具，可以大幅提升 Monorepo 项目的构建速度。通过以下几个关键策略：

增量构建 ：只编译变动部分，减少不必要的构建。
缓存机制 ：使用本地和远程缓存，避免重复构建。
并行构建 ：充分利用并行执行任务来加速构建。
优化 CI/CD 流程 ：结合 Turborepo 和 CI 工具，优化自动化构建过程。

项目实战 Turbo 应用最佳实践

{
    "$schema": "https://turbo.build/schema.json",
    "tasks": {
        "build:watch": {
            "cache": false,
            "persistent": true
        },
        "build": {
            "dependsOn": ["^build"],
            "outputs": []
        },
        "dev": {
            "cache": false,
            "persistent": true
        },
        "typecheck": {
            "cache": false,
            "persistent": true
        }
    },
    "ui": "tui",
    "cacheDir": ".turbo/cache"
}

脚本配置：

"scripts": {
    "build:watch": "turbo build:watch",
    "build": "turbo build",
    "dev": "turbo dev"
}

专家简历优化指南（目标 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】

前端前沿技术爱好者

大厂前端工程化与编译原理详解，特邀字节大佬破译专家进阶密码

【 初中级 】字节面试官：你有没有了解过 ast？请问 js 的编译是怎么实现的，详细说说原理和具体流程