乐闻
RxJS 中常用的操作符有哪些？如何使用？## 常用操作符分类
### 1. 创建操作符 (Creation Operators)
#### of
创建一个发出指定值的 Observable
```javascript
import { of } from 'rxjs';
of(1, 2, 3).subscribe(console.log);
// 输出: 1, 2, 3
```
#### from
将数组、Promise、Iterable 等转换为 Observable
```javascript
import { from } from 'rxjs';
from([1, 2, 3]).subscribe(conso...
前端 · 2月19日 18:53
如何在 Vercel 上配置自定义域名和 SSL 证书？## 如何在 Vercel 上配置自定义域名和 SSL 证书？
在 Vercel 上配置自定义域名和 SSL 证书是一个简单直接的过程，Vercel 提供了自动化的 SSL 证书管理，使得这一过程变得非常便捷。
### 自定义域名配置
#### 1. 添加自定义域名
**通过 Vercel Dashboard 添加**：
1. 登录 Vercel Dashboard
2. 选择你的项目
3. 进入 "Settings" → "Domains"
4. 点击 "Add Domain"
5. 输入你的域名（如 `example.com` 或 `www.example.com`）
6....
服务端 · 2月19日 20:01
如何在 Vercel 上实现多环境部署（开发、测试、生产）？## 如何在 Vercel 上实现多环境部署（开发、测试、生产）？
在 Vercel 上实现多环境部署是现代软件开发的重要实践，它允许开发者在不同的环境中测试和部署代码，确保代码质量和稳定性。以下是详细的实现指南。
### Vercel 环境概念
#### 1. 三种主要环境
**Production（生产环境）**：
- 部署到主域名
- 使用生产数据库和 API
- URL: `https://your-project.vercel.app` 或自定义域名
- 触发条件：合并到主分支
**Preview（预览环境）**：
- 为每个分支或 PR 生成唯一 URL
- 使用测...
服务端 · 2月19日 20:12
如何优化 Vercel 应用的性能？## 如何优化 Vercel 应用的性能？
优化 Vercel 应用的性能是一个多方面的任务，涉及前端构建、资源加载、服务器端渲染、缓存策略等多个层面。以下是从不同角度优化 Vercel 应用性能的详细指南。
### 构建优化
#### 1. 代码分割
**自动代码分割**：
Next.js 和现代前端框架会自动进行代码分割，但你可以进一步优化：
```javascript
// 动态导入组件
const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
loading: () => <Loading...
服务端 · 2月19日 20:04
如何在 Vercel 上实现 CI/CD 流程？## 如何在 Vercel 上实现 CI/CD 流程？
Vercel 提供了强大的 CI/CD（持续集成/持续部署）功能，使开发者能够自动化构建、测试和部署流程。以下是实现 Vercel CI/CD 流程的详细指南。
### Vercel CI/CD 基础
#### 1. 自动化部署
Vercel 通过 Git 集成实现自动化部署：
**支持的 Git 提供商**：
- GitHub
- GitLab
- Bitbucket
**部署触发条件**：
- 推送代码到仓库
- 创建 Pull Request
- 合并 Pull Request 到主分支
- 推送标签
#### ...
服务端 · 2月19日 20:09
如何在 RxJS 中防止内存泄漏？## 内存泄漏的原因
在 RxJS 中，内存泄漏主要发生在以下几种情况：
### 1. 未取消订阅
最常见的内存泄漏原因是订阅了 Observable 但没有取消订阅。
```javascript
// ❌ 错误示例：内存泄漏
class MyComponent {
constructor() {
this.data$ = http.get('/api/data').subscribe(data => {
console.log(data);
});
}
}
// 组件销毁时，订阅仍然存在，导致内存泄漏
```
### 2. 长期运行的 Ob...
前端 · 2月19日 18:54
whistle 如何支持 WebSocket 代理和调试？## 答案
Whistle 提供了 WebSocket 代理功能，可以捕获、调试和修改 WebSocket 连接和消息。
### WebSocket 代理基础
#### 1. 基本 WebSocket 代理
**配置规则：**
```
ws://example.com host 127.0.0.1:8080
wss://example.com host 127.0.0.1:8080
```
**或者使用 forward 操作符：**
```
ws://example.com forward ws://127.0.0.1:8080
wss://example.com forwar...
前端 · 2月19日 16:35
whistle 在实际开发中有哪些应用场景和实战技巧？## 答案
Whistle 在实际开发中有许多实用的应用场景，可以大大提高开发效率和问题排查能力。
### 常见应用场景
#### 1. 本地开发调试
**场景描述：**
前端开发时需要调用后端接口，但后端服务在本地运行，需要将线上域名指向本地服务。
**解决方案：**
```
# 将线上域名指向本地服务
www.example.com host 127.0.0.1:3000
api.example.com host 127.0.0.1:3001
# 或者使用 forward 操作符
www.example.com forward http://127.0.0.1:3000
...
前端 · 2月19日 16:34
whistle 常见问题有哪些，如何排查和解决？## 答案
Whistle 在实际使用中可能会遇到各种问题，了解常见问题及其解决方法可以提高工作效率。
### 安装和启动问题
#### 1. 安装失败
**问题：**
```bash
npm install -g whistle
# 报错：EACCES: permission denied
```
**解决方法：**
**方法一：使用 sudo（Mac/Linux）**
```bash
sudo npm install -g whistle
```
**方法二：修改 npm 目录权限**
```bash
sudo chown -R $(whoami) ~/.npm
sud...
前端 · 2月19日 16:40
whistle 和 Charles 有什么区别，如何选择使用？## 答案
Whistle 和 Charles 都是常用的网络调试代理工具，但它们在设计理念、功能特性和使用场景上有所不同。
### 核心差异对比
| 特性 | Whistle | Charles |
|------|---------|---------|
| 开源性质 | 完全开源免费 | 商业软件（有免费版） |
| 开发语言 | Node.js | Java |
| 配置方式 | 规则配置，更灵活 | 图形界面，更直观 |
| 插件系统 | 支持插件扩展 | 支持扩展 |
| 跨平台 | 完美支持 Windows/Mac/Linux | 主要支持 Windows/Mac |...
前端 · 2月19日 16:31