Nomenclatura de componentes de carga asincrónica en la tabla de enrutamiento vue2

Nomenclatura de componentes de carga asincrónica en la tabla de enrutamiento vue2

Introducción

En Vue2, cuando se introducen componentes en la tabla de enrutamiento, la importación dinámica (Importación dinámica) se puede utilizar para cargar componentes de forma asincrónica para mejorar la velocidad de carga de la página y reducir el volumen de carga inicial.
De esta manera, el componente cargado asincrónicamente se nombrará con este comentario /* webpackChunkName: "" /.

Explicación detallada sobre cómo nombrar componentes cargados asincrónicamente

1. Por qué es necesario utilizar nombres de componentes

En primer lugar, para que quede claro, si no utiliza nombres de componentes, no habrá ningún impacto y el proyecto se puede empaquetar normalmente, pero después de que webpack empaquete el componente en un archivo fragmentado separado, el archivo se nombrará con un número. De forma predeterminada, esto afectará a los desarrolladores. Al depurar, no se puede proporcionar el nombre del paquete del componente para localizar el problema.

Al mismo tiempo, este nombre también puede ayudar al paquete web a realizar la división del código al empaquetar, es decir, empaquetar diferentes componentes en diferentes archivos fragmentados para lograr una mejor optimización del rendimiento.

Por lo tanto, después de usar el comentario /* webpackChunkName: "" /, es decir, después de nombrar el componente, webpack nombrará el archivo fragmentado empaquetado como nuestro propio nombre definido. Generalmente, este nombre es el mismo que el nombre de nuestro componente, que es Es conveniente para los desarrolladores depurar y, en segundo lugar, puede ayudar al paquete web a realizar la segmentación del código, mejorar la velocidad de carga de la página y reducir el tamaño del proyecto de carga inicial.

2. Cómo utilizar la denominación de componentes

// ...
const router = new Router({
    
    
  routes: [
    {
    
    
      path: '/home',
      component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue'),
      meta: {
    
     title: '首页' },
    }
  ]
})
// ...

En el ejemplo anterior, en la ruta cuya ruta de enrutamiento es el inicio, el componente de página correspondiente se carga dinámicamente y el nombre del componente se agrega a la importación.