AOT打包，懒加载失败

发表于 更新于 本文字数： 601 阅读时长 ≈ 1 分钟
本文是作者对AOT打包，懒加载失败的介绍，包括AOT打包，懒加载失败的优势、实现细节、相关资料等，这些步骤可以帮助作者提高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，这样浏览器加载体积大小还会缩小至少一半，加载会更快。