I am currently about to embark on a redesign. This requires many scss changes and reloading the website. I would like to take advantage of the ng nerve mand that uses live reload.

Does anyone know how I can run the ng serve and have the vendor.js file minified? When I use ng serve --prod it minifies the vendor.js... but it takes 10-15 seconds to build it.

Currently my vendor.js file is 8.9mb unminified and it's taking 2-3 seconds reach reload in development.

Anyone have ideas?

ng serve --prod while it does to minification, takes 2-3 minutes each time.

Note: Currently using Angular 6.X

I am currently about to embark on a redesign. This requires many scss changes and reloading the website. I would like to take advantage of the ng nerve mand that uses live reload.

Does anyone know how I can run the ng serve and have the vendor.js file minified? When I use ng serve --prod it minifies the vendor.js... but it takes 10-15 seconds to build it.

Currently my vendor.js file is 8.9mb unminified and it's taking 2-3 seconds reach reload in development.

Anyone have ideas?

ng serve --prod while it does to minification, takes 2-3 minutes each time.

Note: Currently using Angular 6.X

• javascript
• angular

• 2 Minifying vendor.js is not a putationally cheap task, which is why it takes long on ng serve --prod. There is most likely not a way to serve a minified version while also keeping build time low. – Woohoojin Commented Jun 7, 2019 at 14:24
• But vendor.js doesn't build each time with ng serve. Only main.js does. But it still serves up a non-minified vendor.js. – Phil Commented Jun 7, 2019 at 17:13
• You can also take a look at the preloadingStrategy medium./dailyjs/… – Sonu Kapoor Commented Jun 7, 2019 at 17:55
• 2 I'm curious why you want this – Robin Dijkhof Commented Jun 10, 2019 at 12:29
• 1 @Phil did you try ng serve --aot or if you want ng serve --aot --prod – Joel Joseph Commented Jun 13, 2019 at 8:48

5 Answers 5

I had observed the repilation of angular projects using ng serve with Visual Studio Code. Vendor.js is not repiled when you make changes to the project. It is only piled during the first execution of ng serve.

If you wish to improve pile speed in development mode, you might want to consider implementing lazy loading. If lazy loading is implemented, whenever you make changes to a ponent, only that ponent's module is repiled. This can greatly save pilation time in the long run.

This had happened to me in one of my first Angular projects (a school assignment). To cut the long story short, I had read about lazy-loading, implemented it to the admin dashboard module, but my friend refused to implement it to the user module because he would had to shift a lot of code around and restructure the project. As the project became bigger... it became evident how important lazy-loading can be...

First pilation: (I will explain a bit) manage-* modules are feature modules belonging to the admin module. Every ponent in the user-module: sidebar, navbar, filter, search, etc, all belongs to the user module, hence it's significantly larger, 3.46MB pared to admin and it's feature modules.

E.g. Commenting 3 lines of html in one of the ponent in user module repiles the entire user-module and takes 5523ms. If I am running photoshop, or other memory intensive programs, it'd take much much longer!

E.g. Commenting 3 lines of html and repiling a feature module in admin dashboard module takes < 1s:

I am still new to Angular but lesson learnt: do lazy-loading, it does saves user's bandwidth and your development time =]

The solution to your problem isn't exactly what you think it is, this is a mon problem across all front-end frameworks and webpack builds.

Webpack provides an elegant solution to handle this. It's called hot module replacement. I.e. webpack will change your code and styles on the fly without requiring to reload the page. Angular needs a bit of customisation to set this up which is outlined step by step here.

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

I think you are facing this issue in the wrong way.

I understand you are redesigning an angular app and using ng serve to see your work realtime in the browser, but you are suffering of slow build time as vendor.js is rebuilt on each change.

The problem is not that vendor.js is big (always is) but that is been built on each change. As other answers mentioned, changes on application code should not (usually) trigger the rebuild of vendor.js. This indicates another problem, probably you are messing something with scss imports.

Also, using ng serve --prod probably won't solve your problem at all. Build times are higher than non optimized builds and I don't think you problem was solved by minifying code (Again your problem is on the build time).

In any case, if you want to go ahead with your original question and run the ng serve and have the vendor.js file minified, you will need to create a custom webpack configuration, have a look on these sites:

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

In this last site, you can find the webpack configuration which corresponds to vendor.js

Hope this helps, I would need more details to provide a better answer.

Firstly, why do you need it so badly? Yes, vendor.js will not be minified, but it will not be re-piled on SCSS/view-level changes either, right? So, at the end of the exercise, the advantage you are going to receive is only about first-time loading a ~2MiB file vs an 8.9MiB file, which would be marginal since you can choose to enable the browser's BFcache (by NOT checking "Disable cache" under DevTools>Network)

If you must do it, I guess an approach would be to go with Hot Module Replacement for the Component's module you would be working on.

EDIT:

Personally, I find too many reloads for small visual HTML/CSS changes an overkill. Sometimes I "Inspect" the elements, and change the HTML/CSS via devTools and copy the HTML/CSS to a temp place. Then I make those 5-6 changes to the Components and save and reload to verify.

It's always a better practice to "Inspect" element and make the visual changes (like minor CSS style changes) and check how it looks then and there, instead of making those changes in your real code and waiting for a whole re-build cycle just to see a minor CSS change.

You can use lazy loading in your app to reduce the bundle size . It also increases the speed of the application .