Cuando vue-router es demasiado vago para cargar demasiados recursos por primera vez, ¿cómo lidiar con la baja velocidad?

Lo que les traigo esta vez es cómo lidiar con el problema de la velocidad lenta causada por demasiados recursos por primera vez en la carga diferida de vue-router. ¿Cuáles son las precauciones que se deben tomar cuando la carga diferida de vue-router procesa demasiados recursos por primera vez, lo que resulta en una velocidad lenta? A continuación se muestra un caso práctico. vamos a ver.

Para aplicaciones de una sola página como Vue, si no hay una carga diferida, los archivos empaquetados por webpack serán muy grandes, lo que provocará que se cargue demasiado contenido al ingresar a la página de inicio, lo que provocará una pantalla negra larga. Incluso si está cargado, no favorece la experiencia del usuario. El uso de la carga diferida puede dividir la página y cargarla cuando sea necesario, lo que puede compartir efectivamente la presión de carga en la página de inicio y reducir el tiempo de carga de la página de inicio.

En pocas palabras: si no cargas demasiados recursos a la vez, ¡tardará demasiado en ingresar a la página de inicio! ! !

Modo de carga diferida:

Importar Vue desde "vue"

Importar enrutador desde "vue router"

Vue.use(router )

//Utiliza carga diferida.

Exportar nuevo enrutador predeterminado ({

Ruta:[

{

Ruta: "/",

component:resolve = >Require(['@/components/index'], resolve)

}

]

}) carga no diferida Modo:

Importar Vue desde "vue"

Importar enrutador desde "vue router"

Importar índice desde "@/components/index"

Vue.use(router)

Exportar nuevo enrutador predeterminado ({

ruta:[

{

ruta:" /",

Componente: Índice

}

]

}) PD: Echemos un vistazo a la pereza de vue- carga de enrutamiento del enrutador.

Cuando se utiliza vue.js para escribir una aplicación de una sola página, el paquete JavaScript empaquetado será muy grande, lo que afectará la carga de la página. Podemos utilizar la carga diferida de rutas para optimizar este problema. Cuando usemos una ruta, cargaremos el componente correspondiente, lo que será más eficiente. El código de implementación es el siguiente:

Importar Vue desde "vue"

Importar enrutador desde "vue router"

Vue.use (enrutador)

Exportar nuevo enrutador predeterminado({

Ruta:[

{

Ruta: "/",

componente: resolver = & gt; require(['components/Hello.vue'], parse)

},

{

Ruta: "/about",

componente:resolve = & gt;require(['components/About.vue'], resolver)

}

]

}) Creo que después de leer este caso, dominas el método. Para obtener contenido más interesante, preste atención a otros artículos relacionados en Gxl.

Lectura recomendada:

Usando React Router v4 desde cero.

Cómo agregar etiquetas HTML dinámicamente usando JS