如何减少vendor.js在ng服务中的应用

Question

我目前正准备重新设计。这需要进行许多scss更改并重新加载网站。我想利用使用live的ng nerve命令。

有人知道我如何运行ng serve并缩小vendor.js文件吗？当我使用ng serve --prod时，它使vendor.js小型化.但建造它需要10-15秒。

目前，我的vendor.js文件是8.9mb不受限制的，它需要2-3秒才能在开发中重新加载。

有人有主意吗？

ng serve --prod虽然可以缩小，但每次只需2-3分钟.

注:目前使用角6.X

Answer 1

我观察到在Visual代码中使用ng serve重新编译角项目。在对项目进行更改时，不会重新编译Vendor.js。它只在ng服务的第一次执行过程中编译。

如果希望在开发模式下提高编译速度，则可能需要考虑实现延迟加载。如果实现了延迟加载，那么每当您对组件进行更改时，只会重新编译该组件的模块。从长远来看，这可以极大地节省编译时间。

这发生在我的第一个角项目(一项学校作业)中。长话短说，我读过关于延迟加载的文章，将其实现到管理仪表板模块，但我的朋友拒绝将其实现到用户模块，因为他将不得不转移大量代码并重组项目。随着项目的扩大..。很明显懒惰装载是多么的重要.

第一个编译：(我会解释一下)管理-*模块是属于管理模块的功能模块。用户模块中的每个组件:侧栏、导航条、过滤器、搜索等等，都属于用户模块，因此它比admin和它的特性模块大得多，3.46MB。

​

​

例如，在用户模块中的一个组件中注释3行html将重新编译整个用户模块并花费5523 of。如果我正在运行photoshop或其他内存密集型程序，它将花费更长的时间！

​

​

例如，注释3行html并在管理仪表板模块中重新编译一个功能模块需要< 1s：

​

​

我对角度还不熟悉，但吸取了教训:懒惰加载，确实节省了用户的带宽和您的开发时间=]

Answer 2

您的问题的解决方案并不是您所认为的那样，这是所有前端框架和webpack构建的一个常见问题。

Webpack为解决这一问题提供了一个优雅的解决方案。它叫热模块更换。也就是说，webpack将动态更改您的代码和样式，而不需要重新加载页面。角需要一些定制的设置，这是一步一步概述。

https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/configure-hmr.md

Answer 3

我认为你是以错误的方式面对这个问题。

我知道您正在重新设计一个有角度的应用程序，并使用ng serve在浏览器中实时查看您的工作，但是您的构建时间很慢，因为每次更改都要重新构建vendor.js。

问题不在于vendor.js很大(总是如此)，而是建立在每个更改之上。正如其他答案所提到的，对应用程序代码的更改不应该(通常)触发vendor.js的重新构建。这表明了另一个问题，可能是在干扰scss导入。

而且，使用ng serve --prod可能根本解决不了您的问题。构建时间比非优化的构建要高，我不认为您的问题是通过缩小代码来解决的(同样，您的问题在构建时)。

无论如何，如果您想继续您原来的问题，运行ng服务并将vendor.js文件缩小，您将需要创建一个自定义webpack配置，查看以下站点：

• https://dev.to/meltedspark/customizing-angular-cli-6-buildan-alternative-to-ng-eject-1oc4
• https://angular-guru.com/blog/angular-webpack

在最后一个站点中，您可以找到与vendor.js相对应的webpack配置。

希望这有帮助，我需要更多的细节来提供一个更好的答案。