tema: condensada-noche-púrpura
resaltado: a11y-oscuro
Este es el tercer día de mi participación en la Actividad de Creación de Notas Complementarias "Quinto Campamento de Entrenamiento Juvenil"
Análisis de archivos de paquetes
Al solicitar recursos estáticos del servidor, puede llevar mucho tiempo solicitar recursos del servidor de recursos estáticos por primera vez, porque el archivo js es muy grande y la página puede estar en blanco durante mucho tiempo.
Vue está configurado para subempaquetar archivos js y archivos css para separar todos los elementos relacionados con css del proyecto en archivos css e importar y empaquetar archivos js en index.html. Hay tres archivos js en el archivo js: app.js: aplicación actual desarrollo Todos los códigos (códigos comerciales) manifest.js: proporciona soporte subyacente para el código empaquetado proveedor.js: el tercero al que se hace referencia en el proyecto de terceros del proveedor, como vue, vue-router, axios, bs
Hay un nuevo UglifyJsPlugin ({}) en build/webpack.prod.cof.js, etc., apáguelo, cancele el feo manifest.js: una función de ejecución inmediata (cierre anónimo), y los parámetros están compuestos por js archivos (módulos) El motivo del cierre anónimo de la matriz es una función clave: __webpack_require__la función se llama en algún lugarresult = __webpack_require__(__webpack_require__.s = executeModules[i]);
La razón por la que los módulos anteriores pueden generar dependencias y pueden usarse refiriéndose entre sí es porque la capa inferior tiene funciones como soporte.
Enrutamiento de carga diferida
Comprender la carga diferida de rutas
La explicación oficial es la siguiente: - Al empaquetar y crear aplicaciones, el paquete Javascript se volverá muy grande, lo que afectará la carga de la página. - Si podemos dividir los componentes correspondientes a diferentes rutas en diferentes bloques de código y luego cargar los componentes correspondientes cuando se accede a la ruta, será más eficiente
¿De qué está hablando el funcionario? En primer lugar, sabemos que generalmente se definen muchas páginas diferentes en la ruta. ¿Dónde se empaqueta finalmente esta página? Generalmente, se coloca en un archivo js. Sin embargo, muchas páginas se colocan en un js En el archivo, esta página inevitablemente será muy grande, si solicitamos esta página al servidor a la vez, puede tomar una cierta cantidad de tiempo, e incluso la computadora del usuario puede estar en blanco por un tiempo.
¿Cómo evitar esta situación? Simplemente use la carga diferida de rutas . ¿Qué hace la carga diferida de rutas? La función principal de la carga diferida de rutas es empaquetar los componentes correspondientes a las rutas en bloques de código js uno por uno. Solo cuando esta ruta es Se accede únicamente cuando se carga el componente correspondiente.
La función del archivo .map: una vez empaquetado el proyecto, el código se comprime y cifra. Si se informa un error durante la ejecución, el mensaje de error de salida no puede saber con precisión dónde informó el código el error. Con un mapa, puede ser como un código no cifrado, y el resultado exacto es qué fila y columna están incorrectas. Es fácil de entender. La referencia original es ejecutar la función inmediatamente, y la carga diferida se convierte en la función que se ejecutará cuando se use. Si hay un archivo de mapa, cambie ProductionSourceMap en el índice bajo configuración a falso. El archivo es para que usted pueda realizar un seguimiento de los errores. Sí, el mapa fuente se utiliza para generar mensajes de error y modificar el ProductionSourceMap: false de config/index.js si no lo desea, y convertir el objeto devuelto en un método, que se devuelve. cuando se ejecuta el método, por lo que puede usarse para carga diferida.
método de carga diferida
Método 1: combinar los componentes asincrónicos de Vue y el análisis de código de Webpack.const Home = resolve => { require.ensure([ '../components/Home.vue']，() =>{ resolve( require( '../components/Home.vue' )) })};
Método 2: método de escritura AMDconst About = resolve => require([ '../components/About.vue'],resolve);
Método 3: en ES6, podemos tener una forma más sencilla de organizar la división del código de los componentes asíncronos de Vue y Webpack.const Home = () => import("../components/Home")
rutas anidadas
El enrutamiento anidado es una función muy común. Por ejemplo, en la página de inicio, queremos acceder a algún contenido a través de /home/news y /home/message. Una ruta asigna un componente y el acceso a estas dos rutas también representará dos componentes por separado. .
Hay dos pasos para implementar rutas anidadas: crear los subcomponentes correspondientes, configurar las subrutas correspondientes en el mapa de ruta y utilizar etiquetas dentro de los componentes.
router-link no sabe donde lo definiste, debes escribir la ruta completa a="/home/news"
El enrutamiento anidado también puede configurar la ruta predeterminada . La configuración es la siguiente: js { path : '/home', component : Home, children : [ { path : '', redirect : 'news' }, { path : 'news', // 不用写/，会自动补上 component : HomeNews }, { path : 'messege', component : HomeMessege } ] },