Angular:如何构建与ng服务创建的文件相同的文件

时间:2018-08-29 18:00:50

标签: javascript angular npm webpack angular-cli

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

3 个答案:

答案 0 :(得分:2)

很遗憾,您不能这样做,因为ng serve在内存中起作用,并且不会写入磁盘。

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

答案 1 :(得分:1)

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

请参见此处有关库的信息:https://github.com/angular/angular-cli/wiki/stories-create-library

答案 2 :(得分:0)

我总是使用此命令行来获取 raw 文件,而无需进行优化(但构建时间较短):

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

请考虑在scripts部分中将其添加到package.json中。

请参阅the official angular cli build documentation中的命令行选项的完整列表。


AOT是prod的默认设置,而不是servebuild的默认设置。因此,通常不必手动将其关闭:

  

当您运行仅构建或本地构建和服务的CLI命令时,JIT编译是默认设置

     

[...]

     

-prod元标记默认情况下会与AOT一起编译。

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