Best practice to reduce js output file size?

[cgarciae]

Searching I've seen tricks like this

@MirrorsUsed(targets: const[
  'angular',
  'angular.core',
  'angular.core.dom',
  'angular.filter',
  'angular.perf',
  'angular.directive',
  'angular.routing',
  'angular.core.parser',
  'NodeTreeSanitizer'
  ],
  override: '*')
import 'dart:mirrors';

or like this

@MirrorsUsed(override: '*')
import 'dart:mirrors';

It could even be neither. What is the ACTUAL best practice to get small js output?

[bgourlie]

Neither. The angular/di transformers takes care of all that. What kind of output size are you seeing?

[cgarciae]

@bgourlie
Talking away the @MirrorsUsedused 8.9MB, with the @MirrorsUsed that includes a list 2.3MB.

Here is my pubspec.yaml

name: aristadart
description: A sample web application
dependencies:
  angular: any
  browser: any
  di: any
  fp: any
  googleapis: any
  googleapis_auth: any
  http: any
  mongo_dart: any
  redstone: any
  redstone_mapper: any
  redstone_mapper_mongo: any
  route_hierarchical: '>=0.5.0 <0.7.0'
  sass: '>=0.4.0 <0.5.0'
  script_inliner: '>=1.0.0 <2.0.0'
  shelf_static: any
  stack_trace: any
  unittest: any
transformers:
- redstone_mapper
- angular:
    html_files:
    - lib/components/login/login.html
    - lib/components/login/nuevo_usuario.html
    - lib/components/home/home.html
    - lib/components/evento/evento.html
    - lib/components/vista/vista.html
    - lib/components/vista/construccion_ra/construccion_ra.html
    - lib/components/admin/admin.html
    - lib/components/admin/model.html
    - lib/components/admin/target.html
    - lib/components/widgets/loader/loader.html
    - lib/components/widgets/alert/alert.html
    - lib/components/widgets/dummy/dummy.html
- script_inliner
- sass:
    style: compressed
    copy-sources: true
- $dart2js:
    $exclude: bin

and my main.dart

library aristadart.main;


import 'package:angular/angular.dart';
import 'package:angular/routing/module.dart';
import 'package:angular/application_factory.dart';
import 'package:logging/logging.dart';


import 'package:redstone_mapper/mapper_factory.dart';
import 'package:aristadart/arista_client.dart';


@MirrorsUsed(targets: const[
  'angular',
  'angular.core',
  'angular.core.dom',
  'angular.filter',
  'angular.perf',
  'angular.directive',
  'angular.routing',
  'angular.core.parser',
  'NodeTreeSanitizer'
  ],
  override: '*')
import 'dart:mirrors';

class MyAppModule extends Module
{
    MyAppModule()
    {
        bind (AristaLoader);
        bind (LoginVista);
        bind (HomeVista);
        bind (EventoVista);
        bind (VistaVista);
        bind (VistaConstruccionRA);
        bind (NuevoUsuarioVista);
        bind (AdminVista);
        bind (ModelVista);
        bind (TargetVista);
        bind (Acordeon);
        bind (TituloDinamico);
        bind (RouteInitializerFn, toValue: recipeBookRouteInitializer);
        bind (NgRoutingUsePushState, toValue: new NgRoutingUsePushState.value(false));
    }
}


void main()
{

    bootstrapMapper();

    Logger.root.level = Level.FINEST;
    Logger.root.onRecord.listen((LogRecord r) { print(r.message); });


    applicationFactory()
        .addModule(new MyAppModule())
        .rootContextType (MainController)
        .run();
}

[bgourlie]

You need to use the angular transformer as illustrated here.

[cgarciae]

@bgourlie
I am, look at the pubspec.yaml

[bgourlie]

That's odd... what version of angular are you using?

[cgarciae]

@bgourlie
angular 1.1.0

[cgarciae]

@bgourlie
How can I test to see if its another package?

[bgourlie]

It must be another package... perhaps check to see if any of the other packages you're referencing import dart:mirrors.

[cgarciae]

@bgourlie
I know Redstone Mapper uses mirror to encode/decode to JSON. If I remove - redstone_mapper from the transformers will the code size be reduced (even if if produces nonworking code) or what other strategy can I use to find the culprit?

Thanks for the help :)

[bgourlie]

I don't think removing the transformer will fix it. AFAIK, if there is a reference to dart:mirrors anywhere along the dependency tree, it will disable tree-shaking.

[matanlurey]

If you are using the transformer AND are not using mirrors elsewhere, use:

@MirrorsUsed(override: '*')
import 'dart:mirrors';

That tells dart2js not to retain symbols for any library.