Czy sprzedaż wiązana w systemjach ma sens

Question

Mam skonfigurowany projekt seed z Angular 2 (RC.1) i JS systemu. Chciałem stworzyć statyczny pojedynczy pakiet do produkcji i pakować wszystko poza moim własnym kodem do programowania. To był mój normalny przepływ w przeszłości, przed użyciem systemjs. Po łączenie z łykiem-jspm/systemjs wypełniacze aktywne plik pakiet był większy niż 2 MB (źródła) lub 1,2 MB (minified). Ponieważ wyglądało to na zbyt duże, dwukrotnie sprawdziłem, używając interfejsu CLI dla zwykłego interfejsu jspm, ale rozmiar pliku był taki sam.

poleceń używany był w trybie dev:

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

lub do produkcji:

jspm bundle app/bootstrap mybundlename.js 

Posiadające pliku 1,2 MB na produkcji wydaje się zbyt duży, jeśli chcę np uruchomić moją aplikację internetową w przeglądarkach mobilnych z ograniczoną przepustowością. Zwłaszcza, że ​​był to pakiet bez prawie żadnego kodu (tylko plik bootstrap i główny składnik aplikacji). Pakiety aplikacji My Angular 1.5 miały zwykle około 700kB dla dość dużych aplikacji dla przedsiębiorstw.

Patrząc na pakiet, zdałem sobie sprawę, że w pakiecie jest 540 plików. Jestem prawie pewien, że nie potrzebuję większości z nich.

Pełne config.js można znaleźć tutaj: https://plnkr.co/edit/BhYy5Pu1QbmYJ7Ph5rBO.

więc w końcu moje pytania:

• powinno być powiązane pliki przy użyciu systemJS w projekcie czy mam po prostu zostawić je uwolniony i niech systemJS zająć leniwe załadunku?
• Jeśli zaleca się sprzedaż wiązaną, w jaki sposób mogę utworzyć pakiet o rozsądnym rozmiarze i obejmuje on tylko te pliki, od których faktycznie zależy moja aplikacja?

Answer 1

Z najnowszymi demami i RC3 zmieniłem przepływ system.JS, a teraz rozmiar pakietu jest znacznie mniejszy. Wciąż RxJS wprowadza zbyt wiele do historii i mam nadzieję, że zostanie zoptymalizowana w przyszłości.

To co mam teraz:

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 
}); 

A po utworzeniu tobołek na DEV załadować go tak:

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

Rozmiar jest 785kB + ~ 70kB dla kątowego PolyFill (ES6 -shim, odzwierciedla metadane i plik zone.js). Mogłoby być jeszcze mniejsze, szczególnie polifilne, ale teraz nazwałbym je przyzwoitym.

• JSPM został wyrzucony oczywiście z instalacji. Myślę, że kątowe nie gra zbyt dobrze z JSPM, jeśli chodzi o rozmiar, ponieważ zawiera wiele niepotrzebnych plików.