Create multiple bundles with Systemjs-builder for an Angular2 application

问题

I have a working Angular2 application with the following structure:

/app
    /components
        /moduleA
        /moduleB
        /...
    /shared
    app.module.ts
    app.routing.ts
    app.component.ts
    main.ts

Now, I'm using systemjs-builder to create a single file with all my typescript, in my gulp file:

gulp.task('bundle', () => {
  builder.buildStatic('app/*.js', 'web/bundle.app.js')
  .then(function() {
    console.log('Build complete');
  })
})

And then in my index.html for my application:

<body>
    <app>Loading...</app>
    <!-- application bundle -->
    <script src="bundle.app.js"></script>
</body>

Everything works fine now, but my application is growing to multiple modules and I'd like to split it into differente module files, so instead of bundle.app.js I'd have common.js for the /app/shared module and then moduleA.js, moduleB.js and so on for all the other modules inside /app/components.

Can this be done with systemjs-builder? This has to be a pretty common feature but I can´t see anything in the documentation.

EDIT: I managed to create a few bundles like this

gulp.task('bundle', () => {
  builder.buildStatic('app/*.js - app/components/**/*.js', 'web/common.js')
  .then(function() {
    console.log('Build complete');
  });

  builder.bundle('app/components/moduleA/**/*.js', 'web/moduleA.js');
  builder.bundle('app/components/moduleB/**/*.js', 'web/moduleB.js');
})

but I don´t think this is totally fine; my previous single bundle was 2,267KB and now my 3 modules are 785KB (common.js) + 2,567KB (moduleA.js) + 1,530KB (moduleB.js), which doesn´t make sense.

If I check the code inside the moduleA and moduleB bundles I can see Angular2 modules and also stuff which should only be in common.js

回答1:

You have to use Bundle Arithmetic to discard dependendencies: https://github.com/systemjs/builder#bundle-arithmetic

You have to build moduleA and moduleB without references to common files.

One way to get it would be to have this structure:

/app
    app.module.ts
    app.routing.ts
    app.component.ts
/modules
    /moduleA
    /moduleB
    /...
/shared
main.ts

Then:

gulp.task('bundle', () => {
  builder.buildStatic('app/**/*.js - /modules/** - /shared/**', 'web/app.js')
  builder.buildStatic('shared/**/*.js', 'web/common.js');

  builder.bundle('modules/moduleA/**/*.js - shared/**', 'web/moduleA.js');
  builder.bundle('modules/moduleB/**/*.js - shared/**', 'web/moduleB.js');
})

And in your html:

<body>
    <app>Loading...</app>
    <!-- application bundle -->
    <script src="common.js"></script>
    <script src="moduleA.js"></script>
    <script src="moduleB.js"></script>
    <script src="app.js"></script>
    <script>
        Sytem.import(main ... balbla);
    </script>

</body>

In addition you would load the bundles on demand, configuring systemjs to make it: https://github.com/systemjs/systemjs/blob/master/docs/production-workflows.md#bundle-extension

If you configure it you can use:

<body>
    <app>Loading...</app>
    <script>
        Sytem.import(main ... balbla);
    </script>

</body>

And Systemjs load each bundle when its needs.

来源：https://stackoverflow.com/questions/38944257/create-multiple-bundles-with-systemjs-builder-for-an-angular2-application

标签

angular

systemjs