What Is Angular Chunks


What’s in My Angular Chunks?

What's in My Angular Chunks?
Angular’s Lazy Loading is a super powerful feature. By splitting your code into modules, and loading those modules only when needed by the current route, your users get the best of both worlds in terms of a single cohesive application, while only loading the code needed for their current experience.
But what happens when Angular and the CLI generate one of these lazy-loaded chunks? Let’s dig into one and find out.
I’ve built an “AboutModule” and an “AboutComponent” which is routed to by default with the empty path. The code itself is about 1K before compression and is actually pretty straightforward.
Here’s a lazy-loaded chunk of JavaScript generated byng build -prod. I’ve added comments to explain what’s going on in each piece.

Let’s talk about code splitting in Angular, lazy-loading and a sprinkle of Webpack. Code splitting allows us to essentially break our codebase down into smaller chunks and serve those chunks on demand, which we call “lazy loading”. So, let’s learn how to do it and some of the concepts/terminology behind it.

A Webpack loader for Angular that allows async importing of chunks, especially useful for fetching and using entry components across feature modules

Lazy loading

This is where “on-demand” comes into play. Lazy loading is the process of taking already “code split” chunks of our application, and simply loading them on demand. With Angular, the router is what allows us to lazy load. We call it “lazy” because it’s not “eagerly” loading – which would mean loading assets upfront. Lazy loading helps boost performance – as we’re only downloading a fraction of our app’s bundle instead of the entire bundle. Instead, we can code split per with Angular, and we can serve them lazily via the router. Only when a specific route is matched, Angular’s router will load the code split module.

0.da70.chunk.js

// Wrap my code via webpack and JSONP so that it can be loaded and executed from the server.
webpackJsonp([0], {
  c7AP: function(n, u, l) {
      "use strict";
      function t(n) {
          // Here we see my "about works" template and the wrapping tag whitespace
          return r._27(0, [(n()(),
          r._14(0, null, null, 1, "p", [], null, null, null, null, null)), (n()(),
          r._26(null, ["\n  about works!\n"])), (n()(),
          r._26(null, ["\n"]))], null, null)
      }
      // Here we see my selector
      function o(n) {
          return r._27(0, [(n()(),
          r._14(0, null, null, 1, "app-about", [], null, null, null, t, _)), r._12(114688, null, 0, c, [], null, null)], function(n, u) {
              n(u, 1, 0)
          }, null)
      }
      // This is an ES Module
      Object.defineProperty(u, "__esModule", {
          value: !0
      });
      var r = l("/oeL")
        , e = function() {
          function n() {}
          return n
      }()
        , c = function() {
          function n() {}
          return n.prototype.ngOnInit = function() {}
          ,
          n.ctorParameters = function() {
              return []
          }
          ,
          n
      }()
      // Set the properties of the Component
        , i = []
        , _ = r._11({
          // View Encapsulation: Emulated
          encapsulation: 2,
          // No styles this time (empty array)
          styles: i,
          data: {}
      })
        , a = r._9("app-about", c, o, {}, {}, [])
        , f = l("qbdv")
        , p = l("BkNc")
        , b = function() {
          function n() {}
          return n
      }();
      // Here we have my NgModule
      l.d(u, "AboutModuleNgFactory", function() {
          return s
      });
      var s = r._10(e, [], function(n) {
          // My ngModule imports some things and declares some things
          return r._23([r._24(512, r.k, r._7, [[8, [a]], [3, r.k], r.E]), r._24(4608, f.i, f.h, [r.A]), r._24(512, f.b, f.b, []), r._24(512, p.l, p.l, [[2, p.q], [2, p.k]]), r._24(512, b, b, []), r._24(512, e, e, []), r._24(1024, p.i, function() {
              // Here we see my simple routing config
              return [[{
                  path: "",
                  component: c
              }]]
          }, [])])
      })
  }
});

Leave a Reply

Your email address will not be published. Required fields are marked *