Guau, guau, guau. . . Mientras se limpia las lágrimas, mientras transcribe, las preguntas de la entrevista que se han olvidado durante mucho tiempo deben recordarse en pleno invierno. . .

vista

directiva personalizada vue

A través de instrucciones personalizadas, podemos ampliar el comportamiento de Vue para agregar funciones y eventos adicionales al representar elementos DOM, a fin de satisfacer mejor las necesidades comerciales.
Las instrucciones personalizadas de Vue se dividen en dos tipos: instrucciones globales e instrucciones locales (instrucciones en componentes)
Las directivas globales se registrarán en Vue.directive y se pueden usar globalmente, mientras que las directivas locales solo se pueden usar dentro de los componentes.

El siguiente es un ejemplo de una directiva personalizada global: Registre una directiva personalizada global denominada v-focus
Registre una directiva personalizada global denominada v-focus e implemente la función de gancho insertado, cuando la directiva esté vinculada Cuando el elemento se inserte en el DOM , se llamará a la función de enlace para realizar la función de enfoque del elemento

Vue.directive("focus",{
   // 当绑定元素插入到DOM中执行
   inserted:function(el){
       //聚焦元素
       el.focus()
   }
})

Aquí hay un ejemplo de una directiva personalizada parcial: Defina una directiva personalizada parcial llamada v-highlight dentro del componente

export default {
    derectives:{
        highlight:{
            //当绑定元素插入到DOM中时执行
            inserted:function(el){
                //添加样式类
                el.classList.add("highlight")
            },
            //当绑定元素从DOM中移出时执行
            unbind:function(el){
                //移除样式类
                el.classList.remove("highlight")
            }
        }
    }
}

La diferencia entre el enrutamiento hash y el enrutamiento histórico en Vue

hash模式
    在hash模式下，路由路径会带有一个#符号
    hash模式的路由通过监听 window.location.hash的变化来进行路由切换。
    hash模式的好处是兼容性较好，可以在不支持HTML5 History API的浏览器中正常运行
    缺点是URL中带有#符号，不够美观
History模式：
    在history模式下，路由路径不带有#符号
    history模式利用HTML5 HitoryAPI中的pushState和replaceState方法来实现路由切换
    history模式的好处是URL更加美观，没有#符号
    缺点是兼容性较差，需要在服务器端进行配置，以防止在刷新页面时出现404错误

Aplicación de Instrucciones Personalizadas en el Control de Permisos

Puede controlar si ciertos botones o filas y columnas en la tabla son visibles, editables y eliminables de acuerdo con la información del rol del usuario. En
este momento, puede implementar dicho control de permisos a través de comandos personalizados.
Defina un comando personalizado global llamado v-permission e implemente la función bind hook, en la que la
información de la función del usuario actual se usa para determinar si el usuario tiene el permiso del elemento, si no, ocultar el elemento
a continuación es una muestra código :

//定义一个名为v-permission的全局自定义指令
Vue.directive("permission",{
    //bind 钩子函数只在指令第一次绑定到元素时执行一次
    //如果需要对指令的绑定值进行响应式的操作，应该在update钩子函数中进行
    bind:function(el,binding,vnode){
        //获取当前登录用户的角色信息
        const currentUser = getUserInfoFromLocalStorage().role;
        //获取绑定的值
        const {value} = binding
        //判断当前用户是否有该按钮的权限
        if(value&&value.length&&!value.includes(currentUser)){
            el.style.display = "none";  //隐藏该元素
        }
    }
})


<button v-permission="['admin','superAdmin']">Delete</button>

Enrutamiento dinámico para Vue

Vue中的动态路由是指在路由中使用参数来匹配路径的一种方式，通过动态路由，我们可以轻松实现页面参数传递和多个类似页面的复用
{
    path:'/user/:id',
    name:'user',
    component:User
}
:id表示该路由是一个动态路由，所以其被称为参数，它的值会被传递给User组件进行处理

El papel de la clave de Vue

Una clave es un atributo que se utiliza para identificar de forma única un nodo. Cuando Vue renderice Dom, juzgará si necesita volver a renderizar de acuerdo con la clave del nodo.Cuando
Vue encuentre que la clave del nodo ha cambiado. Eliminará el nodo del árbol DOM y luego volverá a crear un nuevo nodo y lo insertará en la posición adecuada, lo que puede reducir la cantidad de operaciones DOM y mejorar el rendimiento de la representación.

Guardia de enrutamiento del enrutador

Una función importante en Router que permite a los desarrolladores realizar cierta lógica de control y validación cuando navegan hacia una ruta o abandonan la ruta actual. Vue Router proporciona tres tipos diferentes de protectores de enrutamiento a nivel global, nivel de enrutamiento y nivel de componente, que incluyen:

La protección frontal global beforeEach se usa para verificar si el usuario ha iniciado sesión o no y otros controles globales
La protección de resolución global beforeResolve se usa para ser llamada después de la protección previa global y antes de que se represente el componente.
El gancho global after afterEach se usa para limpiar después de que se completa la ruta
La guardia exclusiva de ruta beforeEnter se usa para verificar antes de ingresar a una ruta específica
Los guardias beforeRouteEnter, beforeRouteUpdate y beforeRouteLeave dentro del componente se utilizan para manejar la lógica de control interno de la página.

javascript

Bucle de eventos

Event loop (Event Loop) es un mecanismo de procesamiento de tareas asincrónicas, forma parte del runtime de js y se utiliza para administrar y programar el orden de ejecución de las tareas.
En js, las tareas se pueden dividir en dos tipos:
1. Tareas síncronas: se ejecutan en secuencia según el orden del código hasta que se complete la ejecución
2. Tareas asíncronas: no se ejecutarán inmediatamente, sino que se ejecutarán en un momento determinado en el futuro. Las tareas asincrónicas generalmente involucran solicitudes de red, temporizadores, detectores de eventos, etc.
El bucle de eventos funciona de la siguiente manera:

1 执行同步任务，直到遇到第一个异步任务。
2 将异步任务放入相应的任务队列（如宏任务队列，微任务队列）中。
3 继续执行后续的同步任务，直到执行栈为空。
4 检查微任务队列，如果有任务则按顺序执行所有的微任务。
5 执行宏任务队列中的一个人物
6.回到第三步，重复以上步骤

En cada ciclo de eventos, todas las microtareas se ejecutan primero y luego se ejecuta una macrotarea. Dicho mecanismo garantiza el orden de ejecución de las tareas asincrónicas y puede responder a las interacciones del usuario de manera oportuna.
Las macro tareas comunes incluyen setTimeout, setInterval, solicitudes de red, etc., mientras que las micro tareas incluyen Promise, MutationObserver, etc.
Comprender el bucle real es muy importante para escribir código asíncrono eficiente, puede ayudarnos a procesar las tareas de manera razonable y evitar bloquear el hilo principal.

Cadena de alcance:

Cada función en js tiene su propio alcance,
Cuando se hace referencia a una variable dentro de una función, js buscará hacia arriba desde el alcance actual en el orden en que aparece en el código
Hasta que se encuentre el primer ámbito que contiene esta variable, este proceso se denomina búsqueda de cadena de ámbito
Si no se encuentra toda la cadena de alcance, informará un error y generará una excepción ReferenceError.

function outer(){
    const a = 10
    function inner(){
        console.log(a);
        console.log(b);//Uncaught: ReferenceError：b is not defined
    }
    inner()
}
outer()

Varias formas de agregar 0 cuando el minuto y el segundo son menores a 10 en js al cambiar la hora

const h = Math.floor(seconds / 3600);
const m = Math.floor((seconds % 3600) / 60);
const s = seconds % 60;

1 使用ES6模版字符串
padStart指定字符串的长度，如果不满，则在前面补上自己定义的字符串
`${h.toString().padStart(2,'0')}:${m.toString().padStart(2,'0')}:${s.toString().padStart(2,'0')}`

2 使用三元运算符
（h<10?"0"+h:h）+ ":" + (m<10?"0"+m:m)+":"+(s<10?"0"+s:s)

3 使用Array.map和Array.join方法

const timeArr = [h,m,s].map(value=>{
    return value <10?"0"+value:value
})
timeArr.join(":")

Qué sucede cuando ingresamos una URL en la barra de direcciones del navegador

1. Resolución de DNS: El navegador verificará si tiene caché, si hay una dirección IP correspondiente al nombre de dominio, se usará directamente, de lo contrario, iniciará una solicitud a DNS 2. Inicie una solicitud Http, y
el El navegador iniciará una respuesta al servidor de acuerdo con el encabezado de protocolo de la URL Al mismo tiempo, el navegador también enviará algunos encabezados de solicitud y parámetros de solicitud. 3. Establezca
una conexión TCP: Antes de que se establezca la solicitud HTTP, el navegador necesita para establecer una conexión TCP con el servidor. TCP es un protocolo de transmisión orientado a la conexión, confiable y basado en palabras que garantiza que los datos se puedan enviar al servidor de manera precisa y confiable a través de un protocolo de enlace de tres vías sin pérdida ni desorden de datos
.
4. Enviar solicitudes HTTP.Después de establecer la conexión TCP, el navegador puede enviar El servidor envía un mensaje de solicitud HTTP. El mensaje de solicitud HTTP incluye el encabezado de la solicitud, la línea de solicitud y el cuerpo de la solicitud.
5. Acepte el mensaje de respuesta del servidor: cuando el servidor recibe el mensaje de solicitud, analizará la solicitud y luego devolverá el mensaje de respuesta correspondiente a el cliente. El mensaje de respuesta HTTP incluye tres partes: línea de estado, encabezado de respuesta y cuerpo de respuesta, donde la línea de estado contiene el código de estado de resultado de la solicitud.
6. Analizar y representar la página: cuando el navegador recibe el mensaje de respuesta devuelto por el servidor, analizará el árbol DOM correspondiente, el árbol de reglas CSS y javascript de acuerdo con el contenido del mensaje correspondiente (como HTML, CSS, javascript y otros recursos), codificar
y construir un árbol de renderizado a partir de ellos. Finalmente, estos contenidos se entregan al motor de renderizado del navegador para generar la página que finalmente vemos.
7. Desconecte la conexión TCP.Cuando el navegador reciba el mensaje de respuesta devuelto por el servidor, cerrará la conexión y liberará los recursos. Si el navegador necesita solicitar más recursos, debe restablecer una nueva conexión TCP

Cómo reducir los reflujos y los repintados

El reflujo y el redibujado son dos pasos clave en el proceso de representación del navegador.
El reflujo se refiere al proceso en el que el navegador calcula los atributos de posición y tamaño de los elementos y vuelve a diseñar la página.
Redibujar se refiere a redibujar la apariencia de los elementos de acuerdo con los atributos de estilo de los elementos.
Refluir y redibujar son operaciones que consumen mucho rendimiento, por lo que reducir el reflujo y el redibujado puede mejorar el rendimiento y la capacidad de respuesta de la página.

1. 批量修改样式：避免对元素的样式属性进行频繁的单独修改，而是尽量将多个样式的修改合并为一个操作。可以使用Css类名的方式一次性地修改多个样式属性。
2. 使用文档片段：如果需要通过js动态地插入一系列元素，可以先将它们添加到文档片段（Document Fragment）中，然后再一次性的讲文档片段添加到文档中，这样可以减少重排的次数。
3. 避免频繁读取布局信息，当获取元素的位置、大小等布局信息时，尽量避免在每次操作中都去读取这些信息，而是将其缓存起来，以减少重排的次数
4. 使用CSS3动画和过渡：CSS3动画和过渡是基于浏览器的硬件加速，可以减少重绘和重排的开销。尽量使用CSS3动画和过渡来实现动画效果，而不是使用js来操作样式属性。
5. 使用requestAnimationFrame: 使用requestAnimationFrame来执行动画可以更好的与浏览器的重绘机制结合，减少不必要的重绘和重排操作
6. 避免频繁的DOM操作：DOM操作会导致重排和重绘，尽量避免频繁的对DOM进行增删改操作，可以先将需要操作的DOM元素从文档中移除，进行批量操作后再重新插入。
7. 使用css布局工具：使用Css的flexBox和Grid等布局工具可以更好地控制页面布局，减少重排的次数。

import y require son dos especificaciones de modularización diferentes de js

La nueva sintaxis modular en ES6 cuando el uso es diferente
a la importación se usa para introducir los objetos exportados de otros módulos ES6 en el código. Es una declaración de nivel superior
que solo puede aparecer en la capa más externa del código js u otras posiciones similares de nivel superior, y no se puede usar en otros bloques de código. import {debounce} from "lodash" require es una sintaxis modular en
el Especificación CommonJS, utilizada en el código Introduzca el objeto exportado del módulo CommonJS, que se puede utilizar en cualquier lugar, incluso dentro de la función o dentro del código const debounce = require("lodash/debounce")
El tiempo de carga es diferente.
La importación se procesará cuando se edite el código, por lo que el módulo correspondiente se ha cargado antes de que se ejecute el código. Esto permite que la importación se analice estáticamente antes de que se ejecute el código, por lo que se optimiza en el momento de la compilación.
El requisito se carga en el tiempo de ejecución, lo que significa que cuando se utiliza el requisito en el código, cargará el módulo cuando se ejecute el código y devolverá su objeto exportado. como el resultado

La sintaxis
de importación es relativamente concisa y se puede realizar la separación del espacio de nombres y la deconstrucción de módulos. Al mismo tiempo, también admite la carga asíncrona de módulos.

//引入lodash模块中的debounce方法并重命名为myDebounce
//解构  只导出需要的内容，减少导出对象的大小
import {debounce as myDebounce} from "lodash"
import * as myModule from "./model.js" //命名空间分离   通过一个对象承载模块的所有导出内容。从而实现命名空间分离
//使用异步函数动态引入模块
const someAsyncModule = await import ('./path/to/module')

La sintaxis de require es relativamente complicada, especialmente cuando se requiere el anidamiento de rutas de varias capas. No puede realizar la separación de espacios de nombres ni es compatible con la sintaxis de desestructuración en ES6. Al mismo tiempo, los módulos no se pueden cargar de forma asíncrona, lo que requiere bibliotecas adicionales o escribir manualmente lógica de carga asíncrona

En resumen, si necesita usar nuevas funciones en Es6 o cargar módulos de forma asíncrona, use import, y si necesita ser compatible con entornos de nodos o CommonJS, puede usar require

Uso de WebSockets

WebSocket es un protocolo para la comunicación full-duplex entre un navegador web y un servidor. Proporciona capacidades de transmisión de datos en tiempo real más potentes En comparación con el modo de solicitud-respuesta HTTP tradicional, WebSocket permite que el servidor envíe activamente datos al cliente, logrando una verdadera comunicación bidireccional.

//创建WebSocket连接   得到一个Websocket对象，url是websocket服务器的地址
const socket = new WebSocket("ws://example.com/socket")

监听事件: WebSocket对象支持多个事件，如`open`,'message',"error"和'close'。通过给WebSocket对象添加对应的事件监听器函数，
可以处理连接打开、接收到消息、出现错误和连接关闭等情况
// 监听连接打开事件
socket.addEventListener("open",event=>{
    console.log("WebSocket 连接已打开");
})
// 监听接受到消息事件
socket.addEventListener("message",event=>{
    console.log("收到消息",event.data);
})
// 监听连接错误事件
socket.addEventListener("error",error=>{
    console.log("WebSocket 错误:",error);
})

//监听连接关闭事件
socket.addEventListener("close",event=>{
    console.log("Websocket 连接已关闭");
})

//发送消息 send(data)方法可以向服务器发送消息。服务器接收到消息后，可以通过‘message’ 事件监听器处理。
//客户端可以使用event.data获取服务器发送的消息内容
socket.send("Hello,Websocket")

//关闭连接:当不再需要连接时，可以使用WebSocket对象的close方法来关闭连接
socket.close()

La conexión WebSocket requiere soporte del servidor, y el servidor debe implementar el protocolo WebSocket correspondiente para manejar la conexión y la transmisión de mensajes.
En el uso real, puede usar el módulo ws como Node.js o el marco Websocket para implementar funciones del lado del servidor

Microtareas y macrotareas y escenarios de uso

Las microtareas y las macrotareas son mecanismos que se utilizan para gestionar el orden de ejecución de las tareas asincrónicas de js. Determinan el orden en que se ejecutan las tareas en el bucle de eventos.
Las microtareas son colas de tareas proporcionadas por el motor js. Su prioridad de ejecución es mayor que la de las tareas macro. Las microtareas comunes incluyen las funciones de devolución de llamada de Promise, MutationObserver y las tareas macro de progreso.nextTick son colas de tareas proporcionadas por los navegadores. Su ejecución La prioridad es baja,
común las tareas de macro incluyen temporizador setTimeout, setinterval, devolución de llamada de evento DOM y solicitud Ajax, etc.

Escenas a utilizar:

Escenarios para usar microtareas:
1. Para las tareas que deben ejecutarse al final del ciclo de eventos actual, puede usar microtareas, como la función de devolución de llamada de Promise.
2 Para las tareas que deben ejecutarse de inmediato, puede usar microtareas, como MutationObserver para monitorear los cambios de DOM y responder de inmediato

Escenarios para el uso de tareas de macro:
1. Para las tareas que deben retrasarse, puede usar tareas de macro, como las funciones de devolución de llamada del temporizador.
2 Las tareas que deben ejecutarse en el siguiente ciclo del ciclo de eventos pueden usar tareas de macro, como devoluciones de llamada de tiempo DOM y solicitudes Ajax

En un bucle de eventos, cuando se ejecutan todas las macrotareas, todas las microtareas se ejecutarán primero y luego se ejecutará la siguiente macrotarea, lo que puede garantizar que la prioridad de las microtareas sea mayor que la de las macrotareas, lo que garantiza una respuesta oportuna y Actualización
En resumen, las microtareas y macrotareas son mecanismos utilizados para administrar el orden de ejecución de tareas asíncronas.La prioridad de ejecución de las microtareas es mayor que la de las macrotareas, y es adecuada para procesar tareas que deben ejecutarse inmediatamente o al final de la misma. el bucle actual. Las macro tareas son adecuadas para procesar tareas que deben retrasarse o ejecutarse en el próximo ciclo

Algunas características y sintaxis comunes en ES6

palabras clave let y const
función de flecha
asignación de desestructuración
operador de propagación
Clases y herencia
cadena de plantilla
promesas y async/await
Símbolo modular
, mapa, conjunto, proxy, reflejo

Reaccionar

La diferencia entre Vue y React

En cinco aspectos:

Sintaxis de plantilla:
Vue utiliza la sintaxis de plantilla HTML para escribir plantillas de componentes, que es relativamente fácil de entender y aprender, lo que permite a los desarrolladores escribir páginas rápidamente. La ventaja de esto es que los códigos HTML y JavaScript están separados,
lo que favorece la facilidad de mantenimiento y la legibilidad del código. La sintaxis de la plantilla de Vue también proporciona algunas funciones potentes, como la representación condicional, la representación en bucle, el manejo de eventos,
etc. interfaz de usuario compleja de manera más eficiente y mejorar el rendimiento de la aplicación,
pero los colegas que usan jsx, necesitan aprender más sintaxis y paradigmas de programación
Enlace de datos
Vue proporciona la función de enlace de datos bidireccional, que puede realizar la sincronización automática de vistas y datos, lo que facilita enormemente la gestión y operación de datos. El enlace bidireccional consta de dos partes: el modelo de datos y el modelo de vista. En Vue, el modelo de datos son los datos en la instancia del componente; el modelo de vista es responsable de vincular los datos del modelo de datos a la vista.
El flujo de datos de React es unidireccional. Adopta la transferencia y gestión de datos de accesorios y estado entre componentes, pasa valores de atributo a componentes a través de accesorios y escucha el evento de cambio de este atributo para actualizar la interfaz de usuario para realizar el flujo unidireccional de datos
; el estado es el lugar para guardar el estado interno del componente. Son datos mutables. Se recomienda utilizar datos inmutables tanto como sea posible en las circunstancias apropiadas.
Clasificación de componentes
Vue divide los componentes en dos tipos: componentes con estado y componentes funcionales sin estado. Los componentes con estado contienen la lógica y los datos en la aplicación y pueden lograr operaciones e interacciones más complejas; los componentes sin estado solo proporcionan una interfaz de interfaz de usuario correspondiente, sin datos ni procesamiento lógico, generalmente se usa para widgets o componentes de visualización puros. Los componentes de Vue tienen funciones de ciclo de vida que pueden realizar diferentes lógicas de procesamiento en diferentes etapas del componente.
React no tiene una clasificación estricta de componentes, pero generalmente divide los componentes en dos tipos: componentes funcionales y componentes de clase. Un componente funcional es una función javascript pura que acepta un objeto props como parámetro y devuelve un elemento React, que no admite funciones de estado y ciclo de vida; un componente de clase utiliza programación orientada a objetos para crear componentes y admite funciones de estado y ciclo de vida . Entonces, los componentes de React también tienen un ciclo de vida, que puede realizar operaciones relacionadas en diferentes etapas del componente.
Tanto Vue como React tienen sus propias funciones de ciclo de vida y llaman a estas funciones en diferentes fases de componentes . Las funciones del ciclo de vida de Vue incluyen creación, montaje, actualización y destrucción, y cada función tiene un propósito y una función específicos. Las funciones del
ciclo de vida de React incluyen componentWillMount, componentDidMount, shouldComponentUpdate, componentWillUnmount, etc., que también tienen sus propias características y usos.
Las funciones del ciclo de vida se pueden utilizar para resolver una serie de problemas y lógica en el proceso de montaje, actualización, destrucción, etc. de componentes.
eficiencia de renderizado

Vue utiliza tecnologías como el DOM virtual y la representación asíncrona para mejorar el rendimiento del programa. Virtual DOM abstrae el DOM real en objetos js, que se pueden comparar y calcular rápidamente, lo que reduce la pérdida de rendimiento causada por las operaciones DOM; la representación asíncrona
permite el navegador para renderizar componentes durante el tiempo de inactividad, mejorando así la eficiencia de renderizado.
React usa un algoritmo llamado reconciliación para actualizar la interfaz de usuario sin volver a renderizar la cantidad total de componentes, lo que también hace que React tenga una alta eficiencia de renderizado.
Cuando se actualice el componente, React actualizará la interfaz de usuario comparando los cambios del DOM virtual, evitando así una gran cantidad de operaciones DOM

Tanto Vue como React son excelentes marcos front-end, que adoptan diferentes métodos de implementación y son adecuados para diferentes escenarios de desarrollo. Vue presta más atención a la experiencia de desarrollo y la facilidad de uso, adecuado para el desarrollo rápido de aplicaciones pequeñas y medianas; React presta más atención a la capacidad de mantenimiento y el rendimiento de la aplicación, adecuado para aplicaciones a gran escala o aplicaciones que requieren una mejor escalabilidad. Qué marco elegir depende de las necesidades del proyecto y las preferencias del equipo

paquete web

webpack-árbol-sacudiendo

摇树（tree Shaking）是指在打包过程中，通过静态分析的方式，去掉没有使用的代码，从而减小最终打包后的文件体积

在Webpack中摇树是通过ES6模块化语法和静态分析工具（如UglifyJS）来实现的。
当Webpack打包时，它会分析模块之间的依赖关系，并且检查哪些代码被实际使用了，哪些去除掉没有被使用的代码

摇树的原理是基于ES6模块化的静态特性，它可以在编译时进行静态分析，因为ES6模块化的导入和导出是静态的，而CommonJS模块化的导入和导出是动态的

要实现摇树，需要满足以下条件：
1 使用ES6模块化语法进行导入和导出
2 代码中的导入必须是静态的，不能使用动态导入
3 代码中的导出必须是静态的，不能使用动态导出

当满足这些条件时，Webpack在打包的过程中会自动进行摇树优化，去掉没有使用的代码，从而减小打包后的文件体积
需要注意的是，摇树只能去掉没有使用的代码，而不能去除没有被导入但被使用的代码。

¿Qué hace webpack cuando npm ejecuta dev?

当你运行npm run dev命令时，webpack会执行一系列的操作来构建和打包你的项目。
1. 根据配置文件（通常是webpack.config.js),webpack会读取配置中的入口文件（entry）和出口文件（output）的路径信息。
2. 根据入口文件的路径，webpack会分析项目的依赖关系，找到所有需要打包的模块。
3. webpack会根据配置中的加载器（loader）对模块进行处理。加载器可以将非js文件（如css，图片等）转换为js模块，或者对js模块进行预处理（如使用Babel进行ES6转换）
4. webpack会根据配置中的插件（plugin）对模块进一步的处理。插件可以用于优化打包结果、拓展webpack的功能等。
5. webpack会根据配置中的出口文件路径和文件名,将打包后的模块输出到指定的目录中
6. 在开发模式下，webpack会启动一个开发服务器（ dev server）,并监听文件的变化，当文件发生变化时，webpack会自动重新构建并刷新浏览器
7 webpack 还会生成一个包含构建信息的统计文件，可以用于分析打包结果、性能优化等

En general: cuando webpack ejecuta npm run dev, compilará y empaquetará el proyecto de acuerdo con el archivo de configuración y proporcionará el servidor de desarrollo y la función de compilación automática, lo cual es conveniente para que los desarrolladores depuren y desarrollen en tiempo real.

caché del paquete web

Webpack proporciona un mecanismo de almacenamiento en caché que puede mejorar el rendimiento de la construcción a través del almacenamiento en caché. El mecanismo de almacenamiento en caché de webpack tiene dos aspectos:

Caché del cargador:
durante el proceso de compilación del paquete web, el cargador puede usar la caché para mejorar el rendimiento.
La caché del cargador puede evitar el procesamiento repetido del mismo archivo, lo que acelera la compilación.
Habilite el almacenamiento en caché del cargador configurando cache:true, por ejemplo:
```
 module:{
     rules:[{
         test:/\.js$/,
         use:'babel-loader',
         options:{
             cacheDirectory:true
         }
     }]
 }
```
Caché del módulo:
durante el proceso de construcción del paquete web, Webpack generará un identificador único (hash) basado en el contenido del módulo.
Si el contenido del módulo no ha cambiado, Webpack reutilizará los resultados de la compilación anterior para evitar reconstruir el módulo, por lo tanto Mejorar la velocidad de construcción.
La memoria caché del módulo se basa en el archivo y solo se reconstruirá cuando cambie el contenido del archivo. La
memoria caché del módulo está habilitada de forma predeterminada y puede establecer cache:true para mostrar que la memoria caché está habilitada.
Al usar la memoria caché del cargador y la memoria caché del módulo, Webpack puede evitar el procesamiento repetido y crear módulos que no cambian, mejorando así el rendimiento y la velocidad de la construcción.
Cabe señalar que el mecanismo de almacenamiento en caché solo tendrá efecto cuando el contenido del archivo encontrado durante el proceso de construcción no haya cambiado.Si el contenido del archivo cambia, Webpack reconstruirá todo el módulo y el árbol de dependencias.

Mecanografiado

Cómo agregar un nuevo tipo en ts

Hay varias formas de crear nuevos tipos en ts:

1. 类型别名（Type Alias）:
    使用type 关键字创建一个类型别名，可以给现有类型起一个新的名字
    例如： type myType = string|Number;
2.接口（interface）:
    使用interface 关键字创建一个接口，用于定义一个对象的结构。
    例如interface MyInterface{name:string;age:number;}
3.类(Class):
    使用class 关键字创建一个类，用于定义一个对象的结构和行为。
    例如: class MyClass{name:string;age:number}
4.枚举（Enum):
    使用enum关键字创建一个枚举类型，用于定义一组具名的常量值。
    例如：enum MyEnum{A,B,C}

La diferencia entre cualquiera y desconocido.

En Typescript, tanto any como unknown se utilizan para representar tipos inciertos y ambos representan tipos arbitrarios, pero existen algunas diferencias entre ellos:

1 可赋值性：
    any 类型可以赋值给任何类型，也可以从任何类型中获取值
    unknown类型只能被赋值给unkown和any类型，不能直接从中获取值。
2 类型检查和类型判断：
  any类型的变量不会进行类型检查，编译器不会对其进行类型推断或类型检查。
  unknow类型的变量在编译器中会进行类型检查，使用之前必须进行类型检查或类型断言
3 方法和属性的调用：
  any类型的变量可以调用任何方法和属性，而不会报错。
  unknown类型的变量不能调用任何方法或属性，除非先进行类型断言或类型检查
4 类型安全性：
  使用any类型会丧失类型安全性，因为它可以接受任何类型的值。
  使用unkonw类型可以提供更好的类型安全性，因为在使用之前必须进行类型检查。
  因此，unkown类型相比于any类型提供了更好的类型检查和类型推断，以及更好的类型安全性，因此，尽量使用unkown

Revisar las preguntas de la entrevista olvidadas hace mucho tiempo