模块捆绑与加载——只提供客户需要的服务

Module bundling vs loading - serving only what is needed by the client

我们最近在 Angular 1.x 项目中转而使用 TypeScript，并使用 Webpack 进行模块捆绑，使我们能够生成源代码的串联版本，以包含在我们的 index.html页。

在模块化我们的 angular 应用程序时，我们一直小心遵循最佳实践，遵循 John Papa 的风格指南等

我最近一直在思考的事实是，我们所有的 angular 功能模块都捆绑在 webpack 为我们创建的最终文件中。

根据他们的帐户权限设置（我们在登录时读入），将不一定允许登录应用程序的用户访问所提供的所有功能。如果用户只能访问 5 个功能中的 2 个，那么在他们的浏览器中下载的源代码仍将包含开发的整套功能（是的，我们确实丑化了我们的源代码）。

我看到提到的模块加载器，我想知道这些模块加载器能否仅用于满足客户在应用程序中导航时的需求？

因此在加载应用程序时，他们只会获得最低限度需要的核心 modules\features，例如通过导航等将他们带到主页

然后当他们点击他们有权访问的功能区域时，是否只有那些相关的模块源被拉下并可能被缓存以供以后重新访问？

我意识到这最终会产生更多的网络请求，但首次访问应用程序时的初始加载会快得多吗？

我对模块捆绑和加载还很陌生，我想我对它们的区别有基本的了解。当涉及到这种事情时，其他人使用了哪些方法？

谢谢

我想您找不到一个最佳答案。所有你会听到：这取决于。

例如：

  • 如果您的应用程序充满了动态加载的模块，并且初始加载时间至关重要 - 选择 systemjs/jspm。
  • 如果响应能力绝对重要 - 使用 webpack。

在这个问题上有一些很好的 comparisons/discussions：here, here, or here，还有更多 - 但最重要的是 - 你必须自己评估并做出明智的决定。