前端八股文（工程化篇）

目录

1.常用的git命令有哪些？

2.git rebase和git merge的区别

3.有哪些常见的Loader和Plugin？

4.webpack的构建流程

5.bundle,chunk,module是什么？

6.如何提高webpack的打包速度

7.vite比webpack快在哪里

8.说一下你对Monorepo的理解

9.如何减少打包后的代码体积

10.Webpack的Tree Shaking原理

---

1.常用的git命令有哪些？

• git clone:克隆远程仓库到本地
• git init：在当前目录初始化一个新的git仓库。
• git add：将文件添加到暂存区，准备提交。
• git commit -m "commit_message"：提交暂存区的改动到本地仓库，附带提交信息。
• git status：查看工作区，暂存区的状态，显示文件的修改情况
• git diff：显示工作区与暂存区之间的差异。
• git diff --staged：显示暂存区与最后一次提交之间的差异
• git log:显示提交日志。
• git branch：列出所有分支，当前分支前会有一个星号。
• git checkout：切换到指定分支
• git checkout -b：创建并切换到新分支
• git merge：将指定分支合并到当前分支
• git pull：拉取远程仓库的更新并合并到当前分支。
• git push：将本地分支的更新推送到远程仓库

---

2.git rebase和git merge的区别

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

• git merge ：将一个分支的更改合并到另一个分支，创建一个新的merge commit ，将两个分支的历史合并在一起，这个merge commit会在分支历史中保留，可以清晰的看到那些分支合并到主分支，合并后形成分叉结构

• git rebase ：两个分支在合并到时候，会将整个分支合并到另一个分支的顶端。首先找到两个分支的共同commit记录，然后提取之后所有的commit，然后将这个commit记录添加到另一个分支的最前面，两个分支合并后commit记录就变成线性记录

---

3.有哪些常见的Loader和Plugin？

Loader:

• image-loader：加载并压缩图片文件
• css-loader：加载css，支持模块化，压缩，文件导入等特性
• style-loader：把css代码注入到JavaScript中，通过DOM操作去加载CSS
• eslint-loader：通过ESlint检查JavaScript代码
• tslint-loader：通过TSLint检查TyepScript代码
• 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 提取为独立文件，支持按需加载

---

4.webpack的构建流程

总结就是三个阶段：

1. 初始化参数：从配置文件或者shell语句中读取合并参数
2. 开始编译：用参数初始化Compiler对象，加载所有配置的插件，执行run方法。
3. 确定入口：根据entry参数找到入口文件
4. 编译模块：从???件出发，调?所有配置的 Loader 对模块进?翻译，再找出该模块依赖的模块，再递归本步骤直到所有??依赖的?件都经过了本步骤的处理；
5. 完成模块编译：在经过第4步使? Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系；
6. 输出资源：根据??和模块之间的依赖关系，组装成?个个包含多个模块的 Chunk，再把每个 Chunk 转换成?个单独的?件加?到输出列表，这步是可以修改输出内容的最后机会；
7. 输出完成：在确定好输出内容后，根据配置确定输出的路径和?件名，把?件内容写?到?件系统
8. 初始化：启动构建，读取与合并配置参数，加载 Plugin，实例化 Compiler
9. 编译：从 Entry 出发，针对每个 Module 串行调用对应的 Loader 去翻译文件的内容，再找到该 Module 依赖的 Module，递归地进行编译处理
10. 输出：将编译后的 Module 组合成 Chunk，将 Chunk 转换成文件，输出到文件系统中

---

5.bundle,chunk,module是什么？

• bundle捆绑包：它是构建过程的最终产物，需要chunk和module组成
• chunk代码包：一个chunk由多个模块组合而成，用于代码的合并和分割,在构建过程中一起被打包到一个文件中。
• module模块：是代码的基本单位，可以是一个文件，一个组件，一个库等。在编译的时候会从entry中递归寻找出所有的依赖的模块。

---

6.如何提高webpack的打包速度

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

---

7.vite比webpack快在哪里

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

他们都是前端构建工具，但vite构建速度相对于webpack还是有一些速度优势

---

8.说一下你对Monorepo的理解

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

Monorepo是一种将多个项目代码存储在一个仓库的代码管理方式，将不同的项目代码放在一个仓库中，优缺点如下： 优点：

更好的实现代码复用，方便代码管理 可以复用项目基础设施，不需要每个项目都建立一遍 更好的CR 子项目模块之间的关系更加透明，可以实现一次命令完成所有部署。 管理依赖变得更加简单，可以在一个统一的环境中处理依赖库的版本和更新。

缺点：

• 代码权限管理变得很复杂
• 项目上手学习成本高，需要了解子项目之间的依赖关系
• 项目基础建设、依赖管理、代码搜索、分支模型等技术要求会很高
• 所以代码放在一次，会导致项目仓库体积过大，clone等操作会变很慢
  • 一种开放，透明，共享的组织文化，这有利于开发者成长，代码质量的提升

---

9.如何减少打包后的代码体积

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

---

10.Webpack的Tree Shaking原理

Tree Shaking 也叫摇树优化，是一种通过移除多于代码，从而减小最终生成的代码体积，生产环境默认开启。

原理：

• ES6 模块系统：Tree Shaking的基础是ES6模块系统，它具有静态特性，意味着模块的导入和导出关系在编译时就已经确定，不会受到程序运行时的影响。
• 静态分析：在Webpack构建过程中，Webpack会通过静态分析依赖图，从入口文件开始，逐级追踪每个模块的依赖关系，以及模块之间的导入和导出关系。
• 标记未使用代码： 在分析模块依赖时，Webpack会标记每个变量、函数、类和导入，以确定它们是否被实际使用。如果一个导入的模块只是被导入而没有被使用，或者某个模块的部分代码没有被使用，Webpack会将这些未使用的部分标记为"unused"。
• 删除未使用代码: 在代码标记为未使用后，Webpack会在最终的代码生成阶段，通过工具（如UglifyJS等）删除这些未使用的代码。这包括未使用的模块、函数、变量和导入。