Razones de la pantalla blanca frontal y algunas soluciones

Razones de la pantalla blanca en la parte frontal:

Vue React Angular, un marco de uso común para problemas de JS
, está impulsado por JS, y JS también genera el HTML de una aplicación de una sola página. Al representar la página, se generan archivos JS grandes (app.js y seller.js). debe cargarse y analizarse en JS. La página no se puede mostrar hasta que se complete la carga, lo que resulta en una pantalla blanca (cuando la velocidad de la red no es buena, también producirá un cierto grado de pantalla blanca).
Problemas de compatibilidad del navegador:
el código vue muestra una pantalla blanca en ie
URL La URL no es válida o contiene caracteres chinos.
El almacenamiento en caché provoca una referencia al
paquete del proyecto vue. Al reemplazar el archivo dist en línea por primera vez, algunos teléfonos móviles/navegadores pueden abrir la página por primera vez más tarde y puede aparecer una pantalla blanca.

Motivo: el archivo de entrada index.html se almacenará en caché de forma predeterminada en el lado del cliente y, dado que el css/js generado por el empaquetado vue son todos valores hash, que son diferentes del último nombre del archivo, no se encontrará el css/js. ... resultando en una pantalla blanca. Después de que el paquete se actualiza en el lado del servidor, debido a que el archivo antiguo se elimina y la ruta vinculada por index.html sigue siendo la ruta del archivo anterior, el archivo no se encontrará, lo que generará una pantalla en blanco.
error de página

Solución:

Idea: reducir el volumen empaquetado (sourceMap está desactivado, se introduce CDN, el enrutamiento se carga de forma diferida y los componentes se cargan según demanda)

Mejorar la velocidad de renderizado;

Optimizar la experiencia del usuario;

Optimización de recursos CDN:

Cambie todos los paquetes npm de terceros dependientes para obtenerlos a través de enlaces CDN e inserte los enlaces correspondientes en index.html

<body>
  <div id="app"></div>
  	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
  	<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
  	<script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
 	<script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
 	<script src="https://cdn.bootcss.com/element-ui/2.6.1/index.js"></script>
</body>

Configure la propiedad externa en vue.config.js

module.exports = {
    
    
 ···
    externals: {
    
    
      'vue': 'Vue',
      'vuex': 'Vuex',
      'vue-router': 'VueRouter',
      'axios':'axios',
      'element-ui': 'ElementUI'
    }
 }

Desinstalar paquetes npm dependientes relacionados

npm uninstall xxx

Usar compresión gzip

Procesamiento frontal:

// npm i compression-webpack-plugin -S
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
    
    
	productionSourceMap: false,
	configureWebpack: config => {
    
    
		if (process.env.NODE_ENV === 'production') {
    
    
			return {
    
    
				plugins: [
					new CompressionPlugin({
    
    
						// 匹配规格
						test: /\.js$|\.html$|\.css$|\.png$/,
						// 文件超过多大进行压缩 单位Byte
						threshold: 10240,
						// 是否删除源文件（建议不删除）
						deleteOriginalAssets: false
					})
				],
			}
		}
	},
}

También necesitas habilitar la compresión gzip en nginx, por ejemplo:

 gzip on;
 gzip_static on; //当存在.gzip格式的js文件时，优先使用静态文件
 gzip_min_length  10k; //开启gzip压缩的最小大小
 gzip_buffers     4 16k;
 gzip_http_version 1.1;
 gzip_comp_level 6;
 gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml;
 gzip_vary on;
 gzip_proxied   expired no-cache no-store private auth;
 gzip_disable   "MSIE [1-6]\.";

**Nota:** Cuando nginx habilita la compresión gzip, no importa si los archivos empaquetados por el front-end están comprimidos o no, nginx comprime todos los archivos js cargados por el sitio web en tiempo real.

Cuando gzip_static está desactivado, los archivos comprimidos js (aquellos en formato gzip) cargados por el front-end son inútiles.
Cuando gzip_static está activado, el archivo comprimido gzip empaquetado por el front-end se carga primero. Si no se encuentra el archivo, nginx lo comprimirá en tiempo real y lo pasará al navegador.

Representación del servidor SSR

Página de inicio más pantalla de carga o esqueleto (solo para optimizar la experiencia)

elementU tiene un componente de pantalla esqueleto (Skeleton)

La llamada pantalla esqueleto consiste en utilizar algunos gráficos para ocupar el lugar cuando el contenido de la página no está cargado y luego reemplazarlo una vez cargado el contenido. Durante este proceso, el usuario percibirá que el contenido se va cargando poco a poco y será presentado próximamente, lo que reduce la mala experiencia de "pantalla blanca".