AOT打包,懒加载失败

问题

在利用ng进行开发时候,由于随着功能的不断追加,模块、组件都会越来越多,从而整体的体积就会越来越大,那么
用户首次加载所需要的时间就会加大,那么体验也就下降,针对此,ng提供的方案是懒加载。
理论上:懒加载模式,打包后JS会拆分为多个chunk,这样用户随着路由导航,按需加载。

但是当我进行AOT打包时,发现,并没有出现,各个懒加载文件,相反,main.js比较大,打开文件,进行关键词检索,
发现本该懒加载的逻辑,还是在里面,那就明白了,懒加载失败,试试JIT,发现懒加载效果OK。

这样子推断,很大可能形式构建打包工具版本问题。
出现打包问题的版本如下

1
"@ngtools/webpack": "1.2.3",

解决

升级版本到1.3.1
再次进行AOT打包,OK啦,如图

ng-bundle

说明

  • 由于AOT打包是很吃内存的,如果构建打包中出现内存溢出,错误,请提高内存设定,了解做法看这里
  • 版本不见得一定要最新,因为版本之间也是有依赖和关系的,还是要根据实际情况和需求,比如我目前ng版本是4.0.1,查官方changelog,知道2017-03-29发布的,
    所以对应查@ngtools/webpack,1.3.1发布时间是2017-04-25T02:55:41.698Z,所以我这里选择的是该版。
  • 真正部署web,建议开启GZIP,这样浏览器加载体积大小还会缩小至少一半,加载会更快。