模块捆绑与加载 - 仅提供客户端所需的内容

Question

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

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

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

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

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

因此，在加载应用程序时，他们只会获得最少需要的核心模块\功能，例如让他们进入带有导航等功能的主页。

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

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

我对模块捆绑和加载相当陌生，我想我对这些差异有一个基本的了解。当涉及到这类事情时，其他人使用了哪些方法？

谢谢

Answer 1

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

例如：

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

关于这个问题有一些很好的比较/讨论：here、here 或 here 等等 - 但最重要的是 - 您必须自己评估并做出明智的决定。