mirror of
https://git.fightbot.fun/hxuanyu/FileRelay.git
synced 2026-02-15 07:21:44 +08:00
68 lines
1.9 KiB
Markdown
68 lines
1.9 KiB
Markdown
# 生产构建优化说明
|
||
|
||
## 已实现的优化
|
||
|
||
### 1. 代码混淆和压缩
|
||
- 使用 **Terser** 进行代码压缩和混淆
|
||
- 移除所有 `console.log`、`console.info`、`console.debug` 语句
|
||
- 移除 `debugger` 语句
|
||
- 启用变量名混淆 (mangle)
|
||
- 移除所有注释
|
||
|
||
### 2. 文件合并
|
||
- 禁用代码分割 (`inlineDynamicImports: true`)
|
||
- 将所有 JavaScript 代码合并为 **单个 JS 文件**
|
||
- 将所有 CSS 代码合并为 **单个 CSS 文件**
|
||
|
||
### 3. 构建结果
|
||
生产构建后只会生成以下文件：
|
||
```
|
||
dist/
|
||
├── index.html (0.48 kB | gzip: 0.34 kB)
|
||
├── assets/
|
||
│ ├── css/
|
||
│ │ └── style-[hash].css (103.61 kB | gzip: 17.41 kB)
|
||
│ └── js/
|
||
│ └── index-[hash].js (535.46 kB | gzip: 155.91 kB)
|
||
```
|
||
|
||
### 4. 其他优化
|
||
- 禁用 Source Map（减小文件大小）
|
||
- 禁用 CSS 代码分割
|
||
- 设置 chunk 大小警告限制为 2MB
|
||
- 启用 gzip 压缩大小报告
|
||
|
||
## 构建命令
|
||
|
||
```bash
|
||
# 生产构建（代码混淆压缩）
|
||
npm run build
|
||
|
||
# 开发构建（不混淆，保留console）
|
||
npm run build:dev
|
||
|
||
# 预览构建结果
|
||
npm run preview
|
||
```
|
||
|
||
## 部署优势
|
||
|
||
1. **简化部署**：只需部署 3 个文件（index.html + 1个CSS + 1个JS）
|
||
2. **减少请求**：单个JS文件，减少HTTP请求次数
|
||
3. **代码保护**：代码混淆和压缩，增加逆向工程难度
|
||
4. **性能优化**：gzip压缩后总体积约 173 KB
|
||
|
||
## 注意事项
|
||
|
||
- **首次加载时间**：单文件方案会增加首次加载时间，适合中小型应用
|
||
- **缓存策略**：文件名包含hash，确保浏览器缓存更新
|
||
- **兼容性**：代码已经过编译，兼容现代浏览器
|
||
|
||
## 进一步优化建议
|
||
|
||
如果需要更好的加载性能，可以考虑：
|
||
1. 启用代码分割（移除 `inlineDynamicImports`）
|
||
2. 按需加载路由组件
|
||
3. 启用 CDN 加速
|
||
4. 服务端启用 Brotli 压缩（比 gzip 更好）
|