分布式软件架构中的捆绑优化

Question

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

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

目标还在于，当该框架代码发生更改时，没有单个应用程序必须再次更新和部署。

我看到的标准方式是使用 es2015 导入，并且模块捆绑程序解释导入并仅将必要的代码添加到模块中（摇树）。大多数情况下，您需要的 Angular 框架内容也包含在捆绑包中（不使用 CDN）。 但在这种情况下，有 3 方交付代码：

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

您将如何拆分和优化捆绑包？

• 与集中式框架代码和应用程​​序需要使用的所有 Angular/供应商的东西制作一个单独的包 Angular 的东西将被排除在主包之外
  • 使用类似 CDN 的方式来集中自定义框架内容并引用该捆绑包（捆绑包中没有 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/

框架代码应排除供应商代码，应用程序应定义它。就像剑道要求你有 JQuery 一样。