减小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 解决方案比使用第三方方插件是一个很好的做法。

相关推荐
刘志辉4 分钟前
vue反向代理配置及宝塔配置
前端·javascript·vue.js
星叔28 分钟前
ARXML汽车可扩展标记性语言规范讲解
java·前端·汽车
望佑40 分钟前
复习一下Greendao...
android·数据库
sky.fly1 小时前
HTML5+css3(浮动,浮动的相关属性,float,解决浮动的塌陷问题,clear,overflow,给父亲盒子加高度,伪元素)
前端·css·html
Coisini_甜柚か1 小时前
打字机效果显示
前端·vue3·antv
海绵波波1071 小时前
Webserver(4.5)复用
android·开发语言·javascript
郑小憨1 小时前
Node.js NPM以及REPL(交互式解释器) 使用介绍(基础介绍 二)
开发语言·前端·javascript·npm·node.js
嚣张农民1 小时前
在 WebSocket 连接中出现错误时,如何处理和捕获错误?
前端·javascript·面试
代码搬运媛1 小时前
前端开发利器:npm 软链接
前端·npm·node.js
周三有雨2 小时前
vue3 + vite 实现版本更新检查(检测到版本更新时提醒用户刷新页面)
前端·vue.js·typescript