发表新帖
发表新帖

Create multiple bundles with Systemjs-builder for an Angular2 application

前端 未结
关注
1 416
感情败类
感情败类 2021-01-14 01:05

I have a working Angular2 application with the following structure:

/app
    /components
        /moduleA
        /moduleB
        /...
    /shared
    app.m
相关标签:
1条回答
  • 梦如初夏
    2021-01-14 01:49

    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.

    0 讨论(0)
 看不清?
提交回复
热议问题