Angular：如何构建与 ng serve 创建的文件相同的文件答案

【问题标题】：Angular: How to build files which are the same as the files ng serve createsAngular：如何构建与 ng serve 创建的文件相同的文件
【发布时间】：2019-02-04 14:35:16
【问题描述】：

我正在优化我的 Angular 应用程序并使用 webpack-bundle-analyzer 来检查包的大小。当我运行 ng build --stats-json 时，它会创建 bundle.js 文件并创建 webpack-bundle-analyzer 解析的 json 文件。这可以按预期工作，但是有没有一种方法可以在没有 ng build 执行的优化的情况下构建 Angular 应用程序，即获取与 ng serve 生成的文件相同的文件。我想要这个，因为我的应用程序非常大，并且在开发时重新加载它需要大约 15 秒。所以我也希望能够检查这些文件。

【问题讨论】：

ng build 默认进行开发构建，没有优化。 ng build --prod 使用所有优化进行生产构建。
它仍然做了一些优化。在我的 vendor.bundle.js 项目大小中，使用 ng build 时为 6.75 MB，使用 ng serve 时为 18.3 MB。
为什么不能使用源选项卡 > 并选择 webpack 并选择您的文件以检查在为您的 Angular 应用程序提供服务时哪个需要时间。您也可以使用网络选项卡清楚地查看哪个需要时间。？
@NasiruddinSaiyed 它仍然生成与ng build相同的文件
来自github.com/angular/angular-cli/wiki/build，“所有构建都使用捆绑和有限的tree-shaking”。所以我认为你不能得到完全相同的文件。但正如@RagavanRajan 评论的那样，您始终可以在浏览器的调试器中查看和分析ng serve 生成的文件

标签： javascript angular npm webpack angular-cli

【解决方案1】：

另一种优化应用程序的方法是将延迟加载模块与库结合使用。这真的会将您的应用程序拆分为单独的工件，从而减少您的加载时间。

在此处查看有关库的信息：https://github.com/angular/angular-cli/wiki/stories-create-library

【讨论】：

【解决方案2】：

我总是使用这个命令行来获取 raw 文件，没有优化（但构建时间更短）：

ng build --stats-json --source-map=false --build-optimizer=false

考虑将其添加到您的 package.json 中的 scripts 部分。

在the official angular cli build documentation 中查看命令行选项的完整列表。

AOT 是 prod 的默认值，但不是 serve 和 build。因此，您通常不必手动将其关闭：

JIT 编译是运行 build-only 或 build-and-serve-locally CLI 命令时的默认设置

[...]

--prod 元标志默认使用 AOT 编译。

https://angular.io/guide/aot-compiler

【讨论】：

这不会产生与serve 相同的文件

【解决方案3】：

很遗憾你不能，因为ng serve 在内存中工作，不会写入磁盘。

作为一种解决方法，您可以使用浏览器的调试器或访问 /webpack-dev-server 路径下的开发服务器（即，如果您在端口 4200 上运行 Angular，请转到 http://localhost:4200/webpack-dev-server）。

【讨论】：