角度AoT编译

Question

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

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

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

这背后有什么具体原因吗？ 并且对于服务器端呈现以及它提到使用webpack。 为什么不同时使用webpack？ 还提到angular-cli在引擎盖下使用webpack然后为什么需要使用system.js？

Answer 1

Webpack vs Rollup

Webpack比Rollup产生了更大的捆绑。

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

Webpack将每个模块包装在一个新的函数范围内 而Rollup将所有内容都放在一个功能范围内

另一个区别是Rollup支持 Tree Shaking。

Tree Shaking是确保未使用的代码未包含在捆绑包中的过程。在这种情况下，这意味着从Angular框架中省略任何未使用的代码。

但是，在我们判断Webpack之前，指出Webpack比Rollup更丰富，这一点非常重要。

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

Rollup不支持代码拆分，因此您只能使用单个文件包。当您的应用程序超出单个文件下载的实际范围时，这可能会成为一个问题。 Webpack将允许您根据需要将捆绑包拆分为多个文件和延迟加载。

AOT vs JIT

使用AOT，编译器在构建时使用一组库运行一次;使用JIT，它在运行时每次为每个用户运行一组不同的库

在开发中使用angular-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