Optimización de empaquetado VueCLI3: extracción de paquetes de dependencia
En el desarrollo del proyecto, se utilizarán muchos paquetes de dependencia, como Vue, administración de enrutamiento Vue-router, administración de estado Vuex, biblioteca de componentes de UI (ElementUI, Vant), gráficos (echarts), etc. Al empaquetar y construir, descubrimos que algunos paquetes eran demasiado grandes, lo que afectaría la velocidad de carga de la página de inicio. Como se muestra en la siguiente figura:
Del paquete analizador que se muestra en la figura anterior, se pueden extraer los siguientes complementos:
Paquetes dependientes que deben eliminarse
VueCLI3 desde Con webpack analzer, puede usar el siguiente comando en dist/report para generar el paquete del analizador.
Para obtener más información, consulte:
VueCLI3 viene con el analizador de paquetes web, puede usar el siguiente comando en dist/report.html para generar el analizador. paquete. p> https://cli.vuejs.org/en/guide/cli-service.html#vue-cli-service-serve
Existen dos métodos generales de optimización para reducir el tamaño del paquete y acelerar Su velocidad:
La carga bajo demanda reduce el tamaño del paquete al hacer referencia solo a los componentes utilizados.
La carga bajo demanda reduce el tamaño del paquete al hacer solo referencia a los componentes utilizados, pero hay un problema: si el proyecto depende en gran medida de complementos de terceros (por ejemplo, ElementUI, vant), entonces esta solución No habrá forma de reducir el tamaño del paquete.
Aquí elegimos el método CDN, el proceso de configuración:
Según las variables de entorno, solo use CDN en línea y el entorno de desarrollo usa directamente dependencias npm.
Después de separar el paquete de software, el resultado es el siguiente:
La página vue.config.js es la siguiente:
Modificar de la siguiente manera:
Extensión externa (externals)
Especificar echarts usando los externos del paquete web no reducirá el tamaño del paquete.
vue-cli utiliza webpack-bundle-analyzer para analizar y crear productos