FileRelay/webapp/doc/BUILD_OPTIMIZATION.md

生产构建优化说明

已实现的优化

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 压缩大小报告

构建命令

# 生产构建（代码混淆压缩）
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 更好）