asp.net - 分布式软件架构中的捆绑优化

Question

我们有一个架构，其中一个大型应用程序被分成多个 Angular 应用程序，由不同的团队以不同的部署时间表维护。ASP.NET 上下文中的这些单独的 Angular 应用程序部署在服务器上并作为一个大型应用程序运行。每个应用程序都部署在一个单独的应用程序池中，它们都具有相同的布局和框架代码。

每个应用程序都将使用通过 AOT 编译器和模块 bundler (rollup 或 webpack 2)优化的 bundle 。每个应用程序还会使用需要集中在大型应用程序(框架代码)中的集中式 JavaScript 代码。此代码还将使用 Angular 组件并包含诸如集中式布局组件、进行 Web API 调用的多个 Angular 服务等内容......因此每个应用程序都将使用相同的框架代码。

我们的目标还在于，当该框架代码发生更改时，任何单个应用程序都无需再次更新和部署。

我看到的标准方法是使用 es2015 导入，模块 bundler 解释导入并仅将必要的代码添加到模块中(摇树)。大多数情况下，您需要的 Angular 框架内容也包含在 bundle 中(不使用 CDN)。但在这种情况下，有 3 方提供代码:

• Angular 和其他 vendor 代码
• 在所有应用程序中使用的集中式定制框架代码也使用 Angular 并提供一个包
• 应用程序本身提供一个包

您将如何拆分和优化 bundle ？

• 将集中式框架代码和应用程​​序需要使用的所有 Angular/vendor 的东西制作一个单独的包 Angular 东西将被排除在主包之外
  • 使用类似 CDN 的方式来集中自定义框架内容并引用该 bundle ( bundle 中没有 Angular 代码)
  • 所以你最终会得到这样的结果:

<script src="vendor-bundle.js"></script>
<script src="/central-location/frameworking-bundle.js"></script>
<script src="app-bundle.js">/script>;

在此特定情况下，最佳方法是什么？我找不到这种架构设置的好例子。

Answer 1

只需使用这种构造:
<script src="vendor-bundle.js"></script>
<script src="/central-location/frameworking-bundle.js"></script>
<script src="app-bundle.js">/script>;

并在 frameworking-bundle.js 上使用 eTags/last modified 缓存这样，如果修改了文件，则会再次下载该文件。用户将始终获得最新版本，而无需使用版本/散列/查询字符串。它不必对代码进行修改。 https://betterexplained.com/articles/how-to-optimize-your-site-with-http-caching/

框架代码应该排除 vendor 代码，应用程序应该定义它。就像 Kendo 要求您拥有 JQuery 一样。