How to check if Angular Module Lazy Loading works on Chrome?

Question

如何检查使用 Chrome 开发工具打开的模块的 js 文件是否延迟加载？

Answer 1

According to Angular's Lazy Loading guide :

You can check to see that a module is indeed being lazy loaded with the Chrome developer tools. In Chrome, open the dev tools by pressing Cmd+Option+i on a Mac or Ctrl+Alt+i on a PC and go to the Network Tab.

Once you make an action that loads a module lazily, you should be able to see a Chunk getting loaded in the Network Tab. Something like this:

NOTE: Another important check is to make sure that a module loaded lazily is not loaded again. To confirm, move to a different route and then click on the Action again, and this time it won't make a network call to load the chunk since it has already been loaded.

Answer 2

To make sure Lazy Loading is working. In chrome,

Step 1 - open developer tools by pressing F12 or Ctrl + Shift + i

Step 2 - click the Network tab.

When you navigate to the lazy URL, you should see a 0.chunk.js file rendered.

Answer 3

besides the other answers which is correct, you can use Augury tool to determine which module and component loaded lazily, Angular Augury is A Chrome and Firefox Dev Tools extension for debugging Angular applications.

• after you install it and run your angular app you can go to your developer tools and click on Augury tab it will show you Component Tree at first like this:

• you then click on Router Tree tab and that is the interesting part which shows you which module/component is loaded dynamically and which is loaded lazily as following:

Augury also helps Angular developers visualize the application through component trees, and visual debugging tools. Developers get immediate insight into their application structure, change detection and performance characteristics.

Answer 4

There are many ways to check this out.

1. After ng serve, chunk of modules (for which lazy-loading is applied) will be display in terminal. image showing chunk of file

2. Angular augury under Router Tree, it will show ([lazy]) for the lazy loaded modules. But make sure you have not imported that modules in app.module.ts or imported independent module unnecessarily, because it will load those file (read point 3)

3. In web developer tools look for file/component (for which lazy-loading is applied). If the file is present even before loading of the module then lazy loading is not working (component shouldn't be visible before module is loaded). The same file will be shown after that module has been loaded.

let's say project contain one modules -> abc.module.ts abc.module.ts contains two component abc1.component.ts and abc2.component.ts If lazy loading is working then abc1 and abc2 shouldn't be shown in the search result on searching files in web developer tools (before loading of abc module). After loading of abc module, if you again search it should be shown.