Why is javascript files generated by dart is so huge?

Issue

I have the following dart code:

$ cat helloworld.dart
main() => print('Hello world!');
$ 

The javascript code generated by the dart compiler for the above code is as follows:

$ cat helloworld.dart.app.js 
function native_ListFactory__new(typeToken, length) {
  return RTT.setTypeInfo(
      new Array(length),
      Array.$lookupRTT(RTT.getTypeInfo(typeToken).typeArgs));
}
function native_ListImplementation__indexOperator(index) {
  return this[index];
}
function native_ListImplementation__indexAssignOperator(index, value) {
  this[index] = value;
}
function native_ListImplementation_get$length() {
  return this.length;
}
function native_ListImplementation__setLength(length) {
  this.length = length;
}
function native_ListImplementation__add(element) {
  this.push(element);
}
function native_BoolImplementation_EQ(other) {
  return typeof other == 'boolean' && this == other;
}
function native_BoolImplementation_toString() {
  return this.toString();
}

<snapped>

var static$uninitialized = {};
var static$initializing = {};
function $inherits(child, parent) {
  if (child.prototype.__proto__) {
    child.prototype.__proto__ = parent.prototype;
  } else {
    function tmp() {};
    tmp.prototype = parent.prototype;
    child.prototype = new tmp();
    child.prototype.constructor = child;
  }
}
isolate$inits.push(function(){
  isolate$current.Duration$DartMILLISECONDS_PER_MINUTE$field = static$uninitialized;
  isolate$current.Duration$DartMILLISECONDS_PER_HOUR$field = static$uninitialized;
  isolate$current.Duration$DartMILLISECONDS_PER_DAY$field = static$uninitialized;
  isolate$current.Duration$DartSECONDS_PER_HOUR$field = static$uninitialized;
  isolate$current.Duration$DartSECONDS_PER_DAY$field = static$uninitialized;
  isolate$current.Duration$DartMINUTES_PER_DAY$field = static$uninitialized;
}
);
RunEntry(unnamedd9297f$main$member, this.arguments ? (this.arguments.slice ? [].concat(this.arguments.slice()) : this.arguments) : []);
$

And the size of helloworld.dart.app.js is 102k!

When ran in optimize mode, it generated the following javascript – helloworld.dart.js which is of size 20k

$ cat helloworld.dart.js 
var e;function f(a,b){if(b>=0&&b<a.length)return b;h(i(b))};var j={},k={};function aa(a,b,c){if(b)a.g=function(){return b.call(c)}}function ba(a,b,c,d){function g(b,g,t,m){return a.call(c,d,b,g,t,m)}aa(g,b,c);return g}function l(a,b){if(a.prototype.__proto__)a.prototype.__proto__=b.prototype;else{var c=function(){};c.prototype=b.prototype;a.prototype=new c;a.prototype.constructor=a}}function ca(a,b){return typeof a=="number"&&typeof b=="number"?a+b:a.na(b)}function da(a){a/=4;return a<0?Math.ceil(a):Math.floor(a)}
function o(a,b){if(a===void 0)return b===void 0;else if(typeof a==typeof b&&typeof a!="object")return a===b;return a.G(b)}function h(a){a&&typeof a=="object"&&Error.captureStackTrace&&Error.captureStackTrace(a);throw a;}function p(){var a=new q;a.f=s("ya",ea);a.va="";a.qa="";a.N=[];h(a)}var u={d:0};

<snapped>

y.push(function(){x.fb=j;x.eb=j;x.gb=j});y.push(function(){x.Ta=j;x.Sa=j;x.Ra=j;x.Wa=j;x.Va=j;x.Ua=j});(function(a,b){if(!A){var c=new ya;oa=c;sa(c,function(){a(b)});Ea();x=c}})(function(){return qb()(1,u,"Hello world!")},this.arguments?this.arguments.slice?[].concat(this.arguments.slice()):this.arguments:[]);
$

Why is the javascript code which was generated by a dart compiler so huge?

What problem are they trying to solve by generating such huge javascript files?

Side Note: The javascript files were so huge, SO threw the following error:

Oops! Your question couldn’t be submitted because: body is limited to 30000 characters; you entered 140984

Solution

If you would like to get even a better JavaScript, try the Frog compiler instead of DartC. Frog ist written in Dart itself.

http://turbomanage.wordpress.com/2011/12/09/dart-dev-mode-cometh/

Note, this blogpost above is a bit outdated. You can meanwhile use the Dart SDK for Frog:
http://gsdview.appspot.com/dart-editor-archive-continuous/3058/

This post might also be of interest for you, Seth shows how the Frog generated JS looks like:
http://blog.sethladd.com/2011/12/10-lessons-from-porting-javascript-to.html

Here is how you can enable Frog in current Editor:
https://groups.google.com/a/dartlang.org/group/misc/msg/5dfe04c69ed0fed3

Answered By – Christian

Answer Checked By – Pedro (FlutterFixes Volunteer)