flutter 打包 web 时,main.dart.js 这么大有好的解决方案吗?
RT, 最近想试下 flutter 打包 web,但是打包的main.dart.js
很大,flutter build web --release
命令下体积是 1.8MB ,gzip 压缩后 633KB, 非常大了。
有什么优化方案吗?
网上找了,但目前还没看到有靠谱的解决方案,或者是我孤陋寡闻还没找到。
望 v2 大神指个路。
flutter 是 beta 版本。
~ » flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, 1.25.0-8.2.pre, on Mac OS X 10.14.6 darwin-x64)
flutter 打包 web 时,main.dart.js 这么大有好的解决方案吗?
更多关于flutter 打包 web 时,main.dart.js 这么大有好的解决方案吗?的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
brotli 会更小 10-20%
#2 不可能吧 你打的应该不是 release 我的线上版本才 27M 还包括素材文件
本身这么大,小 20%没啥区别啊,另外 flutter2.0 好像更大了一些…
可以看看我的 demo, flutter 创建的项目,github actions 打的包,
flutter build ios --release --no-codesign
https://github.com/AoEiuV020/FlutterDemo
#6 不知道是不是打包和上架是有区别的,ios 上架应该是有压缩的。因为我看到我本地的.app 打包文件是 200 多 m,app store 是 27M
哪个是 bitcode 了 appstore 做了分包
在Flutter打包为Web应用时,main.dart.js
文件的大小确实可能成为一个关注点,尤其是当应用变得复杂时。以下是一些有效的解决方案来优化这个文件的大小:
-
代码拆分(Code Splitting): Flutter Web支持代码拆分,这意味着可以将代码分成更小的块,按需加载。使用
lazy_load_route
等库可以帮助实现这一点,从而减少初始加载时间。 -
Tree Shaking: 确保你的代码库中没有未使用的代码。Flutter和Dart的编译器会尝试自动移除未使用的代码,但手动检查和清理依赖也是必要的。
-
优化图片和资产: 图片和其他资产文件是应用大小的主要贡献者。使用压缩工具优化这些文件,并确保它们以最适合Web的格式存储。
-
减少依赖: 分析你的
pubspec.yaml
文件,移除不必要的依赖。每个依赖都会增加最终构建的大小。 -
使用Dart编译器的优化选项: 在构建时,可以使用Dart编译器的优化选项,如
--dart-define=FLUTTER_WEB_USE_SKIA=false
(注意,这可能会影响渲染性能)。 -
分析构建输出: 使用工具如
webpack-bundle-analyzer
(虽然它是Webpack的工具,但类似的工具或方法可用于分析Dart编译输出)来分析main.dart.js
的内容,找出哪些部分占用了最多的空间。
通过这些方法,你可以显著减小main.dart.js
的大小,从而提高Flutter Web应用的加载速度和用户体验。