Angular 2 + SystemJS — почему так много реквестов и файлов?

Question

[sanex3339]

Суть:
есть такой вот index

<script src="js/jquery/jquery.min.js"></script>
<script src="js/angular2/bundles/angular2-polyfills.js"></script>
<script src="js/systemjs/dist/system.src.js"></script>
<script src="js/rxjs/bundles/Rx.js"></script>
<script src="js/angular2/bundles/angular2.dev.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>

<script>
    System.config({
        'baseURL': 'js/',
        'defaultJSExtensions': true,
        'packages': {
            'typescript': {
                format: 'register',
                defaultExtension: 'js'
            },
            'underscore': {
                defaultExtension: 'js'
            }
        }
    });

    System.import('typescript/boot').then(null, console.error.bind(console));
</script>

При таком импорте у меня почему то SystemJS обращается к куче ангуларовских файлов, хотя весь код этих файлов должен браться из angular2.dev.js. Получается, что подтягивается под 6-7 мегабайт скриптов, хотя и все работает.


Почему так происходит? Как починить?

Answer 1

[Сергей Протько]

А с чего вы взяли что "весь код этих файлов должен браться из angular2.dev.js"? Вы же system.js об этом ничего не сказали.

Все что вы сделали - сказали "загрузи ка typescript/boot", а дальше уже зависимости начали грузиться. Читайте как бандлить скрипты.

Answer 2

[sanex3339]

Все, настроил через webpack.

Кому интересно:
У меня Angular 2 работает в связке с Laravel 5, а значит Elixir.

Для Elixir есть 3 плагина Webpack.
Самый нормальный - laravel-elixir-webpack-ex, он умеет работать с gulp watch.

var  webpack = require('laravel-elixir-webpack-ex');

    mix.copy('node_modules/angular2/bundles/angular2-polyfills.js', 'public/js/angular2');

    mix.webpack('app.ts', {
        resolve: {
            extensions: ['', '.js', '.ts']
        },
        module: {
            loaders: [
                { test: /\.ts/, loader: 'ts-loader' }
            ]
        }
    }, 'public/js', 'resources/assets/typescript');

Импорт скриптов выглядит так:

<script src="js/angular2/angular2-polyfills.js"></script>
<script src="js/app.js"></script>

Кстати, с минификацией у A2 тоже проблемы. Дефолтная минификация ломает шаблоны с *ngIf-подобным синтаксисом. Пришлось, пока не поправят, ставить mangle: false. Тогда все ок.

Итог: с 6.5mb и 250 реквестов ужал до 1.1mb и 14 реквестов.