为什么在 Angular 2 及以上版本中发出“ng build --prod”命令时会生成 Chunk 文件

Question

目前正在使用高级 ui 框架（例如版本 2 和 4 的角度）实现我的用户界面代码。

每当我想将代码部署到服务器时，我需要通过发出以下命令“ng build --prod”来构建项目，从而生成许多块文件。

我想知道为什么会生成这些块文件。

Answer 1

因为 Angular 是单页面应用程序。

当您为应用程序提供服务时，也会生成这些块。这是我的

ng serve

命令的结果（没有标志，只是服务）：

** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** 
Date: 2018-04-10T12:09:49.010Z                                                                               
Hash: 7e4a7d27b89ee3d81e37                                                                                   
Time: 15613ms                                                                                                
chunk {administration.module} administration.module.chunk.js () 9.22 kB  [rendered]                          
chunk {exploitation.module} exploitation.module.chunk.js () 1.26 MB  [rendered]                              
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]                                          
chunk {main} main.bundle.js (main) 625 kB [initial] [rendered]                                               
chunk {polyfills} polyfills.bundle.js (polyfills) 623 kB [initial] [rendered]                                
chunk {scripts} scripts.bundle.js (scripts) 562 kB [initial] [rendered]                                      
chunk {source-post.module} source-post.module.chunk.js () 1.42 MB  [rendered]                                
chunk {styles} styles.bundle.js (styles) 653 kB [initial] [rendered]                                         
chunk {vendor} vendor.bundle.js (vendor) 18.9 MB [initial] [rendered]                                        

webpack: Compiled successfully.   

如您所见，块也在那里生成。

这些块代表纯 Javascript 代码。在此代码中，您将找到您的样式、模板以及所有 Angular 功能（组件、服务...）。

Angular 使用这些块来渲染动态页面。在幕后，当您在 SPA 上导航时，您实际上永远不会离开

index.html

页面。该文件的内容将被您的块替换。

Answer 2

这些块是由 webpack 制作的，它们用于将代码从服务器加载到浏览器。

您可以在 Webpack 上的官方 Angular docs 中阅读有关与 Angular 集成的更多信息。

Answer 3

我正在使用 Angular 版本 17 并面临类似的问题 什么对我有用

正在删除默认导入的“@angular/platform-browser/animations”