减小Flutter应用大小的终极指南

应用程序大小对于应用程序很重要。它有两个部分:

下载大小:应用程序在应用商店下载、安装时的大小。

安装大小:当您下载应用程序源码后,解压、编译和优化应用程序后的大小。可能是安装大小的两倍、三倍甚至四倍。

因此,当用户去安装应用程序时,他会看到加载栏,然后看到实际的应用程序大小。应用程序越大,下载失败、取消的可能性就越大。作为开发人员,我们希望减小应用程序的大小,以便我们的应用程序获得尽可能多的分发。

1.使用SVG或WEBP作为图标和矢量图像

考虑使用 SVG(可缩放矢量图形)文件而不是 PNG 或 JPEG 文件。SVG 是基于矢量的,因此它们占用的空间更少,并且在缩放时不会损失质量。或者,您可以使用 WEBP 而不是 JPG/PNG。它类似于 JPG/PNG,但尺寸小约 25%。

2、缓存

使用缓存无助于减小应用程序大小,但会使应用程序加载速度更快,从而提高应用程序性能。所有常用图像,例如使用cached_network_image 插件的个人资料图片、背景图片。

cached_network_image 允许您使用任何小部件作为占位符。在此示例中,在加载图像时显示微调器。

dart 复制代码
CachedNetworkImage(  
    imageUrl: "http://via.placeholder.com/200x150",  
    imageBuilder: (context, imageProvider) => Container(  
        decoration: BoxDecoration(  
            image: DecorationImage(  
            image: imageProvider,  
            fit: BoxFit.cover,  
            colorFilter:  
                ColorFilter.mode(Colors.red, BlendMode.colorBurn)),  
        ),  
    ),  
    placeholder: (context, url) => CircularProgressIndicator(),  
    errorWidget: (context, url, error) => Icon(Icons.error),  
),

3. 优化未使用的图标

Flutter 具有从 Material、Cupertino、FontAwesome 等字体中剔除未使用图标的功能。

Android

tree-shake-icons在中设置属性gradle.properties

iOS

如果您从 Xcode 构建,则可以设置TREE_SHAKE_ICONS环境变量

4. 压缩图片

每个人都知道他们可以而且应该压缩 JPG/PNG,但是有多少人知道您还可以压缩 SVG 和 WEBP 图像?

您可以使用 pngquant、zopflipng 或 pngcrush 等工具。您可以使用所有这些工具来减小图像尺寸而不影响其质量。

此外,要压缩 JPEG 图像,您可以使用其他工具,例如 guetzli 和 packJPG。用于压缩 PNG 图像的免费在线资源是compresspng.com/

或者使用代码压缩:

dart 复制代码
final String response = await rootBundle.loadString('assets/en_us.json');  
List<int> original = utf8.encode(response);  
List<int> compressed = gzip.encode(original);  
List<int> decompress = gzip.decode(compressed);  
final enUS = utf8.decode(decompress);

5. 使用 Proguard 规则

Proguard是一个java程序优化器。它不是 Flutter 特有的。它以不改变功能但改变表示形式使其更加紧凑的方式优化您的代码。它还从依赖项中删除未使用的 java 代码。

添加到文件android/app/build.gradle

dart 复制代码
android {  
    buildTypes {  
        getByName( "release" ) {  
        // 启用代码压缩、混淆和优化 minifyEnabled = true  
        // 启用资源压缩  
        shrinkResources = true  
        // 启用proguard规则  
        proguardFiles(  
            getDefaultProguardFile( "proguard-android-optimize.txt" )),  
            "proguard-rules.pro"  
        )  
        }  
    }  
}

添加到文件android/app/proguard-rules.pro

dart 复制代码
## Flutter wrapper  
-keep class io.flutter.app.** { *; }  
-keep class io.flutter.plugin.** { *; }  
-keep class io.flutter.util.** { *; }  
-keep class io.flutter.view.** { *; }  
-keep class io.flutter.** { *; }  
-keep class io.flutter.plugins.** { *; }  
// uncomment this if you are using firebase in the project  
-keep class com.google.firebase.** { *; }  
-dontwarn io.flutter.embedding.**  
-ignorewarnings

6. 混淆代码!

Android

gradle.properties在中设置属性: extra-gen-snapshot-options=--obfuscate

iOS

# Flutter 混淆

7.使用在线字体

8. 开发工具

可用于查看应用程序性能、网络、内存、CPU 等的直观表示。您可以使用它来减小应用程序的大小。

要激活开发工具,请运行以下命令:

flutter pub global activate devtools

查看应用信息的可视化展示。

flutter pub global run devtools - appSizeBase=apk-code-size-analysis_01.json

9. 更多优化

android/gradle.properties文件

android.enableR8.fullMode=true

删除未使用的代码、组合类以缩小代码等。

10. 压缩本地库

android/gradle.properties文件

android.bundle.enableUncompressedNativeLibs= true

11.分割捆绑包(仅适用于Android)

如果我们上传到 Playstore,我们可以创建一个应用程序包,或者我们可以按 abi 拆分 apk,这会将 apk 拆分为 x64 和 x86 位代码。appbundleGoogle Play 的新应用程序服务模型(称为动态交付)使用您的应用程序包为每个用户的设备配置生成和提供优化的 APK,确保他们只下载运行您的应用程序所需的代码和资源。

flutter build apk --split-per-abi

12. 延迟加载

Flutter 能够构建可在运行时下载额外 Dart 代码和资源的应用程序。这允许应用程序减少安装 APK 的大小,并在用户需要时下载功能和资产。

13. 检测大型第三方库并在可能的情况下将其丢弃

对于 Android 的 AppBundle

flutter build appbundle --target-platform android-arm64 --analyze-size

对于 Android 的 APK:

flutter build apk --target-platform android-arm64 --analyze-size

对于 iOS:

flutter build ios --analyze-size

解释

14.删除未使用的第三方库与静态资源文件

15. 始终更新 Flutter

Flutter 一直在不断更新改进,在某些情况下,由于某些功能不可用,我可能会使用一些第三方插件。但在未来的某些更新中,Flutter 可能已经解决了这个问题,并有一个内置的解决方案。在这种情况下,使用默认的 Flutter 解决方案比使用第三方方插件是一个很好的做法。

相关推荐
Cache技术分享几秒前
99. Java 继承(Inheritance)
前端·后端
SleepyZone9 分钟前
Cline 源码浅析 - 从输入到输出
前端·ai编程·cline
Struggler28113 分钟前
pinia-基于monorepo的项目结构管理
前端
Struggler28117 分钟前
SSE的使用
前端
未来猫咪花18 分钟前
# Flutter状态管理对比:view_model vs Riverpod
flutter·ios·android studio
用户58061393930024 分钟前
前端文件下载实现深度解析:Blob与ObjectURL的完美协作
前端
aqi0024 分钟前
FFmpeg开发笔记(六十四)使用国产的RedPlayer播放器观看网络视频
android·ffmpeg·音视频·直播·流媒体
雨白26 分钟前
扩展函数和运算符重载
android
Lin866627 分钟前
Vue 3 + TypeScript 组件类型推断失败问题完整解决方案
前端
coding随想27 分钟前
从零开始:前端开发者的SEO优化入门与实战
前端