CI 环境下的 npm 优化CI 环境下的 npm 配置 和 本地环境下的 npm 操作有些许不同，我们首先来看看 CI 环境下的 npm 优化方法 1. 合理使用 npm ci 命令 和 npm install 命令顾名思义，npm ci 命令就是专门为 CI 环境准备的安装命令，相比于 npm install命令，它的不同之处有以下几点。

Webpack 的热更新（Hot Module Replacement，HMR）是一种使得开发者在修改代码时，无需手动刷新浏览器页面即可立即查看到更新效果的技术。其原理如下：

模块化的发展历程经历了多个阶段，从早期的自执行函数（IIFE）到现代的 ES Module，每个阶段都在不断地解决代码组织、依赖管理和模块加载等问题。下面是模块化发展历程的简要介绍： 1. IIFE（立即执行函数）：在早期的 JavaScript 开发中，为了避免全局变量的污染和命名冲突，开发者经常使用自执行函数（Immediately Invoked Function Expression，IIFE）来创建一个独立的作用域，将代码封装起来，达到模块化的效果。但是这种方式并没有真正解决模块化的问题，只是通过作用域的隔离来减少了全局污染的风险。

核心工作流程Webpack 作为一个强大的模块打包工具，其核心工作流程可以看作是一部精心编排的交响乐，而 Loader 和 Plugin则是其中的两大核心乐器。 整个流程始于一个或多个入口(Entry)文件。Webpack从入口出发，递归地解析代码中的 import 和require 语句，构建出一张包含所有模块及其相互关系的依赖图(Dependency Graph)。 loader在这个构建依赖图的过程中，Loader 扮演了翻译官的角色。Webpack 原生只理解 JavaScript 和 JSON 文件。当它遇到如.scss、.tsx、.png 等非 JavaScript 类型的文件时，就会查找匹配的 Loader。Loader 的职责就是将这些文件转换成 Webpack 能够理解和处理的有效模块。例如，babel-loader 将ES6+ 语法转译为 ES5，css-loader 解析 CSS 文件。Loader 的作用域是单个文件，它在模块加载的环节执行。 plugin当所有模块都被 Loader 成功“翻译”后，Plugin 便登上了舞台。Plugin 是架构师，它不直接操作单个文件，而是深入到 Webpack 编译的整个生命周期中。通过监听 Webpack广播出的事件钩子，Plugin 可以在打包过程的特定时刻执行广泛的任务，从而实现对打包结果的自定义和优化。比如,Htmlwebpackplugin 可以在打包结束后自动生成个 HTML 文件并注入打包好的脚本， TerserwebpackPlugin 则负责在最终输出前对代码进行压缩。 简而言之，Loader 负责内容的转换，Plugin 负责流程的扩展。前者是输入到输出的管道，后者是整个构建过程的控制器。 如何提升 webpack 的构造性能1. speed-measure-webpack-plugin优化你的 webpack 构建速度的第一步是要知道你应该把注意力集中在哪里，在这里推荐一个插件：speed-measure-webpack-plugin，这个插件可以测量你的 webpack 构建速度。

基本概念Docker 是一个用于 构建、运行、传送 应用程序的平台。 将以下这些打包，以便在任何环境中都可以正确地运行：

一个很好的练习事件循环的网站 https://www.jsv9000.app/ JS 将 异步任务 分为宏任务和微任务

简介Nginx（发音为”engine-x”）是一个高性能的开源 Web 服务器和反向代理服务器。以下是 Nginx 的一些关键特点和简介： 高性能： Nginx 以高性能而著称，能够处理大量并发连接，同时占用较少的系统资源。它的事件驱动架构和非阻塞 IO 模型有助于实现高效的性能。 轻量级和可扩展： Nginx 的设计目标之一是保持简单、轻量级且可扩展。它的模块化架构使得用户可以根据需要选择性地添加功能模块。 反向代理： Nginx 可以用作反向代理服务器，接收客户端请求并将其转发到后端服务器。这使得它成为负载均衡和提高 Web 应用性能的理想选择。 负载均衡： Nginx 支持基于轮询、IP 哈希等算法的负载均衡，能够平均分配流量到多个后端服务器，提高系统的可用性和稳定性。

BFF，既 Backend For Frontend。 中文翻译过来的意思是前端的后端。 介绍前端后端 (BFF) 是一种架构模式，涉及为每个客户端应用程序创建单独的后端。这可以更好地分离关注点，因为可以根据客户端应用程序的需求专门定制后端。BFF 还可以通过减少客户端和服务器之间需要传输的数据量来提高性能和可扩展性。

React 中的合成事件（SyntheticEvent）是一种封装了原生浏览器事件的虚拟事件对象。React 通过合成事件来处理浏览器事件，而不直接使用原生的事件对象。这样做的原因有以下几点：

组件初始化—-render 方法—->生成虚拟 DOM—ReactDOM.render 方法—>真实 DOM 组件更新—- render 方法—->生成新的虚拟 DOM—-diff 算法—->定位出两次虚拟 DOM 的差异