Имеет ли смысл связывание в systemjs

Question

Я создал проект семян с угловым 2 (RC.1) и системой JS. Я хотел создать статический единый комплект для производства и расслоения всего, кроме моего собственного кода для разработки. Это был мой обычный поток в прошлом, прежде чем использовать systemjs. После комплектации с Глоток-JSPM/systemjs-строитель файл пакет был больше, чем 2 MB (источник) или 1,2 MB (уменьшенная). Поскольку это выглядело слишком большим, я дважды проверял использование простого jspm CLI, но размер файла был таким же.

Команда была использована для режима Dev:

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

Или для производства:

jspm bundle app/bootstrap mybundlename.js 

Имея 1,2 MB файл на производстве кажется слишком большой, если я хочу, например, для запуска моего веб-приложения в мобильных браузерах с ограниченной пропускной способностью. Специально, поскольку это был набор с почти без кода (только файл начальной загрузки и основной компонент приложения). Мои пакеты приложений Angular 1.5 обычно составляли около 700 КБ для довольно крупных корпоративных приложений.

Посмотрев на комплект, я понял, что в комплекте имеется 540 файлов. Я почти уверен, что мне не нужна большая часть из них.

Полный файл config.js можно найти здесь: https://plnkr.co/edit/BhYy5Pu1QbmYJ7Ph5rBO.

Итак, наконец, мои вопросы:

• Если файлы в комплекте при использовании systemJS в проекте, или я должен просто оставить их, и пусть разделены systemJS заботиться о отложенной загрузки?
• Если связка рекомендуется, как я могу создать пакет, который имеет разумный размер и включает в себя только файлы, от которых на самом деле зависит мое приложение?

Answer 1

С последними демонстрациями и RC3 я изменил поток system.JS, и теперь размер пучка значительно меньше. Тем не менее RxJS слишком много вносит в историю, и, надеюсь, он будет оптимизирован в будущем.

Это то, что я сейчас:

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

И после создания сверток на DEV я загрузить его, как это:

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

Размер является 785kB + ~ 70kB для углового polyfill (ES6 -shim, отражать метаданные и zone.js). Это может быть меньше, особенно полипол, но я бы назвал его приличным сейчас.

• JSPM был выбит, очевидно, из установки. Я думаю, что угловой не слишком хорошо работает с JSPM, когда дело доходит до размера, поскольку он объединяет множество ненужных файлов.