Write in front
Recently, I came across some content loading in angular modular packaging at work. I felt that I had some pitfalls in the middle, so I marked it here.
Project background:
The project mainly uses angularJs as the front-end framework. When the project was released before, all front-end scripts would be packaged and compressed into a file. It will be loaded when the page is first accessed, resulting in slow initial loading of the page. On this basis, it is proposed to load on demand, that is, the scripts of the module will be loaded only when the user accesses a certain module.
Tools:
The project uses grunt packaging according to AMD specifications, uses grunt-contrib-requirejs to compress and merge modules, and uses ocLazyLoad to complete the lazy loading of the angular module.
Project Process:
Module packaging
The code in the project is basically written in accordance with the AMD specification, and grunt-contrib-requirejs is used to compress each module into a js file.
Question 1: In the project code, each module will rely on third-party libraries/public services in the project/public instructions in the project. If this part of the content is not processed, grunt-contrib-requirejs will load all the modules it depends on when compressing each module, and then compress it into the same js file.
Response: Compress the third-party library/public services and instructions into three modules, and then remove it using "exclude" from the packaging script of each module. As shown in the figure below:
It should be noted that the module name of the public module needs to have a js file with the same name under the corresponding path.
Load on demand
After packaging the script into JS files by module, the next step is to load different modules according to user requests. The project uses ui-router to handle routing jumps. You can start from route to complete the lazy loading of modules.
The specific method is: when the user operates the route jump, the module to which the user belongs is loaded according to the state that the user wants to jump to. Based on this, a mapping between the state and the module needs to be added. At the beginning, it is necessary to load it with requireJS. It is found that the script can be loaded, but the controllers/services/filters registered in angular do not work. The investigation found that services such as controllers registered by angular after calling the bootstrap method will not be called again. Based on this, ocLazyLoad is introduced to load (ocLazyLoad has some injection and modifications to the angular source code).
So far, the loading on demand has been basically implemented, but there are still several problems:
Project dependencies between modules
Because there are strong dependencies between projects between some modules, the processing is to add dependencies between modules in the configuration file. Before loading a module, check whether it has a dependent module. If so, the dependent module will be loaded first. After the dependent module is loaded, the current module will be loaded.
Lazy loading of instructions;
In Angular, $compile can be used to implement interdependence between instructions. The processing of this is to configure the instruction name and the dependency of the instruction module. When a certain instruction is used, the module is loaded first and then the compilation method is executed. This solution can solve most instruction dependencies.
The location of instructions. Most of the projects use long pages, each long page is divided into several areas, and each area is a command. There will be a problem when using interception, that is, the loading time of each instruction is different. The commands that come back first will be append to the dom first, resulting in uncertainty in the page layout. The solution is to use the deffer mechanism and after all instructions are loaded/compiled, add execution to the dom tree.
Dependencies between directives: There are also project dependencies between directives. The solution to this is to merge interdependent instructions into a module and package them into the same script file. This solution can solve most of the instruction dependencies, but cannot solve the dependencies during the initialization process. There may be a certain instruction compiled, and the dependencies on the instruction has not yet been compiled. For such a super special example, only the script and template are loaded when the page is initialized.
The above are the problems encountered throughout the project process. Basically, every time you go forward, you are struggling with the pit. Many things are the first time you come into contact with them, and I feel that I have learned something. The solutions to many problems may not be very clear. Others have encountered all the above problems. As long as you use the search engine well and read/understand other people's code yourself, all problems can be solved successfully.
Some pitfalls about angular lazy loading are all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.