194 lines
5.8 KiB
Markdown
194 lines
5.8 KiB
Markdown
# راهنمای کاهش حجم اپلیکیشن Flutter
|
||
|
||
## چرا حجم اپ زیاد میشه؟
|
||
|
||
### 1. **Assets (تصاویر و آیکونها)**
|
||
- هر فایل تصویر/آیکون که از Figma اضافه میکنید، مستقیماً به حجم اپ اضافه میشه
|
||
- در حال حاضر شما **119 SVG** و **119 VEC** دارید (احتمالاً تکراری!)
|
||
- همه assets در `pubspec.yaml` به صورت کلی اضافه شدن (`assets/icons/`)
|
||
|
||
### 2. **کد Dart**
|
||
- خود کد Dart حجم کمی داره
|
||
- اما dependencies و packages حجم زیادی اضافه میکنن
|
||
- کدهای generate شده (freezed, json_serializable) هم حجم دارن
|
||
|
||
### 3. **مشکلات فعلی پروژه:**
|
||
- ✅ **تکرار assets**: هم SVG و هم VEC دارید
|
||
- ❌ **عدم بهینهسازی تصاویر**: PNG به جای WebP
|
||
- ❌ **شامل شدن همه assets**: حتی اونایی که استفاده نمیشن
|
||
|
||
---
|
||
|
||
## راهحلها
|
||
|
||
### ✅ 1. حذف Assets تکراری
|
||
|
||
**مشکل**: شما هم `assets/icons/*.svg` و هم `assets/vec/*.svg.vec` دارید
|
||
|
||
**راهحل**:
|
||
- اگر از VEC استفاده میکنید، SVG ها رو حذف کنید
|
||
- یا برعکس، اگر SVG استفاده میکنید، VEC ها رو حذف کنید
|
||
|
||
### ✅ 2. بهینهسازی تصاویر
|
||
|
||
**قبل از اضافه کردن از Figma:**
|
||
1. تصاویر رو به **WebP** تبدیل کنید (حجم 30-50% کمتر)
|
||
2. از ابزارهای فشردهسازی استفاده کنید:
|
||
- [TinyPNG](https://tinypng.com/) برای PNG
|
||
- [Squoosh](https://squoosh.app/) برای همه فرمتها
|
||
|
||
**تبدیل PNG به WebP:**
|
||
```bash
|
||
# نصب cwebp (Google WebP tools)
|
||
# سپس:
|
||
cwebp -q 80 input.png -o output.webp
|
||
```
|
||
|
||
### ✅ 3. حذف Assets استفاده نشده
|
||
|
||
**استفاده از ابزار:**
|
||
```bash
|
||
# نصب flutter_unused_assets
|
||
dart pub global activate flutter_unused_assets
|
||
|
||
# بررسی assets استفاده نشده
|
||
flutter_unused_assets
|
||
```
|
||
|
||
### ✅ 4. بهینهسازی pubspec.yaml
|
||
|
||
**به جای:**
|
||
```yaml
|
||
assets:
|
||
- assets/icons/ # همه فایلها
|
||
- assets/images/
|
||
```
|
||
|
||
**استفاده کنید:**
|
||
```yaml
|
||
assets:
|
||
- assets/icons/add.svg # فقط فایلهای استفاده شده
|
||
- assets/icons/home.svg
|
||
- assets/images/inner_splash.webp
|
||
```
|
||
|
||
### ✅ 5. استفاده از Asset Variants
|
||
|
||
برای تصاویر بزرگ، از variants استفاده کنید:
|
||
```
|
||
assets/images/
|
||
splash.png # برای density 1.0
|
||
2.0x/splash.png # برای density 2.0
|
||
3.0x/splash.png # برای density 3.0
|
||
```
|
||
|
||
### ✅ 6. Lazy Loading برای Assets بزرگ
|
||
|
||
برای تصاویر بزرگ که همیشه استفاده نمیشن:
|
||
```dart
|
||
// به جای Image.asset
|
||
FutureBuilder(
|
||
future: rootBundle.load('assets/images/large_image.webp'),
|
||
builder: (context, snapshot) {
|
||
if (snapshot.hasData) {
|
||
return Image.memory(snapshot.data!);
|
||
}
|
||
return CircularProgressIndicator();
|
||
},
|
||
)
|
||
```
|
||
|
||
### ✅ 7. بهینهسازی Build
|
||
|
||
در `android/app/build.gradle.kts` شما این تنظیمات رو دارید (خوبه!):
|
||
```kotlin
|
||
isMinifyEnabled = true
|
||
isShrinkResources = true
|
||
```
|
||
|
||
اما میتونید اضافه کنید:
|
||
```kotlin
|
||
buildTypes {
|
||
release {
|
||
// ...
|
||
// اضافه کردن این خط:
|
||
isDebuggable = false
|
||
}
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## چکلیست قبل از اضافه کردن Asset از Figma
|
||
|
||
- [ ] آیا این asset قبلاً وجود داره؟
|
||
- [ ] آیا واقعاً نیاز به این asset دارم؟
|
||
- [ ] آیا میتونم از asset موجود استفاده کنم؟
|
||
- [ ] آیا تصویر رو به WebP تبدیل کردم؟
|
||
- [ ] آیا تصویر رو فشرده کردم؟
|
||
- [ ] آیا فقط فایلهای لازم رو به pubspec.yaml اضافه کردم؟
|
||
|
||
---
|
||
|
||
## ابزارهای مفید
|
||
|
||
1. **بررسی حجم اپ:**
|
||
```bash
|
||
flutter build apk --analyze-size
|
||
```
|
||
|
||
2. **بررسی Assets استفاده نشده:**
|
||
```bash
|
||
flutter_unused_assets
|
||
```
|
||
|
||
3. **فشردهسازی تصاویر:**
|
||
- [TinyPNG](https://tinypng.com/)
|
||
- [Squoosh](https://squoosh.app/)
|
||
- [ImageOptim](https://imageoptim.com/)
|
||
|
||
4. **تبدیل فرمت:**
|
||
- PNG → WebP: [CloudConvert](https://cloudconvert.com/)
|
||
- SVG → Optimized SVG: [SVGOMG](https://jakearchibald.github.io/svgomg/)
|
||
|
||
---
|
||
|
||
## نکات مهم
|
||
|
||
1. **همیشه از WebP استفاده کنید** به جای PNG/JPG (حجم 30-50% کمتر)
|
||
2. **SVG ها رو optimize کنید** قبل از اضافه کردن
|
||
3. **Assets استفاده نشده رو حذف کنید** به صورت منظم
|
||
4. **از Asset Variants استفاده کنید** برای تصاویر با resolution بالا
|
||
5. **Build Release رو بررسی کنید** نه Debug (Debug حجم بیشتری داره)
|
||
|
||
---
|
||
|
||
## مثال: کاهش حجم
|
||
|
||
**قبل:**
|
||
- 119 SVG × 10KB = ~1.2 MB
|
||
- 119 VEC × 8KB = ~950 KB
|
||
- **جمع: ~2.15 MB فقط برای آیکونها!**
|
||
|
||
**بعد از بهینهسازی:**
|
||
- حذف تکرار: فقط 119 فایل = ~1 MB
|
||
- بهینهسازی SVG: ~500 KB
|
||
- **صرفهجویی: ~1.65 MB!**
|
||
|
||
---
|
||
|
||
## سوالات متداول
|
||
|
||
**Q: چرا با اضافه کردن 50 صفحه Dart حجم زیاد میشه؟**
|
||
A: خود کد Dart حجم کمی داره، اما:
|
||
- Dependencies جدید اضافه میشن
|
||
- Assets جدید برای صفحات اضافه میشن
|
||
- Build artifacts بیشتر میشن
|
||
|
||
**Q: آیا باید همه assets رو حذف کنم؟**
|
||
A: نه! فقط اونایی که استفاده نمیشن رو حذف کنید.
|
||
|
||
**Q: چطور بفهمم کدوم assets استفاده نمیشن؟**
|
||
A: از `flutter_unused_assets` استفاده کنید یا به صورت دستی جستجو کنید.
|
||
|