Optimización de proyectos Vue
Según la condición if, el complemento solo tendrá efecto durante la fase de producción.
A través del modo de línea de comando
A través del panel de interfaz de usuario visual
Ejecute vue ui-gt->; compilación completada-gt; >
El modo de desarrollo y el modo de lanzamiento del proyecto Vue * * * utilizan el mismo archivo de entrada de paquete de forma predeterminada, que es src/main.js. Para separar el proceso de desarrollo y el proceso de lanzamiento del proyecto, se necesitan dos paquetes. Se pueden especificar entradas.
El modo de desarrollo es src/main-dev.js.
El modo de lanzamiento es src/main-prod.js.
Las dos formas de modificar la configuración del paquete web son configureWebpack y chainWebpack. Tienen la misma función pero diferentes métodos de uso.
vue.config.js
De forma predeterminada, las dependencias de terceros importadas se empaquetarán en el mismo archivo, lo que hará que el archivo sea demasiado grande y afecte la velocidad de carga. Al configurar el nodo externo, las dependencias de terceros que deben importarse globalmente se excluyen del archivo de empaquetado, lo que puede reducir efectivamente el volumen de empaquetado.
El método de declaración depende del nombre del paquete: nombre de registro. El nombre registrado debe ser coherente con el nombre del objeto montado en la ventana después de que se introduce el recurso CDN. Puede utilizar console.log(ventana) para imprimir el nombre del objeto. Si el objeto especificado por el nombre registrado no se encuentra en la ventana, aparecerá una pantalla en blanco. Además, si el nombre del objeto del recurso CDN importado montado en la ventana es similar a xx-xx-xx (que no cumple con la especificación de nomenclatura de objetos js), el recurso no se puede importar a través de CDN y solo se puede importar.
vue.Configuration.js
Config.plugin('html ') utiliza el complemento html para pasar parámetros a la plantilla.
Fuerte hierro fundido
Investigación del flujo de chorro...
Si isProd es verdadero, se importarán recursos CDN.
El archivo de recursos correspondiente se cargará únicamente al acceder a la ruta. Se recomienda no empaquetar cada ruta por separado, sino especificar el mismo archivo de paquete para múltiples rutas a través de webpackChunkName, lo que puede reducir la cantidad de solicitudes.
Router/index.js
Configuración completa
vue.config.js
Producto principal.js
Después de introducir la CDN, las oraciones de estilo importadas se comentarán o eliminarán, y solo quedarán las oraciones importadas a JS.