Angular AoT编译

Question

我正在浏览更新的Angular文档，并发现他们现在已经改变了他们的方法。 早些时候，情况如下：

1. 运行ng eject命令生成webpack.config.js。
2. 为aot创建webpack.config.aot.js，main-aot.ts，tsconfig-aot.json，index-aot.html的单独代码。

现在，他们正在使用rollup和system.js。

这背后有什么特别的原因吗？ 和服务器端渲染以及它提到使用webpack。 为什么不为两者使用webpack？ 还提到angular-cli在引擎盖下使用webpack，那么为什么需要使用system.js？

Answer 1

的WebPack VS汇总

的WebPack产生了比汇总稍大束。

这种差异可以通过Webpack添加到每个捆绑模块的额外开销来解释。

的WebPack包装在一个新的功能范围 每一个模块，而汇总把一切都在一个单一的功能范围

另一个区别是，汇总支持树摇晃。

树摇动是确保未使用的代码不包含在该包中的过程。在这种情况下，这意味着从Angular框架中省略任何未使用的代码。

不过，在我们判断Webpack之前，需要指出的是Webpack比Rollup功能更丰富。

Webpack弥补了具有更大灵活性的稍大的包装尺寸。其中一个例子是代码拆分，可用于延迟加载。

汇总不支持代码拆分，因此您仅限于单个文件包。这可能会成为一个问题，因为您的应用程序的增长超出了单一文件下载的实际范围。 Webpack将允许您将包分成多个文件并按需延迟加载。

AOT VS JIT

随着AOT，编译器在使用一组文库的构建时间运行一次;有JIT它运行用于使用一组不同的库

的当使用角-CLI在发展--aot标志被设置为false默认在运行时每个用户每一次，而在生产true。

AOT编译和树木抖动比开发实际需要更多的时间。因此，它在发展最好JIT编译和部署到生产环境之前切换到AOT编译。

使用SystemJS

的JIT版本依赖SystemJS的加载单独的模块。它的脚本出现在它的index.html中。

AOT版本将整个应用程序加载到单个脚本aot/dist/build.js中。它不需要SystemJS，因此脚本不存在于其index.html

为什么不使用webpack呢？

回答：因为我们想要支持树木摇动，利用ES2015模块的巧妙设计，并且生产中有更小的捆绑。在开发过程中，我们不太担心捆绑包的大小，在服务器端渲染代码分割是一个非常棘手的问题，Rollup不支持它。同样，Rollup不会执行热模块替换（HMR），有些东西只是不会转换成ES2015，而webpack会以沉着的方式处理您投入的所有内容。

注意：不仅Angular，而且Ember，React和Vue也使用Rollup进行生产建设。

参考文献：Angular Docs，

Webpack vs Rollup