我正在浏览更新的 Angular 文档，发现他们现在已经改变了他们的方法。早些时候是这样的：
ng eject命令生成 webpack.config.js。现在，他们正在使用 rollup 和 system.js。
这背后有什么具体原因吗？对于服务器端渲染，它也提到了使用 webpack。为什么不同时使用 webpack？还提到 angular-cli 在后台使用 webpack，那么为什么需要使用 system.js？
Webpack vs Rollup
Webpack produced a slightly bigger bundle than Rollup.
This difference can be explained by some extra overhead added by Webpack to each bundled module.
Webpack wraps every module in a new function scope whereas Rollup puts everything in a single function scope
Another difference is that Rollup supports Tree Shaking.
Tree Shaking is the process of ensuring that unused code is not included in the bundle. In this case that means omitting any unused code from the Angular framework.
Still, before we judge Webpack, it's important to point out that Webpack is much more feature rich than Rollup.
Webpack makes up for the slightly bigger bundle size with more flexibility. One example of this is code splitting which can be used for lazy loading.
Rollup does not support code splitting, so you are limited to a single file bundle. This might become an issue as your application grows beyond what is practical as a single file download. Webpack will let you split the bundle into multiple files and lazy load on demand.
AOT vs JIT
With AOT, the compiler runs once at build time using one set of libraries; with JIT it runs every time for every user at runtime using a different set of libraries
When using angular-cli in development --aot flag is set to false by default, while true in production.
AOT compilation and tree shaking take more time than is practical for development. So, it's best to JIT compile in development and switch to AOT compilation before deploying to production.
Use of SystemJS
The JIT version relies on SystemJS to load individual modules. Its scripts appear in its index.html.
The AOT version loads the entire application in a single script, aot/dist/build.js. It does not need SystemJS, so that script is absent from its index.html
Why not use webpack for both?
Answer: Because we want to support Tree shaking, taking advantage of the ingenious design of ES2015 modules and have smaller bundle in production. While in development we are less worried about the bundle size, in and server side rendering code-splitting is a much hairier problem, Rollup doesn’t support it. Similarly, Rollup doesn’t do hot module replacement (HMR),some things just don’t translate to ES2015, whereas webpack handles everything you throw at it with aplomb.
Note: Not only Angular, but Ember, React and Vue are also using Rollup for building in production.
References: Angular Docs,