navigationend - title angular 6

¿Tiene sentido combinar en el sistema?

Question

He configurado un proyecto inicial con Angular 2 (RC.1) y el sistema JS. Quería crear un paquete único estático para producción y agrupar todo excepto mi propio código para desarrollo. Este era mi flujo normal en el pasado, antes de usar systemjs. Después de empacar con gulp-jspm / systemjs-builder, el archivo del paquete era más grande que 2 MB (fuente) o 1.2 MB (minificado). Como esto se veía demasiado grande, lo he comprobado dos veces usando la CLI lisa jspm, pero el tamaño del archivo era el mismo.

El comando utilizado fue para el modo dev:

jspm bundle app/bootsrap - [path/to/app/**/*] mybundlename.js --inject

O para la producción:

jspm bundle app/bootstrap mybundlename.js

Tener un archivo de 1.2 MB en producción parece demasiado grande si quiero, por ejemplo, ejecutar mi aplicación web en navegadores móviles con ancho de banda limitado. Especialmente porque este era un paquete con casi ningún código mío (solo un archivo de arranque y un componente principal de la aplicación). Mis paquetes de aplicaciones Angular 1.5 solían ser de alrededor de 700kB para aplicaciones empresariales bastante grandes.

Al mirar el paquete en sí me di cuenta de que hay 540 archivos agrupados. Estoy bastante seguro de que no necesito la mayoría de ellos.

El archivo config.js completo se puede encontrar aquí: https://plnkr.co/edit/BhYy5Pu1QbmYJ7Ph5rBO .

Así que finalmente mis preguntas:

• ¿Deben agruparse los archivos cuando utilizo systemJS en un proyecto o debería dejarlos desagregados y dejar que systemJS se encargue de la carga diferida?
• Si se recomienda empaquetar, ¿cómo puedo crear un paquete que tenga un tamaño razonable e incluya solo los archivos de los que realmente depende mi aplicación?

Answer 1

Con las últimas demostraciones y RC3 he cambiado el sistema. Flujo de JS y ahora el tamaño del paquete es considerablemente más pequeño. Aún RxJS aporta demasiado a la historia y con suerte se optimizará en el futuro.

Esto es lo que tengo ahora:

var map = {
    ''hub'': ''src/app'',
    ''rxjs'': ''node_modules/rxjs'',
    ''@angular'': ''node_modules/@angular'',
    ''ng2-translate'': ''node_modules/ng2-translate''
};

var packages = {
    ''hub'': { main: ''main'', defaultExtension: ''js'' },
    ''rxjs'': { defaultExtension: ''js'' },
    ''ng2-translate'': {
        defaultExtension: ''js'', main: ''ng2-translate.js''
    }
};

var packageNames = [
    ''common'',
    ''compiler'',
    ''core'',
    ''forms'',
    ''http'',
    ''platform-browser'',
    ''platform-browser-dynamic'',
    ''router''
];

packageNames.forEach(function(pkgName) {
    packages[''@angular/'' + pkgName] = { main: ''bundles/'' + pkgName + ''.umd.js'', defaultExtension: ''js'' };
});

System.config({
    defaultJSExtensions: true,
    map: map,
    packages: packages
});

Y después de crear un paquete en DEV lo cargo de esta manera:

System.import(''lib/bootstrap'').then(function(){
    System.import(''app/main'');
});

El tamaño es 785kB + ~ 70kB para polyfill angular (es6-shim, reflect metadata y zone.js). Podría ser aún más pequeño, especialmente polyfill pero ahora lo llamaría decente.

• JSPM fue expulsado, obviamente, de la configuración. Creo que angular no juega muy bien con JSPM cuando se trata de tamaño, ya que agrupa muchos archivos innecesarios.