Escribir en frente
Recientemente, me encontré con algo de carga de contenido en el empaque modular angular en el trabajo. Sentí que tenía algunas trampas en el medio, así que lo marcé aquí.
Antecedentes del proyecto:
El proyecto utiliza principalmente AngularJS como marco frontal. Cuando se lanzó el proyecto antes, todos los scripts frontales se empaquetarían y se comprimirían en un archivo. Se cargará cuando se acceda por primera vez a la página, lo que resulta en una carga inicial lenta de la página. Sobre esta base, se propone cargar bajo demanda, es decir, los scripts del módulo se cargarán solo cuando el usuario acceda a un determinado módulo.
Herramientas:
El proyecto utiliza el empaque Grunt de acuerdo con las especificaciones de AMD, utiliza Grunt-Contrib-Requirejs para comprimir y fusionar módulos, y utiliza oclazyload para completar la carga perezosa del módulo angular.
Proceso del proyecto:
Envasado de módulos
El código en el proyecto se escribe básicamente de acuerdo con la especificación AMD, y Grunt-Contrib-Requirejs se usa para comprimir cada módulo en un archivo JS.
Pregunta 1: En el código del proyecto, cada módulo dependerá de bibliotecas de terceros/servicios públicos en el proyecto/instrucciones públicas en el proyecto. Si esta parte del contenido no se procesa, Grunt-Contrib-Requirejs cargará todos los módulos de los que depende cuando comprimir cada módulo, y luego lo comprimirá en el mismo archivo JS.
Respuesta: Comprima la biblioteca de terceros/servicios públicos e instrucciones en tres módulos, y luego retírela usando "excluir" del script de empaque de cada módulo. Como se muestra en la figura a continuación:
Cabe señalar que el nombre del módulo del módulo público debe tener un archivo JS con el mismo nombre en la ruta correspondiente.
Cargar a pedido
Después de empacar el script en archivos JS por módulo, el siguiente paso es cargar diferentes módulos de acuerdo con las solicitudes de usuario. El proyecto utiliza UI-Router para manejar saltos de enrutamiento. Puede comenzar desde la ruta para completar la carga perezosa de módulos.
El método específico es: cuando el usuario opera el salto de ruta, el módulo al que pertenece el usuario se carga de acuerdo con el estado al que el usuario desea saltar. Según esto, se debe agregar un mapeo entre el estado y el módulo. Al principio, es necesario cargarlo con requisitos. Se encuentra que el script se puede cargar, pero los controladores/servicios/filtros registrados en Angular no funcionan. La investigación encontró que los servicios como los controladores registrados por Angular después de llamar al método de arranque no se volverán a llamar. Según esto, OclayLoad se introduce a la carga (OclayLoad tiene algunas inyecciones y modificaciones en el código fuente angular).
Hasta ahora, la carga a pedido se ha implementado básicamente, pero todavía hay varios problemas:
Dependencias del proyecto entre módulos
Debido a que hay fuertes dependencias entre proyectos entre algunos módulos, el procesamiento es agregar dependencias entre los módulos en el archivo de configuración. Antes de cargar un módulo, verifique si tiene un módulo dependiente. Si es así, el módulo dependiente se cargará primero. Después de cargar el módulo dependiente, se cargará el módulo de corriente.
Carga perezosa de instrucciones;
En Angular, $ compile se puede utilizar para implementar la interdependencia entre las instrucciones. El procesamiento de esto es configurar el nombre de la instrucción y la dependencia del módulo de instrucción. Cuando se usa una determinada instrucción, el módulo se carga primero y luego se ejecuta el método de compilación. Esta solución puede resolver la mayoría de las dependencias de instrucciones.
La ubicación de las instrucciones. La mayoría de los proyectos usan páginas largas, cada página larga se divide en varias áreas, y cada área es un comando. Habrá un problema al usar la intercepción, es decir, el tiempo de carga de cada instrucción es diferente. Los comandos que regresen primero se agregarán primero al DOM, lo que resulta en la incertidumbre en el diseño de la página. La solución es utilizar el mecanismo de Faffer y después de todas las instrucciones se cargan/compilan, agregue la ejecución al árbol DOM.
Dependencias entre directivas: también hay dependencias de proyectos entre directivas. La solución a esto es fusionar las instrucciones interdependientes en un módulo y empaquetarlas en el mismo archivo de script. Esta solución puede resolver la mayoría de las dependencias de la instrucción, pero no puede resolver las dependencias durante el proceso de inicialización. Puede haber una cierta instrucción compilada, y las dependencias de la instrucción aún no se han compilado. Para un ejemplo tan súper especial, solo se cargan el script y la plantilla cuando se inicializa la página.
Los anteriores son los problemas encontrados a lo largo del proceso del proyecto. Básicamente, cada vez que avanzas, estás luchando con el pozo. Muchas cosas son la primera vez que entras en contacto con ellas, y siento que he aprendido algo. Las soluciones a muchos problemas pueden no ser muy claras. Otros han encontrado todos los problemas anteriores. Siempre que use bien el motor de búsqueda y lea/comprenda el código de otras personas usted mismo, todos los problemas se pueden resolver con éxito.
Algunas trampas sobre la carga perezosa angular son todo el contenido que comparto con ustedes. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.