52. Pantalla de esqueleto de vue-skeleton-webpack-plugin
Este es un complemento de paquete web basado en Vue que genera pantallas esqueléticas para aplicaciones de una o varias páginas, lo que reduce el tiempo de pantalla en blanco y mejora la experiencia del usuario antes de que la página se represente por completo.
Admite webpack@3 y webpack@4, y admite recarga en caliente.
Consulte el artículo Práctica de actualización de PWA de Ele.me, utilice la representación del lado del servidor para representar el componente esqueleto durante la compilación e incorpore el DOM y los estilos en el HTML de salida final.
Además, para facilitar la depuración durante el desarrollo, la ruta correspondiente se escribirá en router.js y se podrá acceder a ella a través de la ruta /skeleton.
Instalación:
Ejecutar caso de prueba:
Introducir complemento en el paquete web:
El modo de desarrollo ya admite recarga en caliente, este parámetro No lo necesita de nuevo.
Si su proyecto se crea con Lavas, puede consultar las aplicaciones en la plantilla Lavas Appshell y la plantilla Lavas MPA.
Si su proyecto se crea usando vue-cli, puede consultar el ejemplo de aplicación de este complemento basado en la plantilla de Vue Webpack: Single Skeleton in SPA:
El modificado Los archivos son los siguientes: build/ webpack.prod.conf.js, build/webpack.dev.conf.js
Los archivos agregados son los siguientes: build/webpack.skeleton.conf, src/utils/ Skeleton.vue, src/utils/enter -skeleton.js
Múltiples esqueletos en SPA:
O puede consultar los casos de prueba en ejemplos, que también incluyen páginas únicas y situaciones de varias páginas, de la siguiente manera:
p>
El complemento debe utilizar el complemento que coincida con la versión de Webpack para la separación de estilos.
Se produce el siguiente error durante la ejecución:
Debido a que el complemento utiliza la representación del lado del servidor Vue para representar el componente esqueleto durante la construcción, el DOM y los estilos están integrados en el resultado final. HTML. Por lo tanto, la separación de estilos debe habilitarse en el objeto de configuración del paquete web utilizado por el esqueleto para separar los estilos utilizados por el esqueleto de JS.
La separación de estilos en Webpack se implementa a través del complemento extract-text-webpack-plugin. Por lo tanto, el complemento debe estar configurado correctamente en webpack.skeleton.config.
Tome un proyecto creado usando vue-cli como ejemplo. Si su webpack.skeleton.conf hereda de webpack.base.conf, la separación de estilos está desactivada de forma predeterminada en el modo de desarrollo, por lo que debe estar desactivada. Modificado. Puede consultar el plan de modificación.