Uso de webpack para combinar y empaquetar múltiples componentes en Vue.js y realizar carga diferida

Prólogo

Con la actualización de los dispositivos móviles, la mejora de la velocidad de la red, las exigencias de los usuarios para las aplicaciones web son cada vez más altas, y las funciones que deben proporcionar las aplicaciones web son cada vez más. El aumento de las funciones lleva a la consecuencia más directa de que los archivos de recursos son cada vez más grandes. Para mantener el código de cliente cada vez más grande, se propuso el concepto de modularización para organizar el código.webpack, como una herramienta de empaquetado modular, se ha vuelto cada vez más popular con la popularidad de react.

Al desarrollar proyectos con Vue, si se desea usar sus características de componentes de archivo único, es necesario usar webpack o browserify para empaquetar. Para aplicaciones grandes, para mejorar la velocidad de carga, se puede usar la función de división de código de webpack para empaquetar, generar módulos más pequeños y cargarlos según sea necesario, lo cual se describe en los documentos de Vue y vue-se describe en los documentos de router:Componentes Asincrónicos、Carga Perezosa。

La función de división de código de webpack puede usar la sintaxis especial de require.ensure de webpack o usar callback en estilo AMD-Sintaxis de require, con callback en estilo AMD-Ejemplo de sintaxis de require-

Registro global de Async Component:

let myAsyncComponent = resolución => {
 require(['./my-async-componente], resolución)
}
Vue.component('async-webpack-example', myAsyncComponent)

Registro local de Async Component, contenido del bloque script en un componente de archivo único:

let myAsyncComponent = resolución => {
 require(['./my-async-componente], resolución)
}
// Extensión de opciones de instancia de Vue, otras opciones se omiten
export default {
 components: {
 'async-webpack-example': myAsyncComponent
 }
}

Al usar vue-router, para lograr la carga asincrónica de componentes bajo diferentes rutas, se puede usar el mismo método para configurar la propiedad de componente del ítem de mapeo de rutas.

Aquí, myAsyncComponent se define como una función de fábrica, que solo se ejecuta cuando se necesita con Vue o vue-La función de devolución de llamada de resolución definida por router para analizar las opciones del componente (sí, en Vue y vue-router tiene dos funciones diferentes para analizar opciones de componentes (como parámetro de ejecución callback))-La función require (el parámetro de la función de callback de resolve es la opción del componente), de esta manera, al ejecutar el script de empaquetado, my-async-El archivo component.vue se empaquetará en un archivo individual y solo se cargará cuando se utilice este componente.

Cuando se requieren muchos componentes para cargar de manera asincrónica, se generarán más archivos individuales. Para el rendimiento del frente, aunque cada archivo es más pequeño, puede significar un mayor costo de conexión y desconexión de la red, por lo que en la práctica de la optimización del frente, generalmente es necesario encontrar un equilibrio entre el número de archivos y el tamaño de cada archivo.

Este artículo explica cómo combinar y empacar varios componentes en un solo archivo, por un lado, puede reducir el número de bloques de código, y por otro lado, si estos componentes empacados se utilizan repetidamente en diferentes lugares, debido al mecanismo de caché de Vue, puede acelerar la carga posterior de los componentes, y si estos componentes comunes no cambiarán por un largo tiempo (como componentes relacionados con UI), el archivo generado por el empaquetado también no cambiará por un largo tiempo, y se puede utilizar al máximo la función de caché del navegador para optimizar la velocidad de carga del frente.

Primero, aquí hay una imagen del efecto, cuando se utiliza vue-En la aplicación SPA del router, combina y empaca los componentes ComponentA, ComponentB, ComponentC y otros tres componentes en un solo archivo. Al cargar la página por primera vez, desde la interfaz de Network de la herramienta de desarrollador se puede ver que en este momento no se ha cargado el archivo 0.a que contiene los tres componentes ComponentA, ComponentB, ComponentC.5a1bae6addad442ac82.js archivo, cuando se hace clic en el enlace Page A, se carga el archivo, y luego al hacer clic en los enlaces Page B, Page C, no se vuelve a cargar el archivo.

Primero, a través de vue-La herramienta de línea de comandos CLI utiliza el plantilla de proyecto webpack para crear un proyecto que contiene vue-El proyecto de router, en su src/Crea un directorio CommonComponents en el directorio components, y en este directorio crea los tres componentes ComponentA, ComponentB y ComponentC.

Al mismo tiempo, crea un archivo index.js en el directorio CommonComponents ubicado en el directorio components, y el contenido es el siguiente:

exports.ComponentA = require('./ComponentA')
exports.ComponentB = require('./ComponentB')
exports.ComponentC = require('./ComponentC')

这样，我们只需要使用 webpack 的 require.ensure 特殊语法或者使用 AMD 风格的 callback-require 语法异步加载 CommonComponents 目录下的 index.js，在使用 webpack 进行打包时，就可以实现将 ComponentA、ComponentB、ComponentC 这三个组件合并打包。以 AMD 风格的 callback-require 语法为例示范如下，这里的 callback 回调函数的形式没有任何特殊要求。

require(['component/CommonComponents
 // do whatever you want with CommonComponents
})

component/CommonComponents 模块加载成功时，这里的回调函数中的 CommonComponents 参数将会是一个包含 ComponentA、ComponentB、ComponentC 这三个组件选项的对象。

在定义异步解析组件时，我们使用的是一个工厂函数 resolve => {require(['./my-async-component'], resolve)}，如果需要在路由配置文件中添加 component 属性为 ComponentA 组件的路由项，应该定义什么样的工厂函数呢？记住这里的 resolve 是一个用于解析组件选项的回调函数，其参数是所获取的组件选项，而上一段代码中的 CommonComponents 恰好是包含若干个组件选项的对象，因此我们可以将 CommonComponents 的子属性作为参数用于 resolve 调用，我们编写一个函数 getCommonComponent，用于根据组件名称返回获取相应的组件选项的工厂函数。

let getCommonComponent = componentName => resolve => require(['components/CommonComponents'], components => resolve(components[componentName]))

En los lugares donde se utiliza uno de estos componentes en plantillas de componentes o mapeos de rutas, se puede usar una llamada de función como getCommonComponent('ComponentA'), para configurar el componente, el ejemplo de uso en el mapeo de rutas es el siguiente:

routes: [
 {
 path: '/',
 name: 'Hello',
 component: Hello
 },
 {
 path: '/a',
 name: 'A',
 component: getCommonComponent('ComponentA')
 },
 {
 path: '/b',
 name: 'B',
 component: getCommonComponent('ComponentB')
 },
 {
 path: '/c',
 name: 'C',
 component: getCommonComponent('ComponentC')
 }
]

La lista de archivos generados después del empaquetado final se muestra en la imagen siguiente, entre los cuales 0.a5a1bae6addad442ac82.js contiene los tres componentes ComponentA, ComponentB, ComponentC.

Resumen

Esto es todo el contenido de este artículo, espero que el contenido de este artículo pueda ayudar a todos a aprender o trabajar, si tienen alguna pregunta, pueden dejar un mensaje para intercambiar, gracias por el apoyo a la tutorial de gritos.

Declaración: El contenido de este artículo se ha obtenido de la red, pertenece al propietario original, el contenido ha sido subido por usuarios de Internet de manera voluntaria, este sitio web no posee los derechos de propiedad, no ha sido editado por humanos y no asume responsabilidad por las responsabilidades legales relacionadas. Si encuentra contenido sospechoso de copyright, le invitamos a enviar un correo electrónico a: notice#w3Aviso: El contenido de este artículo se ha obtenido de la red, pertenece al propietario original, el contenido ha sido subido por usuarios de Internet de manera voluntaria, este sitio web no posee los derechos de propiedad, no ha sido editado por humanos y no asume responsabilidad por las responsabilidades legales relacionadas. Si encuentra contenido sospechoso de copyright, le invitamos a enviar un correo electrónico a: notice#w