Angular5模块划分

相信很多人在angular5项目前期，用的很流畅。但是随着项目变得庞大复杂以后，就会出现首页加载慢的问题。这是因为把所有页面都放在一个模块里，导致首页载入相当于把整个项目加载进来，才会觉得的越来越慢。因此，我们需要根据项目业务情况来划分不同的功能模块，按需加载模块，来提升用户体验。

 

下面我根据我所做的项目情况来分享一下进行模块划分的过程，由于我所做的项目模块比较多，所以我做了个简化版的demo，以便截图和讲解。

我的项目目录结构如下：

 

主要包括（登录、注册、首页、用户管理），其中登录、注册、首页这3个页面公用头部和尾部的组件。页面布局结构如下：

 

下面是app.module.ts文件的主要代码：

下面是app-routing.module.ts文件的主要代码：

根据业务的发展来看，用户管理后期是会持续迭代功能的，首页跟登录页用户使用的概论比较高，注册页面的使用率相对小且改动的概论也小。由此，我把注册和用户管理划分为2个特性模块，首页跟登录页留着主模块中。

 

1.划分用户管理模块

在app文件中，新建一个load-module的文件夹，然后在里面创建用户管理模块的路由配置模块customers-routing.module，代码如下：