Qué solicitudes JS se generan después de empaquetar el proyecto Vue

---

resalte: a11y-light
tema: smartblue

introducción

Si prestamos atención a la optimización del rendimiento, notaremos que después de empaquetar el proyecto vue, se generarán varios archivos de solicitud js, como app.js o chunk-vendors.js. Este artículo profundizará en cuáles son los archivos generados después de que se empaqueta el proyecto Vue.

Nota: Después de empaquetar vue, es consistente con el archivo de solicitud js generado después de que el proyecto vue se ejecuta directamente localmente. Para facilitar la visualización, este artículo utiliza el archivo generado después de que el proyecto se inicia localmente para su discusión.

archivo de solicitud base

Creamos un proyecto vue básico sin introducir enrutamiento , vuex y cualquier otro JS de terceros . Al ejecutar el proyecto, podemos encontrar que vue ha generado dos archivos de solicitud:

nombre	estado	tipo	tamaño	tiempo
chunk-vendors.js	200	guion	392 KB	67 ms
aplicación.js	200	guion	15,5 KB	70ms

Vamos a repasarlos uno por uno.

aplicación.js

Agregamos mucho texto en app.vue y volvemos a ejecutar el proyecto.

De la figura anterior, podemos encontrar que el tamaño de app.js ha cambiado, pero el tamaño de chunk-vendors.js no ha cambiado.

Se puede ver que después del empaquetado, app.js es nuestro código de capa empresarial, como el contenido de main.js y el contenido de cada componente de vue.

chunk-vendors.js

Instala e introduce moment.js en nuestra app.vue

<script>
import moment from "moment"
moment()
export default {
  name: "App",
};
</script>

Vuelva a ejecutar el proyecto:

En la imagen de arriba, podemos ver que el tamaño de chunk-vendors.js casi se ha duplicado, pero el tamaño de app.js apenas ha cambiado.

Se puede ver que después del empaquetado, chunk-vendors.js integra el contenido js utilizado en node_modules.

archivo de solicitud de enrutamiento

Tomando un proyecto de nivel empresarial como ejemplo, definimos una página de enrutamiento en el proyecto.

const headquarters = () => import("@/views/headquarters/index.vue");
export default [
  {
    path: "/",
    name: "headquarters",
    component: headquarters,
    meta: {
      keepAlive: false,
      title: "总部展示大屏",
      name: "总部展示大屏",
    },
  },
];

Inicie el proyecto http://localhost:8080/demo/ , podemos ver que la página solicita 3 archivos JS

Nota: La demostración en el enlace es la baseUrl del proyecto

Funcionan de la siguiente manera:

archivo de solicitud	efecto	tamaño del recurso	tiempo requerido
0.js	contenido de enrutamiento de la sede	(caché de captación previa)	60ms
aplicación.js	Contenido de página sin enrutamiento, como main.js	893 KB	12 ms
chunk-vendors.js	contenido de node_modules	37,9 MB	427ms

estamos agregando una ruta

  {
    path: "/data-analysis",
    name: "dataAnalysis",
    component: () => import("@/views/data-analysis/index.vue"),
    meta: {
      keepAlive: false,
      title: "数据分析",
      name: "数据分析",
    },
  },

Vuelva a ingresar el enlace http://localhost:8080/demo/ , es posible que se pregunte por qué el archivo de solicitud sigue siendo 0.js a pesar de que se agregó la ruta .

De hecho, porque no visitamos el enlace de enrutamiento correspondiente.

Ingrese el enlace http://localhost:8080/demo/data-analysis que contiene la nueva ruta y podrá ver la solicitud del nuevo archivo de ruta.

1.js aquí está el contenido del componente dataAnalysis.

Además, según la captación previa, podemos ver todas las páginas de enrutamiento 0.js y 1.js en html

solicitar verificación de documentos

De hecho, podemos cambiar el nombre del archivo de solicitud de la ruta con la ayuda de las anotaciones mágicas de webapck.

  {
    path: "/",
    name: "headquarters",
    component: () => import(/*webpackChunkName:"headquarters" */ "@/views/headquarters/index.vue"),
    meta: {
      keepAlive: false,
      title: "总部展示大屏",
      name: "总部展示大屏"
    }
  },
  {
    path: "/data-analysis",
    name: "dataAnalysis",
    component: () => import(/*webpackChunkName:"data-analysis" */ "@/views/data-analysis/index.vue"),
    meta: {
      keepAlive: false,
      title: "总部展示大屏",
      name: "总部展示大屏"
    }
  }