Cómo implementa Vue.js el análisis de carga diferida del enrutamiento

La carga diferida también se denomina carga diferida. No sé si ha descubierto en el trabajo que cuando su SPA (aplicación de página única) se vuelve compleja, el paquete Javascript empaquetado y construido se volverá tan grande que afectará seriamente el tiempo de carga de la página. Afortunadamente: vue-router admite el sistema de carga de módulos asíncrono integrado de WebPack. Por lo tanto, los componentes de ruta que se utilizan con menos frecuencia no necesitan empaquetarse en paquetes y pueden simplemente cargarse según sea necesario cuando se accede a la ruta. Sin más preámbulos, echemos un vistazo al proceso de implementación detallado:

Uso

Supongamos que su configuración de enrutamiento es la siguiente:

importar página principal desde ' ./ rutas/MainPage.vue'

importar OtherMassivePage desde './routes/OtherMassivePage.vue'

const rutas = [

{ ruta: '/ main' , componente: MainPage },

{ ruta: '/other', componente.

En pocas palabras, puedes usar require.ensure en lugar de importar. Le ayuda a dividir el componente OtherMassivePage y todas sus dependencias en un fragmento separado.

Ahora reinicia tu aplicación y verás que nada ha cambiado. Sin embargo, cuando abra las herramientas de desarrollador, seleccione Verificar red y acceda a la ruta /otra nuevamente, verá un nuevo archivo cargado.

importar página principal desde './routes/MainPage.vue'

const OtherMassivePage = r => require.ensure([], () => r(require('. / rutas/OtherMassivePage.vue')))

const rutas = [

{ ruta: '/main', componente: MainPage },

{ ruta: '/other', componente.OtherMassivePage }

]

Sí, parece un poco raro, pero créeme, no es tan malo.

Otro método consiste en definir el componente correspondiente a la ruta como un componente asíncrono.

Escribe así:

const OtherMassivePage = resolve => {

// La matriz vacía se usa para especificar las dependencias que este componente de enrutamiento necesita cargar

require.ensure([], () => {

resolve(require('. /routes/OtherMassivePage.vue'))

})

}

Sin embargo, será mejor que no utilice este enfoque ajustado porque WebPack utiliza análisis estático para detectar y dividir fragmentos. Una mejor práctica es escribirlos en una línea para minimizar el uso de espacio.

Dividir bloques por componentes

A veces, queremos encapsular todos los componentes bajo una ruta determinada en el mismo bloque asíncrono.

Simplemente nombre el bloque, usando el tercer argumento para require.ensure como nombre del bloque:

// Ambas rutas están empaquetadas en el mismo bloque y acceder a cualquiera de las rutas provocará una carga diferida. Componentes de esta ruta

const OtherMassivePage = r => require.ensure([], () => r(require('./routes/OtherMassivePage.vue')),'big-pages')

const WeightLossPage = r => require.ensure([], () => r(require('. /routes/WeightLossPage.vue')), 'big-pages')

A diferencia muchas otras tareas de WebPack, este enfoque es sorprendentemente simple y produce resultados sorprendentemente útiles. Si mantiene una aplicación grande de una sola página que se ha vuelto inflada y difícil de manejar, recomendaría este enfoque sin dudarlo.

Autor: Joshua Bemenderfer

Publicado originalmente en: lazy-loading-routes

Traducido por jeneser

Resumen