分享程序员开发的那些事...
更新时间：2023-11-22 17:44:10
您必须使用捆绑算法来丢弃依赖关系: https://github.com/systemjs/builder#bundle-arithmetic
You have to use Bundle Arithmetic to discard dependendencies: https://github.com/systemjs/builder#bundle-arithmetic
您必须在不引用公共文件的情况下构建moduleA和moduleB.
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
然后:
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');
})
在您的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>
此外，您将按需加载捆绑软件，将systemjs配置为: https://github.com/systemjs/systemjs/blob/master/docs/production-workflows.md#bundle-extension
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>
然后Systemjs会在需要时加载每个捆绑软件.
And Systemjs load each bundle when its needs.