Question

背景：

我正在开发一个将利用angular的延迟加载机制的应用程序（我正在使用7.2.0）。我有几个feature-routing.module.ts负责处理所述延迟加载的模块的路由。

在AppModule方面，我想使用here描述的模式；也就是说，要从另一个文件中导出（js）配置片段（而不是创建许多不必要的路由模块-每个子路由都不需要特殊的提供程序或服务），从而以其他方式（以js方式）导入路由数组的一部分。

问题： 从捆绑的角度来看，如果我将应用程序的路由配置中与功能相关的部分放在与延迟加载模块的路由模块相同的文件中，会发生什么？

文件导出仅由延迟加载的功能模块使用的路由模块，同时还导出仅由应用程序路由模块使用的一些const。那么是否会将整个文件（因此包括功能路由模块和其他对象）一起捆绑两次：一次进入应用模块，一次进入功能？还是ng build这么聪明，以至于仅将const与应用模块捆绑在一起，而仅将功能路由模块与功能模块捆绑在一起？

在我看来，这是个好主意，因为特定功能的所有所有路由问题都将保存在一个文件中，并且所有相关模块都将从那里使用它。我正拼命地尝试减少文件数量，因为它已失去控制。

例如user-routing.module.ts：

// This one is meant for the AppRoutingModule, and should only be bundled with that.
export const user_routes: Routes = [
    {
        path: 'users',
        loadChildren: './users/users.module#UsersModule'
    }
// ...
];
// The rest should only be bundled with the UsersModule and NOT with the app module
const routes: Routes = [
// ...
];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class UsersRoutingModule { }

Answer 1

问题：如果从应用程序的路由配置中将与功能相关的部分与延迟加载的模块的路由模块放在同一文件中，从捆绑的角度来看会发生什么？

将它们放置在同一模块中时，没有构建问题。

那么是否会将整个文件（因此包括功能路由模块和其他对象）捆绑两次：一次进入应用模块，一次进入功能？

WebPack将

TypeScript导入语句映射到单个引用到捆绑包中。因此，您不能通过多次导入来复制TypeScript源代码。

还是ng build这么聪明，以至于仅将const与应用模块捆绑在一起，而仅将功能路由模块与功能模块捆绑在一起？

是的，它只会被捆绑一次，因为这是TypeScript处理它的方式。

看看Angular束检查器。该工具可视化了捆绑包中的内容，它们的用途以及大小。它将使事情变得更加清晰。

https://coryrylan.com/blog/analyzing-bundle-size-with-the-angular-cli-and-webpack

将同一文件中的不同对象导出到不同的NgModules

1 个答案: