9 ms·

Has Flutter solved its footprint-bloat problem? The internet is littered with reports of 10-100MB+ .ipa and .apk binaries coming out of simple Flutter apps for

Has Flutter solved its footprint-bloat problem? The internet is littered with reports of 10-100MB+ .ipa and .apk binaries coming out of simple Flutter apps for iOS + Android. Google states they can't imagine the footprint ever dropping as low as 1MB. [1] On Web, 1MB of base runtime is a complete showstopper. Embedded applications may suffer similarly. Does today's announcement mean Google has figured out how to fix this for Web, or are just ignoring it? Or worse — are they planning to 'boil the frog' with a sneaky transition into a world of a New Flash Player? > 1MB of Flutter runtime got you down? Don't worry, Flutter Player now ships with Chrome. This is possibly a very dark direction for the Web, of which Google is a powerful steward. [1] https://github.com/flutter/flutter/issues/12456#issuecomment-335051445 https://github.com/flutter/flutter/issues/12456#issuecomment...

michaelchisari 7y ago
I tested it, and the "Hello, World" example results in a 560k js package. Uglified and minified takes it down to around 480k. Gzip takes that to 140k and Brotli compression to 100k. That's a lot to bootstrap an app with, but it's not unreasonable, considering what most frameworks these days will start you with.
- leeoniya 7y ago
  it's not just what goes over the wire. that's 560k of JS that has to be parsed and compiled, which is a shitload.
  - michaelchisari 7y ago
    True, but (unfortunately) it's hardly an outlier in today's ecosystem.
    - zackbrown 7y ago
      Try importing `flutter/animation` — footprint goes WAY off the deep end. `animation.ddc.js` is 4.4MB alone (unminified), never mind the rest of the runtime AND userland application code. You can see this in the flutter_web/examples/gallery example. [`webdev build` failed for me in examples/gallery, so I'd love to see what a successfully minified version of that example looks like — I'm currently deeply skeptical.] Compared to React/Vue/Angular and friends, this appears to be a monstrous outlier.
      - miyoyo 7y ago
        DDC is not at all a representation of the final size of the code, as it doesn't run any kind of tree shaking, minification or optimization, and the animation library has a lot of things that you will definitely not import.
      - tracker1 7y ago
        And here I am freaking about an uncompressed js payload of 300k for an entire app... 4+MB just feels crazy.
      - mraleph 7y ago
        DDC stands for Dart Development Compiler. It is a fast modular compiler that you use for quick edit&refresh development in the browser. It does not do any global optimizations, unlike dart2js - which is what you use for deployment. If you write something like: import 'package:flutter_web/animations.dart'; void main() => print('Hello, World!'); DDC would faithfully compile animations.dart as whole and ship that to your browser. dart2js would include 0 bytes of code from animations.dart into the output. > `webdev build` failed for me in examples/gallery Maybe file a bug? Here is what I get for Gallery: ╭─~/s/f/f/e/gallery ⟨master ⟩ ⟨9s449ms⟩ ╰─» flutter packages pub global run webdev build ... Compiled 18,344,245 characters Dart to 1,914,077 characters JavaScript in 27.9 seconds If I gzip the output I get around 500k. Gallery uses a lot of Flutter so this is in some sense upper boundary for framework overhead. Also it is still early days - I can clearly see this pushed down.
  - est31 7y ago
    May I introduce to you: preparsed Javascript sent over the wire: https://github.com/binast/binjs-ref https://github.com/binast/binjs-ref
    - chrisseaton 7y ago
      Isn’t that just an AST? That still has to be parsed and compiled. It just makes parsing a bit faster.
      - est31 7y ago
        From the README: > Current advanced prototypes already show JS parsing improvements of 30%-50% on all the most common frameworks, just by changing the format, and we believe that we can increase this improvement much further. 30% is more than a bit :).
        chrisseaton 7y ago
        I’ve worked professionally on pre-parsing and 30% is not a great result. And it doesn’t help the time spent on compiling, so it’s saved not a lot of not a lot. Doesn’t really solve the problem.
  - Aeolun 7y ago
    Yes, but it’s more or less in line with current single page apps. In fact, quite possibly a bit smaller.
    - leeoniya 7y ago
      not sure how many "Hello, World" SPAs would add up to that.
      - RussianCow 7y ago
        The point is, real world apps have a bit more complexity than "hello, world", and the runtime cost doesn't matter as much as the app grows in size.
- mevile 7y ago
  Sounds the platform needs some tree shaking.
- dfischer 7y ago
  I'd add that the connotation of an angulardart app isn't a simple SPA. It's meant for larger applications. I have been using it for the past year and a half and really enjoy it. The compiling times have been improving with each release.
- StreamBright 7y ago
  I think the "fix" is not to accept the state of play but to challenge it.
jwiley 7y ago
'main.dart.js' in the example Flutter KENKEN app linked in the blog post: Chrome - 359kb Firefox - 990k I agree that Chrome is becoming more and more a proprietary channel for Google products, which is probably what its original intent was all along.
- cmroanirgo 7y ago
  That's a very large payload difference indeed!
  - Godel_unicode 7y ago
    See other comments, they're actually the same file. The heading names in developer tools are just slightly different.
- mraleph 7y ago
  It's actually the very same main.dart.js (dart2js compiler does not have ability to target a specific browser, its output is supposed to work in every supported browser). 359kb is its compressed size, 990k is its uncompressed size. Firefox shows compressed size in the "Transferred" column and uncompressed size in "Size" column. In Chrome by default you see compressed size only, but if you click "Use large request rows" then you will see both compressed and uncompressed size.
  - kaycebasques 7y ago
    Use large request rows in Chrome DevTools to see transfer size and uncompressed size: https://developers.google.com/web/tools/chrome-devtools/network/reference#uncompressed https://developers.google.com/web/tools/chrome-devtools/netw... Disclosure: DevTools technical writer
deleted 7y ago
[deleted]
merb 7y ago
to be fair even angular has sizing problems. a "simple" app can easily grow to over 200kb gzipped content (including polyfills). and 200kb is a lot for a simple application. currently our "big" application already grown to over 600kb gzipped js. I'm pretty sure flutter has the same problem. I think as soon as people start using a SPA their js size will skyrocket.
jjnoakes 7y ago
The sizes closer to 100MB seem to be from debug builds. From the bug you linked (and this one which it links to: https://github.com/flutter/flutter/issues/16833 https://github.com/flutter/flutter/issues/16833), bare flutter apps are around 4MB on Android. Doesn't seem bad to me.
- Hixie 7y ago
  (I'm the Flutter TL.) According to today's benchmark numbers, we're at 4414KB on Android and 8572KB on iOS (IIRC, iOS encrypts before compressing so it can't get as good a compression). This is for our Hello World test app (https://github.com/flutter/flutter/blob/master/examples/hello_world/lib/main.dart https://github.com/flutter/flutter/blob/master/examples/hell...), which is more or less the smallest app you can imagine building with Flutter unless you bypass the entire framework and only use the engine directly.
  - skybrian 7y ago
    Hmm, encrypting before compressing seems like a pretty strange decision. How does that happen?
    - stock_toaster 7y ago
      I believe the literature says that compress before encrypt is less secure, because compression behaves predictably. See CRIME attacks.
      - skybrian 7y ago
        But, why compress at all then? It won't do anything. I'm not sure this is a good enough reason to never compress anything.
        e12e 7y ago
        Maybe they encrypt with rot13. Compression should work on such a "ciphertext"...
magicalist 7y ago
> This is possibly a very dark direction for the Web Yes, that imagined dark direction for the web is indeed very dark. Call it too big to ship reasonably, but Chrome didn't ship an Angular player or Polymer player, so I don't see what suggests they'd start now.
- tiles 7y ago
  Didn't they ship a Dart VM?
  - RussianCow 7y ago
    They decided not to: https://www.chromestatus.com/feature/6682831673622528 https://www.chromestatus.com/feature/6682831673622528
westoque 7y ago
I don’t understand the obsession with small binaries and compiled packages. I care about usability and user experience. If it takes 5mb to have a smooth experience then I’m all for it. It’s funny how we now have fiber having 1GB/s internet speeds and we rant about having 1MB size package being too big. Also, everyone’s moving to 4k now with even bigger transfer/data requirements. tldr; 1mb should be a non issue as long as experience improves.
- saagarjha 7y ago
  > It’s funny now that there’s fiber having 1GB/s internet speeds, we rant about 1MB size package. Half the people in the world probably struggle to have access to a 10 Mb/s connection. Even I go to places with connections that are tenuous at best.
  - deleted 7y ago
    [deleted]
  - Hixie 7y ago
    (I'm the Flutter TL.) Yeah, I was just writing a design doc earlier today and my math for how big a download we could reasonably expect users to wait for was based on a 5Mbit/s download speed. Half a megabyte takes under a second at that speed, but 5 megabytes takes more like 8 seconds. That's a huge difference. In an environment like the Web, where ephemerality is the norm, you really have to stay below 1MB from what I can tell.
    - AlphaSite 7y ago
      All of this takes memory. Also i do a lot more than use some crappy flutter calculator.
    - sandGorgon 7y ago
      India. Next billion users. Size matters a lot.
    - codedokode 7y ago
Andrex 7y ago
To clarify to anyone else who may have been confused as I was: the "quoted" text in the parent post is not an actual announcement from the source URL or anywhere else, but a hypothetical future situation. Almost gave me a heart attack.
- deleted 7y ago
  [deleted]

michaelchisari 7y ago

I tested it, and the "Hello, World" example results in a 560k js package. Uglified and minified takes it down to around 480k. Gzip takes that to 140k and Brotli compression to 100k. That's a lot to bootstrap an app with, but it's not unreasonable, considering what most frameworks these days will start you with.

leeoniya 7y ago
it's not just what goes over the wire. that's 560k of JS that has to be parsed and compiled, which is a shitload.
- michaelchisari 7y ago
  True, but (unfortunately) it's hardly an outlier in today's ecosystem.
  - zackbrown 7y ago
    Try importing `flutter/animation` — footprint goes WAY off the deep end. `animation.ddc.js` is 4.4MB alone (unminified), never mind the rest of the runtime AND userland application code. You can see this in the flutter_web/examples/gallery example. [`webdev build` failed for me in examples/gallery, so I'd love to see what a successfully minified version of that example looks like — I'm currently deeply skeptical.] Compared to React/Vue/Angular and friends, this appears to be a monstrous outlier.
    - miyoyo 7y ago
      DDC is not at all a representation of the final size of the code, as it doesn't run any kind of tree shaking, minification or optimization, and the animation library has a lot of things that you will definitely not import.
    - tracker1 7y ago
      And here I am freaking about an uncompressed js payload of 300k for an entire app... 4+MB just feels crazy.
    - mraleph 7y ago
      DDC stands for Dart Development Compiler. It is a fast modular compiler that you use for quick edit&refresh development in the browser. It does not do any global optimizations, unlike dart2js - which is what you use for deployment. If you write something like: import 'package:flutter_web/animations.dart'; void main() => print('Hello, World!'); DDC would faithfully compile animations.dart as whole and ship that to your browser. dart2js would include 0 bytes of code from animations.dart into the output. > `webdev build` failed for me in examples/gallery Maybe file a bug? Here is what I get for Gallery: ╭─~/s/f/f/e/gallery ⟨master ⟩ ⟨9s449ms⟩ ╰─» flutter packages pub global run webdev build ... Compiled 18,344,245 characters Dart to 1,914,077 characters JavaScript in 27.9 seconds If I gzip the output I get around 500k. Gallery uses a lot of Flutter so this is in some sense upper boundary for framework overhead. Also it is still early days - I can clearly see this pushed down.
- est31 7y ago
  May I introduce to you: preparsed Javascript sent over the wire: https://github.com/binast/binjs-ref https://github.com/binast/binjs-ref
  - chrisseaton 7y ago
    Isn’t that just an AST? That still has to be parsed and compiled. It just makes parsing a bit faster.
    - est31 7y ago
      From the README: > Current advanced prototypes already show JS parsing improvements of 30%-50% on all the most common frameworks, just by changing the format, and we believe that we can increase this improvement much further. 30% is more than a bit :).
      - chrisseaton 7y ago
        I’ve worked professionally on pre-parsing and 30% is not a great result. And it doesn’t help the time spent on compiling, so it’s saved not a lot of not a lot. Doesn’t really solve the problem.
- Aeolun 7y ago
  Yes, but it’s more or less in line with current single page apps. In fact, quite possibly a bit smaller.
  - leeoniya 7y ago
    not sure how many "Hello, World" SPAs would add up to that.
    - RussianCow 7y ago
      The point is, real world apps have a bit more complexity than "hello, world", and the runtime cost doesn't matter as much as the app grows in size.
mevile 7y ago
Sounds the platform needs some tree shaking.
dfischer 7y ago
I'd add that the connotation of an angulardart app isn't a simple SPA. It's meant for larger applications. I have been using it for the past year and a half and really enjoy it. The compiling times have been improving with each release.
StreamBright 7y ago
I think the "fix" is not to accept the state of play but to challenge it.

jwiley 7y ago

'main.dart.js' in the example Flutter KENKEN app linked in the blog post: Chrome - 359kb Firefox - 990k I agree that Chrome is becoming more and more a proprietary channel for Google products, which is probably what its original intent was all along.

cmroanirgo 7y ago
That's a very large payload difference indeed!
- Godel_unicode 7y ago
  See other comments, they're actually the same file. The heading names in developer tools are just slightly different.
mraleph 7y ago
It's actually the very same main.dart.js (dart2js compiler does not have ability to target a specific browser, its output is supposed to work in every supported browser). 359kb is its compressed size, 990k is its uncompressed size. Firefox shows compressed size in the "Transferred" column and uncompressed size in "Size" column. In Chrome by default you see compressed size only, but if you click "Use large request rows" then you will see both compressed and uncompressed size.
- kaycebasques 7y ago
  Use large request rows in Chrome DevTools to see transfer size and uncompressed size: https://developers.google.com/web/tools/chrome-devtools/network/reference#uncompressed https://developers.google.com/web/tools/chrome-devtools/netw... Disclosure: DevTools technical writer

deleted 7y ago

[deleted]

merb 7y ago

to be fair even angular has sizing problems. a "simple" app can easily grow to over 200kb gzipped content (including polyfills). and 200kb is a lot for a simple application. currently our "big" application already grown to over 600kb gzipped js. I'm pretty sure flutter has the same problem. I think as soon as people start using a SPA their js size will skyrocket.

jjnoakes 7y ago

The sizes closer to 100MB seem to be from debug builds. From the bug you linked (and this one which it links to: https://github.com/flutter/flutter/issues/16833 https://github.com/flutter/flutter/issues/16833), bare flutter apps are around 4MB on Android. Doesn't seem bad to me.

Hixie 7y ago
(I'm the Flutter TL.) According to today's benchmark numbers, we're at 4414KB on Android and 8572KB on iOS (IIRC, iOS encrypts before compressing so it can't get as good a compression). This is for our Hello World test app (https://github.com/flutter/flutter/blob/master/examples/hello_world/lib/main.dart https://github.com/flutter/flutter/blob/master/examples/hell...), which is more or less the smallest app you can imagine building with Flutter unless you bypass the entire framework and only use the engine directly.
- skybrian 7y ago
  Hmm, encrypting before compressing seems like a pretty strange decision. How does that happen?
  - stock_toaster 7y ago
    I believe the literature says that compress before encrypt is less secure, because compression behaves predictably. See CRIME attacks.
    - skybrian 7y ago
      But, why compress at all then? It won't do anything. I'm not sure this is a good enough reason to never compress anything.
      - e12e 7y ago
        Maybe they encrypt with rot13. Compression should work on such a "ciphertext"...

magicalist 7y ago

> This is possibly a very dark direction for the Web Yes, that imagined dark direction for the web is indeed very dark. Call it too big to ship reasonably, but Chrome didn't ship an Angular player or Polymer player, so I don't see what suggests they'd start now.

tiles 7y ago
Didn't they ship a Dart VM?
- RussianCow 7y ago
  They decided not to: https://www.chromestatus.com/feature/6682831673622528 https://www.chromestatus.com/feature/6682831673622528

westoque 7y ago

I don’t understand the obsession with small binaries and compiled packages. I care about usability and user experience. If it takes 5mb to have a smooth experience then I’m all for it. It’s funny how we now have fiber having 1GB/s internet speeds and we rant about having 1MB size package being too big. Also, everyone’s moving to 4k now with even bigger transfer/data requirements. tldr; 1mb should be a non issue as long as experience improves.

saagarjha 7y ago
> It’s funny now that there’s fiber having 1GB/s internet speeds, we rant about 1MB size package. Half the people in the world probably struggle to have access to a 10 Mb/s connection. Even I go to places with connections that are tenuous at best.
- deleted 7y ago
  [deleted]
- Hixie 7y ago
  (I'm the Flutter TL.) Yeah, I was just writing a design doc earlier today and my math for how big a download we could reasonably expect users to wait for was based on a 5Mbit/s download speed. Half a megabyte takes under a second at that speed, but 5 megabytes takes more like 8 seconds. That's a huge difference. In an environment like the Web, where ephemerality is the norm, you really have to stay below 1MB from what I can tell.
  - AlphaSite 7y ago
    All of this takes memory. Also i do a lot more than use some crappy flutter calculator.
  - sandGorgon 7y ago
    India. Next billion users. Size matters a lot.
  - codedokode 7y ago

Andrex 7y ago

To clarify to anyone else who may have been confused as I was: the "quoted" text in the parent post is not an actual announcement from the source URL or anywhere else, but a hypothetical future situation. Almost gave me a heart attack.

deleted 7y ago
[deleted]