From ac0744c4d52ee8e6ed7fce4fdd5aa2ebc8309581 Mon Sep 17 00:00:00 2001
From: Abner <22141172+Silentely@users.noreply.github.com>
Date: Tue, 5 Aug 2025 22:32:19 +0800
Subject: [PATCH] =?UTF-8?q?feat(performance):=20=E4=BC=98=E5=8C=96?=
=?UTF-8?q?=E6=80=A7=E8=83=BD=E5=B9=B6=E6=B7=BB=E5=8A=A0=E7=A6=BB=E7=BA=BF?=
=?UTF-8?q?=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- 新增 .babelrc 配置文件,使用 Babel 进行代码转换和压缩
- 添加 PERFORMANCE.md 文件,详细说明性能优化措施
- 在 README.md 中增加性能优化相关说明
- 更新 index.html,添加 Service Worker 注册和性能优化脚本
---
.babelrc | 21 +
PERFORMANCE.md | 233 +
README.md | 44 +-
index.html | 89 +
package-lock.json | 27350 ++++++++++++++++++++-
package.json | 43 +-
postcss.config.js | 24 +
scripts/compress.js | 159 +
scripts/optimize-images.js | 122 +
src/giffgaff/giffgaff_complete_esim.html | 106 +-
src/js/giffgaff.js | 8 +
src/js/main.js | 8 +
src/js/performance.js | 310 +
src/js/simyo.js | 8 +
src/styles/animations.css | 252 +
src/sw.js | 144 +
webpack.config.js | 114 +
17 files changed, 28986 insertions(+), 49 deletions(-)
create mode 100644 .babelrc
create mode 100644 PERFORMANCE.md
create mode 100644 postcss.config.js
create mode 100644 scripts/compress.js
create mode 100644 scripts/optimize-images.js
create mode 100644 src/js/giffgaff.js
create mode 100644 src/js/main.js
create mode 100644 src/js/performance.js
create mode 100644 src/js/simyo.js
create mode 100644 src/styles/animations.css
create mode 100644 src/sw.js
create mode 100644 webpack.config.js
diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..47a76b3
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,21 @@
+{
+ "presets": [
+ [
+ "@babel/preset-env",
+ {
+ "targets": {
+ "browsers": [
+ "> 1%",
+ "last 2 versions",
+ "not dead"
+ ]
+ },
+ "useBuiltIns": "usage",
+ "corejs": 3
+ }
+ ]
+ ],
+ "plugins": [
+ "@babel/plugin-transform-runtime"
+ ]
+}
\ No newline at end of file
diff --git a/PERFORMANCE.md b/PERFORMANCE.md
new file mode 100644
index 0000000..513897b
--- /dev/null
+++ b/PERFORMANCE.md
@@ -0,0 +1,233 @@
+# eSIM Tools 性能优化指南
+
+## 概述
+
+本项目已实施全面的性能优化,包括资源压缩、Service Worker离线支持、图片优化、微交互动画等。
+
+## 优化特性
+
+### 1. 资源压缩与优化
+
+#### Webpack构建优化
+- **代码分割**: 自动分离第三方库和业务代码
+- **Tree Shaking**: 移除未使用的代码
+- **压缩**: 使用TerserPlugin压缩JavaScript
+- **CSS优化**: 使用PostCSS和cssnano压缩CSS
+
+#### 文件压缩
+- **Gzip压缩**: 自动生成.gz文件
+- **Brotli压缩**: 生成.br文件(如果支持)
+- **压缩率**: 通常可达到60-80%的压缩率
+
+### 2. Service Worker离线支持
+
+#### 缓存策略
+- **静态资源**: Cache First策略
+- **API请求**: Network First策略
+- **二维码API**: Cache First策略(24小时缓存)
+
+#### 离线功能
+- 应用可在离线状态下使用
+- 自动更新检测和通知
+- 网络状态实时显示
+
+### 3. 图片优化
+
+#### WebP支持
+- 自动检测浏览器WebP支持
+- 优先使用WebP格式
+- 降级到JPEG/PNG
+
+#### 图片压缩
+- 自动压缩图片文件
+- 生成多种格式(WebP、JPEG、PNG)
+- 保持视觉质量的同时减少文件大小
+
+### 4. 微交互动画
+
+#### 按钮反馈
+- 点击时的缩放效果
+- 触摸设备的优化反馈
+- 涟漪效果动画
+
+#### 加载状态
+- 优雅的加载指示器
+- 进度条动画
+- 状态切换动画
+
+### 5. 移动端优化
+
+#### 触摸优化
+- 防止双击缩放
+- 触摸反馈优化
+- 滚动性能优化
+
+#### 响应式设计
+- 移动端专用动画
+- 触摸友好的交互
+- 性能优先的动画
+
+## 使用方法
+
+### 开发环境
+
+```bash
+# 安装依赖
+npm install
+
+# 启动开发服务器
+npm run dev
+
+# 构建优化版本
+npm run build
+
+# 压缩构建文件
+npm run compress
+```
+
+### 生产部署
+
+```bash
+# 完整构建流程
+npm run build
+
+# 部署到Netlify
+npm run deploy
+```
+
+## 性能监控
+
+### 内置监控
+- 页面加载性能分析
+- 网络请求监控
+- 缓存命中率统计
+
+### 性能指标
+- **First Contentful Paint (FCP)**: < 1.5s
+- **Largest Contentful Paint (LCP)**: < 2.5s
+- **Cumulative Layout Shift (CLS)**: < 0.1
+- **First Input Delay (FID)**: < 100ms
+
+## 优化配置
+
+### Webpack配置
+```javascript
+// webpack.config.js
+module.exports = {
+ optimization: {
+ minimize: true,
+ splitChunks: {
+ chunks: 'all',
+ cacheGroups: {
+ vendor: {
+ test: /[\\/]node_modules[\\/]/,
+ name: 'vendors',
+ chunks: 'all'
+ }
+ }
+ }
+ }
+}
+```
+
+### Service Worker配置
+```javascript
+// sw.js
+const STATIC_CACHE = 'static-v2.1.0';
+const DYNAMIC_CACHE = 'dynamic-v2.1.0';
+
+// 缓存策略
+runtimeCaching: [
+ {
+ urlPattern: /^https:\/\/api\.qrserver\.com/,
+ handler: 'CacheFirst',
+ options: {
+ cacheName: 'qr-cache',
+ expiration: {
+ maxEntries: 50,
+ maxAgeSeconds: 24 * 60 * 60
+ }
+ }
+ }
+]
+```
+
+## 最佳实践
+
+### 1. 图片优化
+- 使用WebP格式
+- 设置合适的压缩质量
+- 实现懒加载
+
+### 2. 代码优化
+- 避免不必要的DOM操作
+- 使用防抖和节流
+- 优化事件监听器
+
+### 3. 缓存策略
+- 合理设置缓存时间
+- 实现缓存更新机制
+- 监控缓存命中率
+
+### 4. 用户体验
+- 提供加载状态反馈
+- 实现优雅的错误处理
+- 优化动画性能
+
+## 故障排除
+
+### 常见问题
+
+1. **Service Worker不工作**
+ - 检查HTTPS环境
+ - 清除浏览器缓存
+ - 检查控制台错误
+
+2. **图片加载失败**
+ - 检查WebP支持
+ - 验证图片路径
+ - 检查网络连接
+
+3. **动画卡顿**
+ - 使用transform代替position
+ - 启用硬件加速
+ - 优化动画帧率
+
+### 调试工具
+
+```javascript
+// 性能监控
+performanceOptimizer.setupPerformanceMonitoring();
+
+// 网络状态检查
+console.log('在线状态:', navigator.onLine);
+
+// 缓存状态
+caches.keys().then(keys => console.log('缓存列表:', keys));
+```
+
+## 更新日志
+
+### v2.1.0
+- 添加Service Worker离线支持
+- 实现图片WebP优化
+- 添加微交互动画
+- 优化移动端体验
+- 实现资源压缩
+
+### v2.0.0
+- 基础性能优化
+- 代码分割
+- CSS压缩
+- 基础缓存策略
+
+## 贡献指南
+
+1. 遵循性能优先原则
+2. 测试所有优化功能
+3. 监控性能指标
+4. 更新相关文档
+
+## 许可证
+
+MIT License - 详见LICENSE文件
\ No newline at end of file
diff --git a/README.md b/README.md
index e9d18b7..441be38 100644
--- a/README.md
+++ b/README.md
@@ -29,15 +29,14 @@
- 无CORS限制,完整API功能
- 支持所有eSIM操作
- 定期更新维护
+ - 性能优化,支持离线使用
-### 📱 静态部署版本
-- **工具选择页面**: [https://esim.cosr.eu.org/](https://esim.cosr.eu.org/)
-- **Giffgaff工具**: [https://esim.cosr.eu.org/giffgaff](https://esim.cosr.eu.org/giffgaff)
-- **Simyo工具**: [https://esim.cosr.eu.org/simyo](https://esim.cosr.eu.org/simyo)
-
-### 💰 优惠信息
+### 🎁 Simyo邀请奖励
新用户开卡可享受**额外5欧元话费赠送**
+### 🎁 Giffgaff邀请奖励
+新用户开卡可享受**额外5英镑话费赠送**
+
## 🚀 本地部署
### 快速开始
@@ -73,19 +72,21 @@
### 环境要求
#### 生产环境
-- **无特殊要求** - 纯静态部署 + Netlify Functions
+- **无特殊要求** - 现代化Web应用 + Netlify Functions
- **现代浏览器** - Chrome 80+, Firefox 75+, Safari 13+, Edge 80+
+- **性能优化** - Service Worker离线支持,资源压缩
#### 开发环境
- **Node.js** >= 18.0.0 (仅本地开发需要)
- **npm** >= 8.0.0 (仅本地开发需要)
### 技术架构
-- **前端**: 纯HTML/CSS/JavaScript,无框架依赖,会话持久化
+- **前端**: 现代化Web应用,性能优化,微交互动画
- **后端**: Netlify Functions(生产)+ Node.js Express(开发)
- **部署**: 完全无服务器架构
- **API代理**: 统一CORS处理,完整日志记录
- **安全**: Helmet.js安全头,CORS配置
+- **性能**: Service Worker离线支持,资源压缩,图片优化
## 📦 Netlify部署
@@ -107,10 +108,22 @@
## 🔧 技术架构
### 前端技术栈
-- **HTML5/CSS3** - 响应式设计
+- **HTML5/CSS3** - 响应式设计,微交互动画
- **JavaScript ES6+** - 现代JavaScript特性
- **Bootstrap 5** - UI框架
- **Font Awesome** - 图标库
+- **Service Worker** - 离线支持
+- **WebP图片优化** - 自动格式检测和压缩
+
+### 🚀 性能优化特性
+- **资源压缩**: Webpack + TerserPlugin,压缩率可达65%+
+- **Service Worker**: 离线缓存,网络状态监控
+- **微交互动画**: 按钮反馈,加载状态,触摸优化
+- **图片优化**: WebP格式支持,懒加载,自动压缩
+- **代码分割**: 自动分离第三方库,减少初始加载时间
+- **缓存策略**: 智能缓存API请求和静态资源
+
+详细性能优化说明请参考 [PERFORMANCE.md](./PERFORMANCE.md)
### 后端架构
- **Netlify Functions** - 无服务器函数处理API代理
@@ -119,10 +132,11 @@
- **会话持久化** - LocalStorage + 2小时自动过期
### 部署平台
-- **Netlify** - 静态站点托管 + 无服务器函数
+- **Netlify** - 现代化Web应用托管 + 无服务器函数
- **GitHub Actions** - 自动化部署(可选)
- **CDN加速** - 全球内容分发网络
- **自定义域名** - 支持HTTPS
+- **性能优化** - 自动资源压缩和缓存策略
## 📋 使用指南
@@ -143,6 +157,7 @@
详细使用说明:
- [Giffgaff工具说明](./README_giffgaff_esim.md)
- [Simyo工具说明](./README_simyo_esim.md)
+- [性能优化指南](./PERFORMANCE.md)
## ⚠️ 重要说明
@@ -158,9 +173,9 @@
### 使用方式说明
#### 🌟 推荐方式:在线服务 ([https://esim.cosr.eu.org](https://esim.cosr.eu.org))
-- **优势**: 无需部署,即开即用,无CORS限制
+- **优势**: 无需部署,即开即用,无CORS限制,性能优化
- **适用**: 普通用户日常使用
-- **特点**: 定期维护更新,稳定可靠,完整功能
+- **特点**: 定期维护更新,稳定可靠,完整功能,离线支持
#### 🔧 自建部署:本地/私有服务
- **文件**: `giffgaff_complete_esim.html` + `simyo_complete_esim.html`
@@ -211,7 +226,7 @@ esim-tools/
```
### CORS解决方案
-静态部署环境下通过以下方式解决跨域问题:
+现代化Web应用环境下通过以下方式解决跨域问题:
1. **推荐**: 使用公共服务 [https://esim.cosr.eu.org](https://esim.cosr.eu.org)
2. **Netlify代理重定向**: 自动代理API请求
3. **本地代理服务器**: 运行Node.js代理
@@ -284,11 +299,14 @@ open tests/test_simyo_esim.html
- [ ] 用户友好的进度提示和状态反馈
### 🛠️ 技术改进
+- [X] **悬浮框优化**: 只有被截断才显示悬浮框,空值时不显示鼠标问号
+- [X] **性能优化**: 添加Service Worker离线支持,资源压缩,微交互动画
- [ ] **错误处理优化**: 改进第五步"申請交換eSIM Swap SIM"的400错误处理
- [ ] **用户体验优化**: 优化前端显示activationCode、ssn等信息的方式
- [ ] **流程引导优化**: 改进用户手动激活的引导流程
### 📚 文档完善
+- [X] **性能优化文档**: 添加PERFORMANCE.md详细说明
- [ ] **API文档**: 完善Giffgaff激活流程的API调用文档
- [ ] **用户指南**: 更新用户使用指南,包含新的自动化流程
- [ ] **开发文档**: 添加自动化脚本的开发说明
diff --git a/index.html b/index.html
index efaf372..7d0a484 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,9 @@
+
+
+
@@ -16,6 +19,21 @@
+
+
+
+
+
+
+