> 最近我使用AI完成了一个较为大型的全栈项目的开发。我使用VSCode Copilot + Claude 4模型，仅靠提示词、部分手动修改的错误和代码审查，在**两天半**的时间里，完成了一个**代码量2w+的网盘系统**，**90%的代码都是由AI完成的**！



最近我使用AI完成了一个较为大型的全栈项目的开发。

# 我做了什么

我使用VSCode Copilot + Claude 4模型，仅靠提示词、部分手动修改的错误和代码审查，在**两天半**的时间里，完成了一个**代码量2w+的网盘系统**，**90%的代码都是由AI完成的**！

仓库：https://github.com/healwrap/yunxia （欢迎大家点点star）

## 项目截图

**首页**

![](https://y9jjxxn0yg.feishu.cn/space/api/box/stream/download/asynccode/?code=ZjZlZDQwMjhlYmVkOTQ3NjM4MWRlYWFhYmM5NzhmYjJfdU9KemlFajhpMldUQ2hWa1lZcXJ5Z3cyOHhsRWw5UDVfVG9rZW46REJDUWJlWXJCb2FEWTN4YWU3UWNJaFBQbk5lXzE3NjE0NzYyNzM6MTc2MTQ3OTg3M19WNA)

**任务队列管理页面**

![](https://y9jjxxn0yg.feishu.cn/space/api/box/stream/download/asynccode/?code=NGJhZWJjZTkyN2NlNmVkZmZiNzgxZmFjMmY1ODM4ZDBfbWthU3FTYU5lNHR3MDQ2V0o5N0lvTzlwdUNkeE5OdGpfVG9rZW46V3JXbGJNQWd6b1FYckt4MEhKTWNJeENxblRGXzE3NjE0NzYyNzM6MTc2MTQ3OTg3M19WNA)

**文件管理页面**

* 支持上传文件

* 新建文件夹

* 修改文件名

* 删除文件

* 分享文件

* 下载文件

![](https://y9jjxxn0yg.feishu.cn/space/api/box/stream/download/asynccode/?code=NzY1ODA0ZDJiNjk4N2E4NmExOGRiN2I4M2Q0YTdmMzVfZld6V0VGT1VCOUVOeko0SHJ6SE4wR1JyMHc3bGdpaW1fVG9rZW46Q1VVUWIzT3NIb2hBd2x4NTFCUGM4YVdEblhEXzE3NjE0NzYyNzM6MTc2MTQ3OTg3M19WNA)

**分享文件管理页面**

* 增删改查

* 下载分享文件

![](https://y9jjxxn0yg.feishu.cn/space/api/box/stream/download/asynccode/?code=MzRmODIzYTRlZWFiYjRmNDM3MDVjOWM3ZmIyN2NlMDFfNHd6NzVPQkNyQTVjR29RNjhHUDdCTmxZYzJGalhQUnpfVG9rZW46Qm1YVmJQdGNXbzl1NnB4elp2cGNZY2dmbjVmXzE3NjE0NzYyNzM6MTc2MTQ3OTg3M19WNA)

![](https://y9jjxxn0yg.feishu.cn/space/api/box/stream/download/asynccode/?code=NmZhMDc4M2E4ZjQwNjAwMDEzOTYwZDU4ZTg1MDJkYWNfdVdXOEJTREI2dW5yN3ZRZlpFYnhGNkxWV0hoanVIdWJfVG9rZW46TXZJNWJybmpDb0xOZ2F4eW1jOWNzZXVkbjZmXzE3NjE0NzYyNzM6MTc2MTQ3OTg3M19WNA)

![](https://y9jjxxn0yg.feishu.cn/space/api/box/stream/download/asynccode/?code=OGI2YzI0YjM4ZWM4YzJkMjhhMDRiODViZmE3YzRkN2VfaDNFRDhJSEQ0NU5mQWgyUXljdlRMcEhWNXF2UHpqVXBfVG9rZW46WU9nV2I0UWFhb3JWQ1N4cUc5c2NUT0w2bkVoXzE3NjE0NzYyNzM6MTc2MTQ3OTg3M19WNA)



**回收站**

![](https://y9jjxxn0yg.feishu.cn/space/api/box/stream/download/asynccode/?code=MzVlMDQ1MTRhZDk0ODdmOTExZTY1ZjI5MzM3OWY5NWFfbWZqVXl3aGl5MGVINjVDeEhkWFJhaFZZdWM4alkwaUpfVG9rZW46QVhlb2I5RGRib3JTNlh4Z0JKemNUQm5RbnBmXzE3NjE0NzYyNzM6MTc2MTQ3OTg3M19WNA)

# 项目背景

项目的背景如下，主要是提供给AI的上下文信息，同时也是自己梳理功能点应该注意的地方。

具体文档在飞书知识库中，供我和我的开发伙伴使用，这里简单提一提。

网盘系统对标的是市面上常见的产品，如：百度网盘、夸克网盘等等系统。目标是实现它们所包含的基本功能、甚至在某些功能上，体验要优于它们。

## 需求分析

网盘系统的需要实现的功能大概包括

* 文件管理

* 分享管理

* 回收站管理

* 下载管理

* 空间管理

具体细节不展开了，这都是很简单的功能，百度或者AI都能给你详细的设计

## 技术栈选型

我个人是熟悉Vue偏多的，最近想要全面掌握React、NodeJS后端等等，给自己多增加几项技术栈，于是我选用的技术栈如下：

* **前端**: React + TypeScript + Vite + Ant Design + TailwindCSS + Zustand&#x20;

* **后端**: Koa + TypeScript + TypeORM + PostgreSQL&#x20;

* **WebAssembly**: 自定义哈希计算包(仅作演示，实际项目使用hash-worker包)

* **认证**: Clerk 用户管理系统

这里的细节也不需要纠结，本文主要是针对AI Coding细节进行讲解的。

## 交互细节

还需要针对项目中的一些细节做出大概定义（后续可以让AI给你完善），如

* 数据库表设计

* 文件秒传功能设计

* 断点续传功能设计

* 前端基本架构设计

* 后端基本架构设计

* 等等...

> 注意：这些都是可以让AI进行完善的细节，但是你必须思考清楚，自己这个项目应该朝着一个什么方向编写。否则AI极其容易写出混乱、错误的逻辑。

# 编码经验

很明显，当今任何AI产品都无法完全做到，用户输入一个提示词，AI完完全全自主完成所有功能，并且按照用户预期想法完成，这是目前做不到的。

如何让AI工具为我们所用呢？我的经验如下：

## 选用足够强大的AI编辑器

如：Claude Code、Cursor、Trae、Kiro、Augment Code、VSCode Copilot等等

Copilot 早期真的很难用，但是随着近期更新，它也比较好用了，主要是靠它可以通过Github学生包免费使用，本项目也基本90%的编码都是通过它完成的

但是你要说它好，肯定还是不如其他一些更强的工具的，只能说够用。

## 使用编码能力足够强大的模型

如：Claude 3.7/4、GPT5等等

选择模型这一块，也有讲究，Claude模型虽然强大，但在处理一些小问题时，3.7 4.0 的效果不如 3.5，可能前者是专为大型项目而生，再简单的功能，也会写出一堆精致的废物代码出来，而3.5在简单需求上的处理就远好于前者。

这里我不得不感慨，Claude模型的编码能力、逻辑思维能力之强大，简直超过其他同类型模型一大截。

从今年三月左右我使用Claude 3.7模型完成了一个公司内使用的浏览器插件，到如今使用Claude模型几乎完成80-90%的代码编写，AI的强大让我感到震惊且恐慌。

## 提示词工程技巧

让AI能够正确理解你的指令

我这里参考的是Copilot文档中提到的技巧 [Prompt engineering for GitHub Copilot Chat - GitHub 文档](https://docs.github.com/zh/copilot/concepts/prompt-engineering)

## 上下文工程技巧

让AI能够理解你的项目

上下文工程原本指：精心设计输入给大模型的内容。意思是因为大模型的上下文长度有限，当我们希望大模型理解海量内容时，我们需要精心设计好输入给大模型的内容，既不超过上下文长度，又能让大模型能够理解内容。

在我本次的实践中，遵循了以下原则：

1. 提供背景：我们需要提供给大模型我们项目的大概情况，如项目大概是干什么的、技术栈是什么、一些大概的功能交互是怎么样的、数据模型是怎么样的、开发方式是怎么样的，等等。这个一般是让AI生成一个提示文件，如Copilot的“生成指令”功能，生成的`copilot-instructions.md`。用户每次提问，编辑器都会自动带上此文件，让AI可以准确回答问题，并减少出错概率。

2. 提供文档：当我们使用一些冷门的库时，AI可能会因为缺少训练数据导致回答错误。这个时候我们可以使用工具给AI提供文档。如context7 MCP、编辑器默认的提取网页工具、手动粘贴文档等等

3. 拆分对话：我们需要根据自己对需求的理解，每次只在一个对话中完成需求，而不要在一个对话中频繁对话，导致上下文不足。

4. 压缩对话：当我们需要在一个对话中完成时，且上下文长度不足时，使用压缩对话功能（但是前提是不要在需求完成到一半的时候压缩，这样会导致AI对任务识别不清楚）

5. Todo任务清单：当我们完成一个复杂的需求时，需要使用任务清单工具，让大模型无论上下文长度多长，都能清晰知道要干什么，而不是干了一会儿之后忘记要干什么了。

## 灵活使用工具

我这次的全栈项目，使用的工具如下

1. dbhub MCP，可以让AI操作数据库，在全自动这方面，以及问题排查方面会更好

2. context7 MCP，可以让AI读取最新库的用法，比如此次项目中使用Antd、clerk、hash-worker、AssemblyScript等等技术栈，我都尽量让AI查询用法后再编码，防止因为训练数据的问题导致回答出错

3. 大模型的图像识别能力，有的情况下，我们可以直接截图给模型，让模型理解图片并修复问题

同时，工具不是越多越好，过多的工具会占用模型上下文，导致模型变笨，你需要适当减少工具的使用，让模型回答更精准。

## 灵活使用模型的多模态能力

大模型支持多模态能力，比如图像识别，你可以让AI多帮你做很多事

1. 你可以画产品UI，模型可以根据你的图片还原出一个类似的页面

2. 你可以复制一些UI网站的图片，模型可以仿照它完成功能

## 使用适合AI的编程方式

1. 使用便于AI编程的语言和框架，比如

   1. 原生HTML+原子类名等等，AI几乎完美适配这种编程方式。尽管写出的代码让人无法理解和维护，甚至因为缺少代码拆分，AI都可能难以维护

   2. React框架，因为它非常流行、且生态庞大，所以训练数据中会包含大量与此相关的内容，所以编码能力会更强

2. 使用便于AI Coding的一些库，比如

   1. Tailwind CSS，这个库简直是为AI而生，他可以使用少量代码生成界面（尽管这些原子类名对人类不友好，但是对AI很友好）

   2. shadcn等Tailwind CSS构建的UI库

3. 减少lint、甚至不要开启

   1. lint规则会极大影响AI编码，让AI重复进行很多次没有什么实际作用的lint修复，增加上下文。但是我的项目我希望开启一定的lint规则，所以我在提示词中尽量让AI先使用`eslint --fix`命令修复文件问题之后再手动修复

4. TS规则不要过于严格

   1. 在AI项目中，TS的类型提示绝对是友好的，不仅是让AI写出便于人类理解的代码，同时也可以帮助AI检查出它输出的代码的一些问题（比如库、方法找不到、类型不兼容等等）

   2. 但是过于严格的TS规则会导致AI编码困难，且需要频繁修复问题

# 实际操作

## 创建指令文件

![](https://y9jjxxn0yg.feishu.cn/space/api/box/stream/download/asynccode/?code=YmQ2YmExMWE2N2Q1NDliNWNjY2FjYTkyNjc1MTdhMTBfb0xpbGhPaklHSVJtYWd4d0RFc3RRMlJ6alp1VUpHSkZfVG9rZW46RlRlRmJFc01qb1lHbWJ4aHEwNmNQNnJQbjdmXzE3NjE0NzYyNzM6MTc2MTQ3OTg3M19WNA)

指令文件可以让AI理解项目，并选择合适的命令进行开发调试，这个功能类似Claude Code 的 init



## 根据模糊的需求确定清晰的计划

我们大部分时候没有办法给到AI十分准确的计划，AI可能也不清楚我们要干什么，会导致实际干的和预期不符合，我们就可以让它先生成简单的计划方案，审核后在让它创建任务执行。

![](https://y9jjxxn0yg.feishu.cn/space/api/box/stream/download/asynccode/?code=M2Q2OTQ5NDI2MDY0ODI0Y2NhOTNmMmI4MGVhZWJkNGFfdmQwOUpjem9oYTB4SEc0VFU3cDBOYVFma3VLb3JTV0FfVG9rZW46QTdPT2JISHNqb1JOdjh4R2RscmNmVGlUblVjXzE3NjE0NzYyNzM6MTc2MTQ3OTg3M19WNA)



## 调用待办工具生成任务

待办工具可以让AI不容易产生偏移，准确完成需求

![](https://y9jjxxn0yg.feishu.cn/space/api/box/stream/download/asynccode/?code=YmYzOTNmMzEyNWNjN2FlNjRlMjQ4NjNkYjI2YzYwYzlfcHF2bWhOb1F1OExJSEFWbWs2VzhuSklTQkp4bjNaOXZfVG9rZW46Uk5YMWJYd1Btbzh6OFh4ekRkd2NZRGdQblNkXzE3NjE0NzYyNzM6MTc2MTQ3OTg3M19WNA)



# 其他参考内容

## 打造一个酷炫的界面

* https://21st.dev/home 一些酷炫的组件和背景，让AI一键移植到项目中

![](https://y9jjxxn0yg.feishu.cn/space/api/box/stream/download/asynccode/?code=MDhjZDIzOWFiMmUxNDMwNDEwN2RmYzJlMDhmNmNlMDlfc215eWdiR2I0ZzNmazRVUGk0Qzl5N2NQWG84U3doYU5fVG9rZW46T0ZHa2JBVTBRb1hHVTV4MkNpcWNMZWFPbldjXzE3NjE0NzYyNzM6MTc2MTQ3OTg3M19WNA)

* https://reactbits.dev/ 类似的网站

![](https://y9jjxxn0yg.feishu.cn/space/api/box/stream/download/asynccode/?code=MTE0YTY3NzIxNmJiOWQ1NmY4MDE4OTkzYWJkZDdiOGVfcUxRVXBuMzI5M1pCOE5HTlRlbFhyTG1uaG5PV3FqbmlfVG9rZW46TzY1Y2JNdjBIb0NUekh4UHo2cmNhMTdCblZLXzE3NjE0NzYyNzM6MTc2MTQ3OTg3M19WNA)

* https://mobbin.com/ 提供丰富的UI设计灵感，通过截图在AI 编辑器中一键还原UI稿

![](https://y9jjxxn0yg.feishu.cn/space/api/box/stream/download/asynccode/?code=NTEzYTc5OGU0OGIyOGUxNjU1OWRiMjNhYWUxZmYwMDhfQWNJaGZOcnVLS0tUTzhMMExIbzJxQUhlanNpN0ZHMW1fVG9rZW46TDZlaGJuWVZZb2dndk14WVoxZ2NNbWpwbkdjXzE3NjE0NzYyNzM6MTc2MTQ3OTg3M19WNA)



## 全自动编程

如果你更希望让AI全自动完成需求，并一键部署，可以试试类似v0等的平台

* https://v0.app/

  * AI全自动构建网站，支持如下功能

    * 通过对话构建网站

    * 通过图片或者figma还原UI

    * 在项目的基础上进行修改

    * 一键部署项目

    * 支持构建全栈项目

* https://bolt.new/

* https://lovable.dev/



比如使用一张来自mobbin的UI稿截图，v0就能够全自动构建一个页面，页面的还原度还是很高的

![v0中还原的界面](https://y9jjxxn0yg.feishu.cn/space/api/box/stream/download/asynccode/?code=NmU0YTVjOTBlMTAzMjI1MjM5NjUzZmEyZDc0NGU5ZjlfYWpnRm5DUXRlWEZNU2ozRGVXdzdYVlZ3Z3dONmtQRkxfVG9rZW46RGt6NWJ1ZE40b0ZnMEp4SGlaRmNuZXYybnlkXzE3NjE0NzYyNzM6MTc2MTQ3OTg3M19WNA)

![mobbin UI稿截图](https://y9jjxxn0yg.feishu.cn/space/api/box/stream/download/asynccode/?code=NWVlNDk3OWY5OGQyYWE0ZGQ2NzMzZmRmOWUxOWVjMTlfYzkxVk85WHJBWDBJUW5oSjFuSWpQTE9ZOWhpdDNqRUJfVG9rZW46RzUwUWJ6N1dWb1dqTjh4UlR4TWNWRVFjbldoXzE3NjE0NzYyNzM6MTc2MTQ3OTg3M19WNA)

同时，还可以将生成的代码，直接在本地运行

![](https://y9jjxxn0yg.feishu.cn/space/api/box/stream/download/asynccode/?code=YjQ0NDVkODNkODc5YzA2OGE3YWJkYmNmMjExNmVlYmNfaFc4bnhWTTgycXNJejZQVmh5WjFBNE9OYmVHMkQ2WTRfVG9rZW46VDdVOWJQZEJLb2pFWmJ4UDdtQWNqaDRrbmpmXzE3NjE0NzYyNzM6MTc2MTQ3OTg3M19WNA)



## 生成草图、UI

你可以利用AI生成静态的HTML页面作为草图。

但是吧，我个人觉得没啥用，因为AI生成的都是“蓝紫蓝紫”的界面，并不好看

# 总结

如今的AI已发展到让人难以想象的地步了

这次只是简单需求，AI编写的代码其实也有很多问题，在公司实习时，我其实也尝试用AI写代码，奈何业务过于复杂，AI既没有训练数据，也理解不了，导致其实AI的帮助很小。

但是一些中小项目，完全可以让AI替代人来编写代码了，不局限于只是修修Bug。

对于前端来讲，AI的冲击太大了... 随便一句提示词，就能完整复刻一整个网站。

今天是简单Demo，可能明天就可以正式替代程序员干活了....



往期文章

* [AI Coding 最佳实践-从零到一全栈项目编写探索 AI 辅助编程全流程:从提示词优化到多工具协同，实战演示如何提升 - 掘金](https://juejin.cn/post/7544388006720733238)

* [将你的copilot转为OpenAI兼容服务目前各大AI 编辑器的订阅价格都比较高，想使用更强的claude模型，只能每 - 掘金](https://juejin.cn/post/7545378937276055598)

* [AI Coding 最佳实践-从零到一全栈项目编写探索 AI 辅助编程全流程:从提示词优化到多工具协同，实战演示如何提升 - 掘金](https://juejin.cn/post/7544388006720733238)

* [掘金文章救星!我用Coze打造AI工作流自动生成爆款标题和封面手把手教你搭建Coze工作流，解决文章标题难产和封面设计痛 - 掘金](https://juejin.cn/post/7541395130579599395)

* [LangChain:大模型开发框架的全方位解析与实践本文深入介绍了开发大模型框架 LangChain，包括其核心功能、接 - 掘金](https://juejin.cn/post/7540946585362202624)

Vibe Coding最佳实践，高性能网盘系统开发

> Webpack 是一个现代 JavaScript 应用程序的模块打包工具，其主要的打包编译过程的原理几乎成为每个前端程序员都需要熟悉的知识



## 参考资料

https://webpack.js.org/

## 核心概念

Webpack 是一个现代 JavaScript 应用程序的模块打包工具，它的核心概念包括以下几个：

![image-20250822130745313](https://picgo-img-repo.oss-cn-beijing.aliyuncs.com/img/58843e9148615676bb15190b28a62e20.png)

1. 入口 (Entry)：

   1. 入口起点指示 webpack 应该使用哪个模块作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出哪些模块和库是入口起点（直接和间接）依赖的。

   2. ```JavaScript
      module.exports = {
        entry: './src/index.js',
      };
      ```

2. 代码块 (Chunks)：

   1. Chunk 是 webpack 在打包过程中，对模块进行分组后的产物。它是一个中间概念，代表了一组相互关联的模块集合。
   2. chunks 的形成通常与代码分割有关，比如通过 splitChunks 插件将公共模块提取为单独的 chunk，或者通过动态 import () 语法创建异步 chunk。

```JavaScript
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all', // 将所有类型的 chunk（初始、异步、所有）中的公共模块提取
    },
  },
};
```

1. 打包产物 (Bundles)：
   1. Bundle 是 webpack 打包过程的最终输出文件，是由一个或多个 Chunk 经过处理后生成的物理文件。
   2. 通常情况下，一个 Chunk 会对应生成一个 Bundle，但也可能存在多个 Chunk 合并为一个 Bundle 的情况，具体取决于配置。

```JavaScript
// 示例：输出多个 bundle 文件
module.exports = {
  entry: {
    main: './src/index.js',
    vendor: './src/vendor.js', // 第三方库单独作为入口
  },
  output: {
    filename: '[name].bundle.js', // 生成 main.bundle.js 和 vendor.bundle.js
    path: path.resolve(__dirname, 'dist'),
  },
};
```

1. 加载器 (Loaders)：

   1. 加载器让 webpack 能够处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。加载器可以将所有类型的文件转换为 webpack 能够处理的有效模块。

   2. ```JavaScript
      module.exports = {
        module: {
          rules: [
            {
              test: /\.css$/,
              use: ['style-loader', 'css-loader'],
            },
          ],
        },
      };
      ```

2. 插件 (Plugins)：

   1. 插件用于执行范围更广的任务，包括打包优化、资源管理和注入环境变量等。插件的功能极其强大，可以用来处理各种各样的任务。

   2. ```JavaScript
      const HtmlWebpackPlugin = require('html-webpack-plugin');
      module.exports = {
        plugins: [
          new HtmlWebpackPlugin({ template: './src/index.html' }),
        ],
      };
      ```

3. 模式 (Mode)：

   1. 通过选择 `development`, `production` 或 `none` 之中的一个，来设置 webpack 内置的优化。

   2. ```JavaScript
      module.exports = {
        mode: 'development',
      };
      ```

4. 模块 (Modules)：

   1. 在 webpack 里，一切文件皆模块，通过入口文件来开始，并通过一系列的导入或加载请求来进行模块间的连接。

## 常用Loader

1. Babel Loader

   1. 用于将 ES6+ 代码转译为 ES5。

   2. ```JavaScript
      module.exports = {
        module: {
          rules: [
            {
              test: /\.js$/,
              exclude: /node_modules/,
              use: 'babel-loader',
            },
          ],
        },
      };
      ```

2. CSS Loader 和 Style Loader 

   1. `css-loader` 使你可以使用类似 `@import` 和 `url()` 的方式实现 `require()` 的功能。

   2. `style-loader` 将 CSS 插入到 DOM 中。

   3. ```JavaScript
      module.exports = {
        module: {
          rules: [
            {
              test: /\.css$/,
              use: ['style-loader', 'css-loader'],
            },
          ],
        },
      };
      ```

3. Sass Loader

   1. 将 Sass/SCSS 文件编译为 CSS。

   2. ```JavaScript
      module.exports = {
        module: {
          rules: [
            {
              test: /\.scss$/,
              use: ['style-loader', 'css-loader', 'sass-loader'],
            },
          ],
        },
      };
      ```

## 常用Plugin

1. HTML Webpack Plugin (html-webpack-plugin) ：

   1. 生成一个 HTML 文件，并自动注入所有的生成的 bundle。

   2. ```JavaScript
      const HtmlWebpackPlugin = require('html-webpack-plugin');
      module.exports = {
        plugins: [
          new HtmlWebpackPlugin({
            template: './src/index.html',
          }),
        ],
      };
      ```

2. Clean Webpack Plugin：

   1. Webpack 5 中可以通过 `output.clean` 选项替代 `clean-webpack-plugin`。

   2. ```JavaScript
      module.exports = {
        output: {
          path: path.resolve(__dirname, 'dist'),
          clean: true, // 每次构建前清理 /dist 文件夹
        },
      };
      ```

3. Mini CSS Extract Plugin (`mini-css-extract-plugin`)：

   1. 提取 CSS 到单独的文件中，而不是在 JavaScript 中内联。需要配合`loader`使用

   2. ```JavaScript
      const MiniCssExtractPlugin = require('mini-css-extract-plugin');
      module.exports = {
        module: {
          rules: [
            {
              test: /\.css$/,
              use: [MiniCssExtractPlugin.loader, 'css-loader'],
            },
          ],
        },
        plugins: [
          new MiniCssExtractPlugin({
            filename: '[name].[contenthash].css',
          }),
        ],
      };
      ```

4. Hot Module Replacement Plugin (webpack.HotModuleReplacementPlugin)：

   1. 启用热模块替换（HMR），在运行时更新各种模块，而无需完全刷新。

   2. 在 Webpack 5 中不需要显式添加插件，只需在 `devServer` 中启用 `hot` 选项。

   3. ```JavaScript
      module.exports = {
        devServer: {
          contentBase: './dist',
          hot: true,
        },
      };
      ```

## 构建过程

![image-20250822130758223](https://picgo-img-repo.oss-cn-beijing.aliyuncs.com/img/81a3d6ca8c746916ccf8dc2df71b2468.png)

1. 初始化阶段
   1.  在这个阶段，Webpack 从配置文件和命令行参数中读取并解析配置。然后，Webpack 根据配置初始化内部状态和插件系统。
   2. 读取配置：从 `webpack.config.js` 文件或命令行参数中读取配置。
   3. 初始化插件：根据配置文件中的 `plugins` 选项初始化插件实例。
   4. 确定入口文件：确定项目的入口文件（`entry`）。
2. 构建依赖图
   1.  Webpack 会从入口文件开始，递归地解析所有依赖，形成一个依赖图。
   2. 解析模块：使用 `Loaders` 处理非 JavaScript 文件，如 CSS、图片等。每个模块会被递归地解析其依赖。
   3. 创建模块对象：Webpack 为每个模块创建一个模块对象，并保存在内存中。
3. 模块编译
   1.  Webpack 使用相应的 `Loaders` 将模块的源代码转换为可以在浏览器中运行的 JavaScript 代码。
   2. 处理模块：通过加载器链对模块进行转换。
   3. 生成 AST（抽象语法树）：Webpack 将模块源代码转换为 AST，以便进一步处理。
   4. 收集依赖：从 AST 中提取模块的依赖项，并将其加入到依赖图中。
4. 生成代码块（Chunks）
   1.  Webpack 会根据依赖图将所有模块分组，形成不同的代码块（Chunks）。这些代码块最终会被打包成一个或多个输出文件。
   2. 代码拆分：根据配置中的 `optimization.splitChunks` 等选项，Webpack 会将代码拆分为多个 Chunk。
   3. 生成 Chunk 对象：Webpack 创建 Chunk 对象并将相关的模块添加到其中。
5. 优化阶段
   1.  优化阶段是确保打包后的代码性能和大小得到提升的关键步骤。Webpack 5 提供了一些内置的优化功能：
   2. 代码压缩：使用 TerserWebpackPlugin 压缩 JavaScript 代码。
   3. CSS 压缩：使用 css-minimizer-webpack-plugin 压缩 CSS 代码。
   4. 代码分割：使用 SplitChunksPlugin 进行代码分割，将公共模块提取到单独的文件中。
   5. Tree Shaking：移除未使用的代码，减小包的大小。
   6. 作用域提升：模块合并，提升运行效率。
6. 输出阶段
   1.  Webpack 将每个代码块转换为一个或多个输出文件，并将其写入到磁盘上。
   2. 生成输出文件：Webpack 根据配置中的 `output` 选项生成最终的输出文件。
   3. 应用插件：在输出阶段，Webpack 会调用相关的插件（如 `HtmlWebpackPlugin`）来处理输出文件。

## Webpack优化

### 开发优化

1. 开启模块热替换（HMR）

   1. 模块热替换可以在不刷新整个页面的情况下更新模块，提高开发效率。

2. 使用 Source Maps

   1. Source Maps 有助于在浏览器中调试原始源代码，而不是转换后的代码。不同类型的 Source Maps 在性能和详细程度上有所不同。

3. 优化编译速度

   1. 使用 `cache` 和 `parallel` 选项来加速构建过程。

   2. ```YAML
      const TerserPlugin = require('terser-webpack-plugin');
      
      module.exports = {
        mode: 'development',
        optimization: {
          minimize: true,
          minimizer: [
            new TerserPlugin({
              cache: true,
              parallel: true,
              sourceMap: true,
            }),
          ],
        },
      };
      ```

4. 使用持久化缓存

   1. Webpack 5 提供了持久化缓存功能，可以显著提高重复构建的速度。

   2. ```JavaScript
      module.exports = {
        cache: {
          type: 'filesystem', // 使用文件系统缓存
        },
      };
      ```

5. 更快的增量编译

   1. 配置 `watchOptions` 来优化文件监听，减少不必要的文件扫描。

   2. ```JavaScript
      module.exports = {
        watchOptions: {
          ignored: /node_modules/,
          aggregateTimeout: 300, // 防抖延迟
          poll: 1000, // 轮询时间
        },
      };
      ```

### 打包优化

1. 使用生产模式

   1. 生产模式下，Webpack 会自动启用各种优化，如压缩代码和启用 Tree Shaking。

   2. ```JavaScript
      module.exports = {
        mode: 'production',
      };
      ```

2. 启用 Tree Shaking

   1. Tree Shaking 可以移除未使用的代码，减小打包后的文件大小。确保使用 ES6 模块语法（`import` 和 `export`）。

   2. ```JavaScript
      module.exports = {
        mode: 'production',
        optimization: {
          usedExports: true,
        },
      };
      ```

3. 代码分割

   1. 使用代码分割技术，将代码拆分为多个文件，以便更好地利用浏览器缓存和加速加载速度。

   2. ```JavaScript
      module.exports = {
        optimization: {
          splitChunks: {
            chunks: 'all',
          },
        },
      };
      ```

4. 压缩 JavaScript

   1. 使用 `TerserPlugin` 压缩 JavaScript 代码。

   2. ```JavaScript
      const TerserPlugin = require('terser-webpack-plugin');
      
      module.exports = {
        optimization: {
          minimize: true,
          minimizer: [new TerserPlugin()],
        },
      };
      ```

5. 压缩 CSS

   1. 使用 `css-minimizer-webpack-plugin` 压缩 CSS 文件。

   2. ```Java
      const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
      
      module.exports = {
        optimization: {
          minimize: true,
          minimizer: [
            '...', // 保留默认的 minimizer
            new CssMinimizerPlugin(),
          ],
        },
      };
      ```

6. 持久化缓存

   1. 配置持久化缓存，以便在后续构建中复用编译结果。

   2. ```JavaScript
      module.exports = {
        cache: {
          type: 'filesystem', // 使用文件系统缓存
          buildDependencies: {
            config: [__filename], // 当配置文件变化时，缓存失效
          },
        },
      };
      ```

7. Bundle 分析

   1. 使用 `webpack-bundle-analyzer` 插件可视化和分析打包结果，帮助发现和解决性能瓶颈。

   2. ```JavaScript
      const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
      
      module.exports = {
        plugins: [
          new BundleAnalyzerPlugin(),
        ],
      };
      ```

8. 懒加载和按需加载

   1. 使用动态 `import()` 语法实现懒加载和按需加载模块，优化首次加载时间。

   2. ```JavaScript
      // 在你的代码中
      import(/* webpackChunkName: "my-chunk-name" */ './myModule').then(module => {
        // 使用模块
      });
      ```

9. 内联 CSS 和 JavaScript

   1. 在某些情况下，将关键 CSS 和 JavaScript 内联到 HTML 中可以减少 HTTP 请求次数，提高加载速度。

   2. ```JavaScript
      const HtmlWebpackPlugin = require('html-webpack-plugin');
      
      module.exports = {
        plugins: [
          new HtmlWebpackPlugin({
            template: './src/index.html',
            minify: {
              collapseWhitespace: true,
              removeComments: true,
              removeRedundantAttributes: true,
              removeScriptTypeAttributes: true,
              removeStyleLinkTypeAttributes: true,
              useShortDoctype: true,
            },
            inject: 'body',
          }),
        ],
      };
      ```

Webpack原理详细解析

目前各大AI 编辑器的订阅价格都比较高，想使用更强的claude模型，只能每个月花费大量订阅费使用。

但是对于大学生来讲，可以使用Github学生包，使用copilot，包括其中的高级模型



copilot包括的模型如下

```
- gpt-4.1
- gpt-5-mini
- gpt-5
- gpt-3.5-turbo
- gpt-3.5-turbo-0613
- gpt-4o-mini
- gpt-4o-mini-2024-07-18
- gpt-4
- gpt-4-0613
- gpt-4-0125-preview
- gpt-4o
- gpt-4o-2024-11-20
- gpt-4o-2024-05-13
- gpt-4-o-preview
- gpt-4o-2024-08-06
- o3-mini
- o3-mini-2025-01-31
- o3-mini-paygo
- gpt-41-copilot
- grok-code-fast-1
- text-embedding-ada-002
- text-embedding-3-small
- text-embedding-3-small-inference
- claude-3.5-sonnet
- claude-3.7-sonnet
- claude-3.7-sonnet-thought
- claude-sonnet-4
- gemini-2.0-flash-001
- gemini-2.5-pro
- o4-mini
- o4-mini-2025-04-16
- gpt-4.1-2025-04-14
```



虽然VSCode copilot在几次更新之后，已经比较好用了，但是如果我们还行在其他软件或者IDE中使用，则可以考虑以下方案

https://github.com/ericc-ch/copilot-api?tab=readme-ov-file

这个项目将copilot转换为本地API服务，可以方便的接入各种软件或AI编辑器

> 这类项目可能触发 Github 安全检查
>
> 过度自动化或脚本化使用 Copilot（包括快速或批量请求，例如通过自动化工具）可能会触发 GitHub 的滥用检测系统。
> 您可能会收到 GitHub Security 的警告，进一步的异常活动可能导致您的 Copilot 访问被临时暂停。
>
> GitHub 禁止使用其服务器进行过度的自动化批量活动或任何对基础设施造成不当负担的活动。
>
> 请审阅：
>
> - [GitHub 可接受使用政策](https://docs.github.com/site-policy/acceptable-use-policies/github-acceptable-use-policies#4-spam-and-inauthentic-activity-on-github)
> - [GitHub Copilot 条款](https://docs.github.com/site-policy/github-terms/github-terms-for-additional-products-and-features#github-copilot)
>
> 负责任地使用此代理以避免账户限制。

此类项目的原理为模拟登录，获取copilot token，然后使用token鉴权后进行交互

> 比如https://cocopilot.org/copilot/token，就可以模拟设备登录，并拿到token
>
> ![image-20250902201433463](https://picgo-img-repo.oss-cn-beijing.aliyuncs.com/img/4f0d39e9a4048bcb7c1ac0125cf1447a.png)
>
> copilot-api项目支持在一键登录，并拿到token，无需我们手动操作

项目支持以下运行方式

- Docker
- npx

我们使用npx的方式运行，它更加方便且快捷，同时设置请求间隔时间为30s，防止触发安全检查

```
npx copilot-api@latest start --rate-limit 30
```

![image-20250902203658557](https://picgo-img-repo.oss-cn-beijing.aliyuncs.com/img/dc22730344e92a154fa764b40e0b32dd.png)

登录完成后，连接localhost:4141服务，即可使用copilot api

我这里以raycast为例，他可以接入自定义 api，创建好对应的providers即可

![image-20250902203916244](https://picgo-img-repo.oss-cn-beijing.aliyuncs.com/img/c377f1afdaf68f026b3b1f384db6d836.png)

raycast可以便捷的使用各种工具，唤出raycast的窗口，直接输入问题就可以和AI对话，在一些需要快速查询的场景下，这个还是非常实用的，其他专用场景，则可以使用对应的客户端如cherry studio、cline等等

![image-20250902204116928](https://picgo-img-repo.oss-cn-beijing.aliyuncs.com/img/521945d6722d295b399e50e4685630b8.png)

使用命令直接运行还要留一个终端在后台，可以设置命令后台运行，不需要保留终端

使用pm2管理进程，无需保留后台，需要提前安装pm2

```
   pm2 start "npx copilot-api@latest start --rate-limit 30" --name copilot-api
```

将你的Copilot转为OpenAI兼容服务

Vite 是一种现代化的前端开发构建工具，旨在优化开发体验和构建性能。



- 参考资料
  - https://cn.vite.dev/
- 特点
  - 快速启动
  - 即使热更新
  - Bundleless
  - 按需编译
  - 双打包器 ESBuild、Rolup
  - 无需Loader，Vite内置了对一些文件默认的处理，同时支持使用插件拓展

## 为什么Vite很快

Vite在优化开发启动速度方面，使用了以下手段

1. 使用**ESBuild**作为开发打包器，ESBuild使用Go语言开发，有效利用CPU性能进行编译
2. Vite使用了**预构建**机制，在启动项目时，会对第三方模块进行预构建，并将构建结果缓存下来，避免重复构建
3. **按需加载**，Vite只会在浏览器请求到某个模块时，才对模块进行转换，比如Vue项目中访问一个新的页面，加载一个Vue文件时，Vite会对Vue文件进行简单编译，将其转为ES模块后返回
4. **HTTP2多路复用**，Vite的按需加载在某些请求下，可能会导致模块过于零碎，导致请求次数非常多，利用HTTP2的多路复用技术，同一个TCP链接可以处理多个请求，浏览器并发请求数量大大提升，可以提高请求模块的速度

## 为什么Vite使用ESBuild和Rollup双打包器

- ESBuild
  - 性能：使用Go语言编写，并且利用了多核CPU，并发编译代码，同时编译算法经过高度优化，效率极高。
  - 缺陷：ESBuild默认只能处理JS和TS语言，并且插件生态并不像其他打包器一样丰富，同时打包产物的稳定性存疑。
- Rollup
  - 优势：Rollup是一个轻量的打包器，相比于Webpack的臃肿，Rollup更适合中小项目的打包，同时Rollup的插件生态和稳定性虽不如Webpack，但比ESBuild更好。
  - 缺点：构建性能略低
- 因此综合速度和功能性的考虑，Vite选择了在开发环境使用ESBuild，在生产环境使用Rollup

## Bundleless

“Bundleless” 是一种新兴的前端开发趋势，它的核心思想是减少或完全去除传统的打包（bundling）步骤，直接利用浏览器对现代 JavaScript 特性（尤其是 ES 模块）的原生支持。

- 传统Bundle的问题
  - 传统打包工具，将多个模块和资源打包成一个或多个文件。为了解决早期浏览器无法直接处理模块化代码的问题。但是项目代码数量增加后，对于开发来说，每次启动都需要完整编译代码，时间很长，影响开发效率
- Bundleless原理
  - 利用现代浏览器支持加载ESM的特性，Bundleless打包器使用**按需编译**的方式，只将需要的模块进行简单编译转换，并响应给浏览器。
  - 同时还利用了HTTP/2多路复用的特性，在加载细碎模块时，有更好的速度

## 构建过程

### 开发构建

![img](https://picgo-img-repo.oss-cn-beijing.aliyuncs.com/img/6be7d033054f22d5df113e21fd880c1d.png)

1. 启动基于Node.js `http`模块的服务器
2. 加载配置文件，初始化插件
3. 处理浏览器请求，预构建代码，或使用缓存
4. 编译浏览器请求的模块，将其转换为浏览器可以识别的代码，并返回
5. 监听文件变化，触发HMR，并通知浏览器更新

### 生产构建流程

![img](https://picgo-img-repo.oss-cn-beijing.aliyuncs.com/img/21a1461433929b1e62c42f2c53a0965c.png)

1. 加载配置文件，初始化插件
2. 分析依赖，构建依赖图
3. 调用插件处理中间代码Chunks
4. 进行Tree Shaking和代码分割
5. 输出文件

Vite为什么快？

> 深入理解 this 关键字，以及其背后的相关概念


# 参考资料

- 《你不知道的JavaScript》- this全面解析

# this 是什么

- this 是一个代词，代指一个对象
- this 提供了一种更优雅的方式来隐式的传递一个对象引用，可以让代码更加简洁易于复用

# 调用位置

调用位置就是**函数在代码中被调用的位置**（而**不是声明的位置**）。调用位置决定了 this 的绑定

比如下面代码：

```js
function baz() {
	// 当前调用栈是：baz
	// 因此，当前调用位置是全局作用域
	console.log("baz");
	bar(); // <-- bar 的调用位置
}
function bar() {
	// 当前调用栈是 baz -> bar
	// 因此，当前调用位置在 baz 中
	console.log("bar");
	foo(); // <-- foo 的调用位置
}
function foo() {
	// 当前调用栈是 baz -> bar -> foo // 因此，当前调用位置在 bar 中
	console.log("foo");
}
baz(); // <-- baz 的调用位置
```

> 可以使用浏览器的开发工具查看调用栈

| ![](https://picgo-img-repo.oss-cn-beijing.aliyuncs.com/img/fc8a67d540079b40315bebb913592d62.png)<br> | ![](https://picgo-img-repo.oss-cn-beijing.aliyuncs.com/img/3d5a26abf779ed1253d5e45ec6522846.png)<br> | ![](https://picgo-img-repo.oss-cn-beijing.aliyuncs.com/img/a045e74dc2970c0f3f72a587ede44155.png)<br> |
| ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |

# this的绑定规则

this的指向有以下四条特性/规则

- 默认绑定
- 隐式绑定
- 显式绑定
- new 绑定

## 默认绑定

当函数被**独立调用**时，函数的 this 指向 window

> 独立调用就是像这样：`foo()` 的调用

比如 

```js
function foo() {
	console.log(this.a);
}
var a = 2;
foo(); // 2
```

如果使用**严格模式**（strict mode），那么全局对象将无法使用默认绑定，因此 this 会绑定到 `undefined`
## 隐式绑定

当函数引用有上下文对象 且被该对象调用时，**隐式绑定规则会把函数调用中的 this 绑定到这个上下文对象**

```js
function foo() {
	console.log(this.a);
}
var obj = {
  a: 2,
  foo: foo
};
obj.foo(); // 2
// 这里就是隐式绑定，foo函数的this绑定到了obj上
```

需要注意的是，**对象属性引用链中只有最顶层或者说最后一层会影响调用位置**

比如

```js
function foo() {
	console.log(this.a);
}
var obj2 = {
	a: 42,
	foo: foo,
};
var obj1 = {
	a: 2,
	obj2: obj2,
};
obj1.obj2.foo(); // 42
// 相当于 obj2.foo()，因为只有最后一层会影响调用位置
```

### 隐式丢失

**隐式绑定的函数可能会丢失绑定对象，也就是说它会应用默认绑定**

隐式丢失的几种情况：
1. 函数别名

```js
function foo() {
	console.log(this.a);
}
var obj = {
	a: 2,
	foo: foo,
};

// 注意这里的函数别名，会导致隐式绑定丢失，导致foo函数的this指向全局
var bar = obj.foo; // 函数别名！
var a = "oops, global"; // a 是全局对象的属性
bar(); // "oops, global"
```

2. 函数作为参数传入，并调用时

```js
function foo() {
	console.log(this.a);
}
function doFoo(fn) {
	// fn 其实引用的是 foo
	fn(); // <-- 调用位置！
}
var obj = {
	a: 2,
	foo: foo,
};
var a = "oops, global"; // a 是全局对象的属性
doFoo(obj.foo); // "oops, global"
```

> **参数传递其实就是一种隐式赋值**，因此我们传入函数时也会被隐式赋值，**所以结果和上一个例子一样**

## 显式绑定

- `fn.call(obj, x, x, ...)`  将fn函数的this指向obj，并调用，call的剩余参数是fn需要的参数

```javascript
function foo(aram) {
	console.log("foo", param.a); // foo 1

	function bar(x, y) {
		console.log("bar", this.a, x, y); // bar 1 2 3
	}
	bar.call(param, 2, 3);
}

foo({ a: 1 });
```

- `fn.apply(obj, [x, x, ...])`  将fn函数的this指向obj，并调用，apply的第二个参数是一个数组

```javascript
function foo(param) {
	console.log("foo", param.a); // foo 1

	function bar(x, y) {
		console.log("bar", this.a, x, y); // bar 1 2 3
	}
	bar.apply(param, [2, 3]);
}

foo({ a: 1 });
```

- `fn.bind(obj, x, x, ...)(x, x, ...)` 将fn函数的this指向obj，bind会返回一个新的函数，新的函数也可以传递参数

```javascript
function foo(param) {
	console.log("foo", param.a); // foo 1

	function bar(x, y) {
		console.log("bar", this.a, x, y); // bar 1 2 3
	}
	return bar.bind(param, 2);
}

const bar = foo({ a: 1 });
bar(3);
```



## new 绑定

**new 绑定** - this会绑定到新创建的对象上

```javascript
function Person(name, age) {
  // this 指向新创建的对象
  this.name = name;
  this.age = age;

  // 通过new调用构造函数时，this指向新创建的对象
	// 直接调用构造函数时，应用默认绑定规则，this指向全局或undefined
  console.log(this);
}

// 使用 new 关键字调用构造函数
const person1 = new Person("张三", 25);
console.log(person1.name); // "张三"
console.log(person1.age);  // 25

// 不使用 new 调用，this 会指向全局对象(非严格模式)或 undefined(严格模式)
const person2 = Person("李四", 30); // this 不会指向新对象
console.log(person2); // undefined (因为没有显式返回)
```

# 箭头函数

1. 箭头函数没有自己的 this 指向，它需要继承外层函数的this指向
2. 箭头函数即使是new也无法改变this指向，因此箭头函数不能用于编写构造函数

```js
var a = 1;
function foo() {
	var obj1 = {
		a: 2,
		bar: function () {
			console.log("bar", this.a);
			var obj2 = {
				a: 3,
				baz: () => {
					console.log("baz", this.a);
				},
			};
			// 箭头函数不会创建自己的 this，它会捕获外层函数的 this
			obj2.baz(); // baz 2
		},
	};
	console.log("foo", this.a);
	obj1.bar(); // bar 2
}
foo(); // foo 1
```



# 如何判断函数是否被new调用了？

按照上述 new 调用规则

- 构造函数的this指向新创建的对象
- 正常调用时this指向上下文对象

而我们又知道，新对象是由构造函数实例化的，对象隐式原型的`constuctor`就是构造函数

或者简单说，`新对象 instanceof 构造函数` 

也就是 `this instaceof 构造函数`

除了这种方法，ES6中引入了`new.target`也可以判断当前函数是否被`new`

```JavaScript
function Fn() {
  if (new.target) {
    console.log("new new.target 触发");
  }
  if (this instanceof Fn) {
    console.log("new instanceof 触发");
  } else {
    console.log("正常执行");
  }
}

Fn();
new Fn();
```



# 手写 call、apply、bind

改变this指向核心是使用**隐式绑定规则**，手写时主要思路是如何让函数调用时上下文为指定对象。

## call/apply

这里只写`call`的实现，`apply`只是传递参数的方式区别

```JavaScript
Function.prototype.myCall = function (obj, ...args) {
  // 指定上下文对象，如果没传的话，默认是全局对象
  const ctx = obj || globalThis;
  // 将 函数绑定到 上下文对象上，这样就可以使用隐式绑定规则
  // ctx.fn = this;
  // 或者可以使用 Symbol 生成一个独一无二的 key，防止干扰 原对象
  const key = Symbol("fn");
  ctx[key] = this;
  // 调用并记录返回值，后续需要删除上下文上的 fn
  // const res = ctx.fn(...args);
  const res = ctx[key](...args);
  // 删除 函数，防止干扰上下文对象
  // delete ctx.fn;
  delete ctx[key];
  return res;
};
```

## bind

bind返回一个新的函数，这个函数在以下特性上需要和原函数保持一致

- new行为和原函数一致
  - 新函数 返回new实例化的对象
  - 实例化对象隐式原型需要保留
- 正常调用行为一致
  - 返回结果和原函数一致

```JavaScript
Function.prototype.myBind = function (obj, ...args1) {
  // 使用闭包特性保留 this，也就是函数
  const fn = this;

  function wrap(...args2) {
    const isNew = this instanceof wrap;
    // 如果是new调用时，应该把this传给原函数，让原函数处理this，相当于构造函数中执行的赋值
    const ctx = isNew ? this : obj;

    return fn.apply(ctx, [...args1, ...args2]);
  }

  // 保持原型链
  if (fn.prototype) {
    wrap.prototype = Object.create(fn.prototype);
    wrap.prototype.constructor = wrap;
  }

  return wrap;
};
```