如何最小化ng serve上的vendor.js

Question

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

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

当前，我的vendor.js文件未缩小8.9mb，在开发中重新加载它需要2-3秒。

有人有想法吗？

ng serve --prod会尽量缩小，每次需要2-3分钟。

注意：当前正在使用Angular 6.X

Answer 1

我观察到使用ng serve和Visual Studio Code重新编译角度项目。对项目进行更改时，不会重新编译Vendor.js。仅在第一次执行ng serve时进行编译。

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

在我的第一个Angular项目（一项学校作业）中，这发生在我身上。长话短说，我已经读过关于延迟加载的内容，并将其实现到管理仪表板模块，但是我的朋友拒绝将其实现到用户模块，因为他将不得不转移很多代码并重组项目。随着项目的规模扩大...显而易见，延迟加载有多么重要...

第一次编译：（我会解释一下）manage- *模块是属于admin模块的功能模块。用户模块中的每个组件：侧边栏，导航栏，过滤器，搜索等都属于用户模块，因此，与admin及其功能模块相比，它的体积要大得多，为3.46MB。

例如在用户模块的组件之一中注释3行html会重新编译整个用户模块，耗时5523ms。如果我正在运行photoshop或其他占用大量内存的程序，则需要更长的时间！

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

我仍然对Angular还是陌生的，但经验教训：进行延迟加载，它确实节省了用户的带宽和您的开发时间=]

Answer 2

解决问题的方法并不完全是您所想的，这是所有前端框架和Webpack构建中的常见问题。

Webpack提供了一个优雅的解决方案来处理此问题。它称为hot module replacement。即webpack会在不重新加载页面的情况下即时更改您的代码和样式。 Angular需要一些定制来进行设置，在此逐步介绍。

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配置

希望这会有所帮助，我需要更多详细信息才能提供更好的答案。

Answer 4

首先，为什么您如此急需它？是的，vendor.js不会被缩小，但是也不会在SCSS /视图级更改时重新编译，对吗？ 因此，在练习结束时，您将获得的好处仅仅是第一次加载〜2MiB文件与8.9MiB文件，这是微不足道的，因为您可以选择启用浏览器的BFcache（通过不检查DevTools>网络下的“禁用缓存”）

如果必须这样做，我想一种方法是将Hot Module Replacement用于您要处理的组件模块。

编辑：

我个人认为，对于小的视觉HTML / CSS更改，重载太多了。有时我会“检查”元素，并通过devTools更改HTML / CSS并将HTML / CSS复制到临时位置。然后，我对组件进行5-6项更改，然后保存并重新加载以进行验证。

“检查”元素并进行视觉更改（例如较小的CSS样式更改）并检查其外观和效果，总是更好的做法，而不是在实际代码中进行这些更改并等待整个重新构建周期只是为了看到CSS的微小变化。

Answer 5

您可以在应用中使用延迟加载来减小包的大小。这也提高了应用程序的速度。