Git

常用的git命令

git clone：克隆远程仓库到本地。
git init：在当前目录初始化一个新的Git仓库。
git add ：将文件添加到暂存区，准备提交。
git commit -m "commit_message" ：提交暂存区的改动到本地仓库，附带提交信息。
git remote-v：查看所有远程仓库，不带参数-v只显示名称
git status：查看工作区、暂存区的状态，显示文件的修改情况。
git tag：查看标签列表
git diff：显示工作区与暂存区之间的差异。
git diff --staged：显示暂存区与最后一次提交之间的差异。
git log：显示提交日志，包括提交哈希、作者、日期等信息。
git branch：列出所有分支，当前分支前会有一个星号。
git checkout ：切换到指定分支。
git checkout -b ：创建并切换到新分支。
git merge [branch] ：将指定分支合并到当前分支。
git pull ：拉取远程仓库的更新并合并到当前分支。
git fetch [remote]：获取远程仓库的所有变动到本地仓库，不会自动合并！需要手动合并
git push ：将本地分支的更新推送到远程仓库。
git reset--hard [commit]：回退到指定版本，并重置工作区、暂存区内容。

git rebase和git merge的区别

git rebase 和 git merge 都是用于合并分支的 Git 命令，这两个命令都能将一个分支合并到另一个分支，但两者合并方式有很大不同

1、rebase把当前的commit放到公共分支的最后面，merge把当前的commit和公共分支合并在一起；

2、merge:用merge命令解决完冲突后会产生一个commit，而用命令解决完冲突后不会产生额外的commit。

Webpack

webpack配置

entry：入口文件
output：输出文件配置
resolve：用来配置模块的解析方式
module：用来配置模块如何被解析
plugins：插件
devServer：开发服务器配置
devtool：调试工具
optimization：优化相关配置
externals：外部扩展的配置
performance：性能相关配置
target：构建的目标环境

Loader

image-loader : 加载并且压缩图片文件
css-loader : 加载 CSS，支持模块化、压缩、文件导入等特性
style-loader : 把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS
eslint-loader : 通过 ESLint 检查 JavaScript 代码
tslint-loader : 通过 TSLint检查 TypeScript 代码
babel-loader : 把 ES6 转换成 ES5

Plugin

define-plugin : 定义环境变量
html-webpack-plugin : 简化 HTML 文件创建
webpack-parallel-uglify-plugin : 多进程执行代码压缩，提升构建速度
webpack-bundle-analyzer : 可视化 Webpack 输出文件的体积
speed-measure-webpack-plugin : 可以看到每个 Loader 和 Plugin 执行耗时 (整个打包耗时、每个 Plugin 和 Loader 耗时)
mini-css-extract-plugin : 分离样式文件，CSS 提取为独立文件，支持按需加载

Loader和Plugin的区别

功能不同：

Loader 本质是一个函数，它是一个转换器。webpack只能解析原生js文件，对于其他类型文件就需要用loader进行转换。
Plugin 它是一个插件，用于增强webpack功能。webpack在运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 webpack 提供的 API 改变输出结果。

用法不同

Loader 的配置是在module.rules下进行。类型为数组，每⼀项都是⼀个 Object ，⾥⾯描述了对于什么类型的⽂件（ test ），使⽤什么加载( loader )和使⽤的参数（ options ）
Plugin 的配置在plugins下。类型为数组，每一项是一个 Plugin 的实例，参数都通过构造函数传入。

webpack的构建流程

初始化参数：从配置文件或者shell语句中读取合并参数
开始编译 ：用参数初始化Compiler对象，加载所有配置的插件，执行run方法。
确定入口 ：根据entry参数找到入口文件
编译模块 ：从⼊⼝⽂件出发，调⽤所有配置的 Loader 对模块进⾏翻译，再找出该模块依赖的模块，再递归本步骤直到所有⼊⼝依赖的⽂件都经过了本步骤的处理；
完成模块编译 ：在经过第4步使⽤ Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系；
输出资源 ：根据⼊⼝和模块之间的依赖关系，组装成⼀个个包含多个模块的 Chunk，再把每个 Chunk 转换成⼀个单独的⽂件加⼊到输出列表，这步是可以修改输出内容的最后机会；
输出完成：在确定好输出内容后，根据配置确定输出的路径和⽂件名，把⽂件内容写⼊到⽂件系统

总结就是三个阶段：

初始化 ：启动构建，读取与合并配置参数，加载 Plugin，实例化 Compiler
编译：从 Entry 出发，针对每个 Module 串行调用对应的 Loader 去翻译文件的内容，再找到该 Module 依赖的 Module，递归地进行编译处理
输出：将编译后的 Module 组合成 Chunk，将 Chunk 转换成文件，输出到文件系统中

webpack热更新

Webpack热更新（Hot Module Replacement，简称HMR）是一种Webpack的功能，用于在开发过程中实现模块的动态替换和更新 ，而无需刷新整个页面 。它提供了一种快速的开发体验，允许开发者在保持应用状态的同时，实时预览修改的效果。

工作原理

在启动Webpack开发服务器时，会创建一个WebSocket或轮询连接，用于与浏览器建立通信通道。
当一个模块发生变化时，Webpack会使用热更新插件（Hot Module Replacement Plugin）捕获这个变化。
Webpack将变化的模块以及其依赖模块打包成一个或多个更新补丁（update chunk），并通过通信通道将这些更新补丁发送给浏览器。
浏览器接收到更新补丁后，使用热更新的运行时（Hot Module Replacement Runtime）解析和处理这些补丁。
运行时根据更新补丁对模块进行动态替换和更新，同时尽可能地保持应用的状态。替换过程不会刷新整个页面，而是只替换发生变化的模块和相关依赖的代码。

提高webpack的打包速度

利用缓存 ：利用Webpack的持久缓存功能，避免重复构建没有变化的代码。可以使用cache: true选项启用缓存。
使用多进程/多线程构建 ：使用thread-loader、happypack等插件可以将构建过程分解为多个进程或线程，从而利用多核处理器加速构建。
使用DllPlugin和HardSourceWebpackPlugin ： DllPlugin可以将第三方库预先打包成单独的文件，减少构建时间。HardSourceWebpackPlugin可以缓存中间文件，加速后续构建过程。
使用Tree Shaking : 配置Webpack的Tree Shaking机制，去除未使用的代码，减小生成的文件体积
移除不必要的插件: 移除不必要的插件和配置，避免不必要的复杂性和性能开销。

减少打包后的代码体积

代码分割（Code Splitting） ：将应用程序的代码划分为多个代码块，按需加载。这可以减小初始加载的体积，使页面更快加载。
Tree Shaking ：配置Webpack的Tree Shaking机制，去除未使用的代码。这可以从模块中移除那些在项目中没有被引用到的部分。
压缩代码 ：使用工具如UglifyJS或Terser来压缩JavaScript代码。这会删除空格、注释和不必要的代码，减小文件体积。
使用生产模式 ：在Webpack中使用生产模式，通过设置mode: 'production'来启用优化。这会自动应用一系列性能优化策略，包括代码压缩和Tree Shaking。
使用压缩工具 ：使用现代的压缩工具，如Brotli和Gzip，来对静态资源进行压缩，从而减小传输体积。
利用CDN加速：将项目中引用的静态资源路径修改为CDN上的路径，减少图片、字体等静态资源等打包。

vite和webpack区别

冷启动速度 ：vite是利用浏览器的原生ES moudle，采用按需加载的当时，而不是将整个项目打包。而webpack是将整个项目打包成一个或多个bundle，构建过程复杂。
HMR热更新 ： vite使用浏览器内置的ES模块功能，使得在开发模式下的热模块替换更加高效，那个文件更新就加载那个文件。它通过WebSocket在模块级别上进行实时更新，而不是像Webpack那样在热更新时重新加载整个包。
构建速度 ：在生产环境下，Vite的构建速度也通常比Webpack快，因为Vite的按需加载策略避免了将所有代码打包到一个大文件中。而且，Vite对于缓存、预构建等方面的优化也有助于减少构建时间。
缓存策略 ： Vite利用浏览器的缓存机制，将依赖的模块存储在浏览器中，避免重复加载。这使得页面之间的切换更加迅速。
不需要预编译 ： Vite不需要预编译或生成中间文件，因此不会产生大量的临时文件，减少了文件IO操作，进一步提升了速度。

前端工程化

Git