角AoT编译

Question

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

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

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

这背后有什么具体原因吗？而对于服务器端渲染，它也提到了使用webpack。为什么不同时用webpack呢？也有人提到，角-cli使用webpack下的引擎盖，那么为什么有必要使用system.js？

Answer 1

Webpack对卷起

Webpack生产了一个比卷车稍大的包。

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

Webpack将每个模块封装在一个新的功能范围内，而Rollup则将所有内容都放在一个功能范围内。

另一个不同之处在于，Rollup支持树抖动。

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

不过，在我们评判Webpack之前，重要的是要指出Webpack的特征比卷车丰富得多。

Webpack以更大的灵活性弥补了稍大一点的包袱。其中一个例子是代码分割，它可以用于延迟加载。

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

AOT与JIT

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

在开发中使用角-cli时，默认情况下--aot标志设置为false，而在生产中则设置为true。

AOT编译和树的抖动比开发所需的时间更长。因此，最好在开发中编译并在部署到production.之前切换到AOT编译。

使用SystemJS

JIT版本依赖于SystemJS来加载各个模块。它的脚本出现在它的index.html中。

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

为什么不同时使用webpack呢？

回答：是因为我们希望支持树抖动，利用ES2015模块的巧妙设计，并且在生产中有更小的包。虽然在开发中，我们不太担心包的大小，在和服务器端呈现代码分裂是一个更麻烦的问题，汇总不支持它。类似地，Rollup不做热模块替换(HMR)，有些东西只是不能转化为ES2015，而webpack处理你扔给它的所有东西都很轻松。

注意:不仅有角度，还有Ember，React和Vue也在生产中使用卷取。

参考资料：角舵，

Webpack对卷车