首页 文章

AngularCli构建和服务器--aot vs --prod

提问于
浏览
5

我正在使用commonjs为JiT转换angular2应用程序,并使用旧方法手动配置aot(两个index.html文件,两个main.ts文件等)到angular4 cli模板(ng new appName) .

2/4之间的cli似乎发生了很大的变化 . 观看了一些youtube视频,用ng cli创建了一个新应用程序,我发现ng build和ng都支持--prod和--aot标志,但生成的webpacks在使用两个不同的标志时大小不同 .

有什么区别

ng build --prod

ng build --aot

然后为服务:

ng serve --prod

ng serve --aot

似乎prod捆绑比捆绑小,但为什么?

5 回答

  • 7

    来自Bundle size of “ng build --prod” smaller than “build --prod --aot

    如果您使用的某些库不支持AoT(并发布UMD软件包),则可能会发生这种情况 . 原因是我们无法优化纯JavaScript的组件 . 不幸的是,这不是我们可以解决的问题 .

    这些库需要公开ES2015模块,删除它们的装饰器,并且它们的组件/模块已经被AoT编译 . 我们正在制定库的指南,以支持JIT和AoT编译 .

    此外,有时使用某些模板,AoT大小可能比JIT大 . gzip压缩版本应该是另一种方式,因为大多数AoT内容都是反复重复的相同语句 .

    尽管捆绑包较大,但引导时间应该明显更快 .

  • 1

    --prod - 应用uglify和minify来减少捆绑,以及在 生产环境 模式下进行角度工作,从而减少角度编译器提供的运行时警告,同时提高性能 .

    --aot - 当我们服务于角度项目时,所有角度文件都下载到浏览器上,它将在浏览器上编译并执行应用程序,但在 aot 整个应用程序中传送到浏览器进行预编译,从而提高性能

    build - 将捆绑文件并将其放在dist文件夹中,以便我们可以将它们用于服务器上的部署 .

    serve - 将在lite服务器上运行应用程序 .

  • 0

    --prod打开AOT,你不需要通过两个选项 . 请参阅文档的此部分:https://github.com/angular/angular-cli/wiki/build#--dev-vs---prod-builds

  • 1

    ng build –prod OR ng build

    使用--prod标志允许Angular进行提前编译(AOT) .

    AOT Ahead of Time Compilation

    在浏览器下载并运行该代码之前,Angular Ahead-of-Time(AOT)编译器会在构建阶段将Angular HTML和TypeScript代码转换为高效的JavaScript代码 .

    Advantages of AOT:

    1-在浏览器上运行之前突出显示编译错误,运行时错误和异常,因此命名为Ahead Of Time(AOT) .

    2-如果在项目中使用ng build来构建应用程序,如果您在构建目录中注意到vendor.bundle.js和vendor.bundle.js.map文件的文件大小,那么它将在MBS中下载到浏览器并使我们的应用程序太负载 .

    但另一方面,如果您使用标志ng build -prod,您会注意到此文件过度减少到200 KBS意味着大小减少100倍或更多倍 .

    因此,我建议您使用--prod标志在构建Angular应用程序时使用AOT .

    如果您想进一步阅读和有关此主题的信息,请参阅以下网站:https://angular.io/guide/aot-compiler

  • 11

    --prod使dist文件夹具有部署应用程序所需的一切,这意味着它包含所有js包

相关问题