Cómo resolver el problema de que el archivo del fabricante es demasiado grande o el archivo app.js es demasiado grande al usar el empaquetado vue

Este artículo presenta principalmente la solución al problema de usar vue para empaquetar archivos de proveedores que son demasiado grandes o el archivo app.js es demasiado grande. Es muy bueno y tiene cierto valor de referencia. Los amigos que lo necesiten pueden consultarlo. >

Usuario por primera vez Desarrollado con vue2.0, antes usé angular1.x. Después de usar el andamiaje vue-cli (la interfaz de usuario usa Element-ui), descubrí que el archivo del proveedor es muy grande, casi 1 M. Luego busqué la información relevante y descubrí que el paquete web agrupa todas las bibliotecas, lo que genera archivos muy grandes.

Mi solución:

1. Coloque las bibliotecas que cambian con poca frecuencia en index.html e introdúzcalas a través de cdn, como se muestra a continuación:

Luego busque la compilación /webpack.base.conf.js y agregue el siguiente código en module.exports = { }

externals: {

'vue': 'Vue',

'vue-router': 'VueRouter',

'element-ui': 'ELEMENT',

}, para que el paquete web no agregue vue.js, vue -Bibliotecas de enrutador y element-ui. Por cierto, eliminé la introducción del elemento en main.js; de lo contrario, descubrí que el app.css empaquetado aún empaquetaría el CSS del elemento, pero ese no sería el caso después de la eliminación.

En este momento encontrará que el archivo del proveedor empaquetado es mucho más pequeño~

Si aún no está satisfecho, continúe leyendo-----

2. Carga diferida del enrutamiento vue (para funciones específicas, consulte el sitio web oficial, no las presentaré aquí).

Al principio, la ruta que usemos puede ser la siguiente (router.js), de modo que todos los recursos de enrutamiento se cargarán en ella al ingresar a la página. Si el proyecto es relativamente grande, se cargará. Habrá mucho contenido y el tiempo de espera para la página será más largo, lo que resultará en una mala experiencia del usuario.

Para dividir la ruta en módulos y luego cargar los recursos requeridos por la página antes de ingresar a una nueva página cada vez (es decir, cargar la ruta de forma asincrónica), podemos usar (router.js) como el siguiente:

p>

Luego encontrará que hay muchos más 1.xxxxx.js; 2.xxxxx.js, etc. en el paquete, y seller.xxx.js ya no existe, solo queda app.js y manifest.js, y app.js todavía es pequeño, poco más de 100k en mi caso.

No generé el archivo de mapa aquí, por lo que la velocidad de empaquetado es más rápida y todo el archivo del proyecto es mucho más pequeño (los archivos de mapa son generalmente muy grandes);

Cancelar la generación de el archivo de mapa y busque la configuración /index.js, modifique la línea con la flecha que apunta a falso a continuación.

Cuando comencé a usarlo, los obstáculos y obstáculos eran inevitables en el camino, y también aprendí de la experiencia de muchas personas mayores, así que lo grabé aquí con la esperanza de ayudar a más personas.