angular2+ 模块懒加载的实现

• 闲言：公司开发前端项目所用的框架是angular2,因为这个项目开始做的时候angular2确实出来没多久，大家都是边学边用，所以肯定是会有很多坑。这次主要说客户打着电话，敲着桌子给我们UI项目首页加载计时。。。说多了都是泪。

• 简介：做过ng2的同学都应该知道ng2是采用模块化开发的，集成webpack（cli脚手架）或者使用使用quickStart（自己配置webpack,我们就是），我们开始做项目的时候模块比较少，所以浏览器访问的时候，同时加载十几个模块，速度还能接受。后来功能模块发展到几十个的时候，整个项目十秒都加载不出来（这估计是个人都忍不了），项目优化提上日程。

• 懒加载：简言之就是用到哪个功能模块，哪个功能模块才被加载，不用的时候藏着，别搁那占用浏览器资源，影响我想看功能模块的加载速度（譬如：登录界面）。

• 预加载：乍一看，这不是和懒加载自相矛盾嘛，其实不矛盾。预加载的意思的预先下载指定功能模块资源文件，见下图webpack打包出来的很多js文件，每个js文件代表一个功能模块。一句话，资源文件先下载下来，但是浏览器不执行。那为什么要用预加载呢?我直接使用懒加载，用户导航到哪个功能模块，我再让浏览器去下载并且执行js文件不就行了，还省资源。这里有一个用户体验问题，就是如果我们的一个功能模块的js文件比较大的话，那浏览器下载肯定是需要一点时间的，而且去读取执行这个文件也需要时间，假如用户点击这个功能，界面就会卡一下，网络不好，可能会卡很久，界面没有东西，很尴尬。所以这个预加载主要和懒加载配合去提前把那些体积较大和比较重要的功能模块的资源文件，先下载下来，增强用户体验的。

•  实现

1. 首先需要声明：ng2懒加载的实现是ng2的路由模块和webpack路由加载器配合实现的。
2. webpack基础配置（webpack.common.js）文件需要添加的内容,ng2路由加载器。
3. ng2项目中懒加载路由配置，主要用到一个loadChildren属性
4. 预加载配置，为方便全局使用，建议把预加载配置写成一个单独的文件（preload.ts）,内容如下
5. 引入，使用，完成。（预加载文件只要在root路由导入一次即可，在forChild()子路由中不需要再次导入）
6. 预加载不要乱用哦，如果每一个功能模块到加上{preload:true},那界面还是会很卡的。刚写博客，不足之处还请大神不吝指教，感谢！