CODEWITHSUNDEEP
angularangular7
Jozef Morvay
Jozef Morvay

Reputation: 131

How to further reduce Angular 7 build size, when all modules are already being lazy loaded?

My initial production build size of main.js was 1.5M. Clearly unacceptable, the cold start loading time was around 17 seconds. So I checked some online sources on how to tackle this, and employed lazy loading of modules. That reduced the main.js to 541kB. An improvement to be sure, but I'd like to squeeze it further, possibly down to 200 or so kB. I start the build process by using npm run build (I am primarily a java dev, so I don't know if this is the right way), which in turn calls ng build --prod. Now here come the questions:

Does the --prod flag include all the optimizations I could possibly want? Or should I enable more of them explicitly by using more command options. The official documentation on this is not very clear to me. Specifically, it says :

When true, sets the build configuration to the production target. All builds make use of bundling and limited tree-shaking. A production build also runs limited dead code elimination.

Why only limited? Don't I want the full tree shaking and dead code elimination? Are there any other flags besides --prod I should know of? It appears that options such as --buildOptimizer and others are set to true in angular.json for prod builds, so it seems I can't get any more benefits by tweaking the build process. AOT, uglification, etc. should also be used by default.

What other techniques could I possibly use? I could of course use gzip on my server, but that is outside of the scope of angular itself. I find it hard to believe that my simple app could be that large, I am probably missing something.

Upvotes: 0

Views: 411

Answers (1)

user4676340
user4676340

Reputation:

541kB is peanuts.

As you have said, you have several flags in the angular.json files that are enabled when using the --prod flag. By default, that would be 

          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "aot": true,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true,
          "budgets": [{
            "type": "initial",
            "maximumWarning": "2mb",
            "maximumError": "5mb"
          }]

You can find all the possible flags here

In the end, if you want to further reduce the size of your main script, you will have to do it by hand : Angular optimization can go so far, the rest depends on how you code.

For instance, factorizing your code, removing the unused code, reusing common components, reducing the size of the initial module, reduce the amount of repeated HTML & CSS ... It all comes down to how many letters are in your file, so the fewer letters you have, the lighter the main script will be.

Finally, somme techniques are available to you to further increase the performance for the first rendering of your application, such as service workers or server-side rendering.

Upvotes: 1

Related Questions