¿Qué aspectos del proyecto Vue se pueden optimizar?
1. Optimización del tamaño de la imagen, algunas imágenes usan webp (se debe considerar la compatibilidad con WebP).
Generación online, como imágenes inteligentes y fotografía en la nube.
Generación Gulp, gulp-webp o gulp-imageisux.
Generación de lienzos
2. Reducir los requisitos de pantalla y utilizar sprites.
Generación online: generador de sprites, gopng de Tencent, spriteme.
Generación de código: gulp.spritesmith o sass's compass.
Optimización del rendimiento de la página
Las imágenes o componentes tardan demasiado en cargarse.
Utilice el componente vue-lazyload o algún otro componente.
Dirección de Vue-lazyload:/package/vue-lazyload
Carga diferida de imágenes: v-lazy o use v-lazy-container para incluir un grupo de imágenes.
//Presentar una imagen
& ltimg v-lazy = "//domain . com/img 1 . jpg " & gt; un conjunto de imágenes
& ltdiv v-lazy-container = " { selector:' img ', error: ' xxx.jpg ', cargando: ' xxx.jpg ' } " & gt
& ltimg data-src = "//dominio . com/img 1 . jpg " & gt;
& ltimg data-src = "//dominio . com/img 2 . jpg " & gt;
& ltimg data-src = "//dominio . com/img 3 . jpg " & gt;
& lt/div & gt;
Carga diferida de componentes
Vue.use(VueLazyload, {
Componente diferido: true
});
& ltComponente diferido& gt
& ltimg class = " mini-cover ":src = " img . src " width = " 100% " height = " 400 " >
& lt /lazy-component & gt;
Precarga de imágenes
Mostrar imágenes rápidamente
Escenario de uso: en un componente para ver imágenes, siga verificando Al cargar imágenes en una página, las imágenes carga lentamente después de obtener los datos del servidor. En este momento, puede precargar la imagen cuando se muestren nuevos datos. Después de cargarla, la imagen se completará en la posición correspondiente.
Carga diferida de complementos de terceros (carga bajo demanda)
Los archivos Js generalmente se cargan de forma sincrónica y colocarlos en la página bloqueará la carga del archivo js principal. .
Escenarios de uso: cuando algunos proyectos deben importar archivos como jquery, la importación de estos archivos en componentes bloqueará la representación de la página hasta cierto punto, por lo que la carga dinámica de archivos JS como jquery a través de eventos específicos (clic o pop -up) puede hacer que la página principal se muestre rápidamente.
¿Cómo evitar que los componentes se superpongan al cargar páginas de forma asincrónica?
Al cargar varios componentes de Vue y renderizarlos a través de datos del servidor, varios componentes primero se superpondrán y luego se separarán.
Tres opciones
Cuando la sección que se muestra en la página es fija y la altura del contenido no es fácil de cambiar, puede establecer una altura fija fuera del componente de antemano y mostrar es como en el marco Agrega el mismo contenido. Cuando el contenido de la página no es fijo, para reducir el problema de la superposición de componentes durante la carga asincrónica, puede mostrar otros componentes en la primera pantalla al cargar los datos de un componente a través de v-show.
Cuando toda la página esté arreglada, puedes agregar un esqueleto a la página para evitar que parpadee.
Para una implementación específica, consulte //www.gxlcms.com/article/130505.htm.
El servidor renderiza la página. Para algunas páginas con datos fijos y pocos cambios, puede considerar la representación del servidor, que mostrará la página en poco tiempo y brindará una mejor experiencia de usuario.
Reducir el tamaño de los archivos externos importados
Cuando el proyecto introduce algún contenido de ElementUI, puede introducir algunos componentes introduciendo la configuración babel-plugin-component. babelrc archivo, reduciendo así el tamaño del componente.
Carga retrasada de ruta
Pero cuando se usa vue-router, webpack empaquetará todos los componentes en un archivo js, lo que hará que el archivo sea muy grande y afectará la carga de la página de inicio. . La mejor manera es empaquetar otras rutas en diferentes archivos js y luego cargar los archivos js correspondientes al cambiar de ruta.
resolve = & gt requiere ([URL], parse), tiene buen soporte.
()= & gtSystem.import(URL), webpack2 se ha eliminado gradualmente en el sitio web oficial y no se recomienda.
()= & gtEl sitio web oficial recomienda la importación (URL) para Web Pack 2, que pertenece a la categoría de es7 y debe usarse con el complemento de importación dinámica de sintaxis de Babel.