前端八股文(工程化篇)

目录

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 : 可以看到每个 LoaderPlugin 执行耗时 (整个打包耗时、每个 PluginLoader 耗时)
  • 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-loaderhappypack等插件可以将构建过程分解为多个进程或线程,从而利用多核处理器加速构建。
  • 使用DllPlugin和HardSourceWebpackPluginDllPlugin可以将第三方库预先打包成单独的文件,减少构建时间。HardSourceWebpackPlugin可以缓存中间文件,加速后续构建过程。
  • 使用Tree Shaking: 配置WebpackTree Shaking机制,去除未使用的代码,减小生成的文件体积
  • 移除不必要的插件: 移除不必要的插件和配置,避免不必要的复杂性和性能开销。

7.vite比webpack快在哪里

  • 利用缓存:利用Webpack的持久缓存功能,避免重复构建没有变化的代码。可以使用cache: true选项启用缓存。
  • 使用多进程/多线程构建 :使用thread-loaderhappypack等插件可以将构建过程分解为多个进程或线程,从而利用多核处理器加速构建。
  • 使用DllPlugin和HardSourceWebpackPluginDllPlugin可以将第三方库预先打包成单独的文件,减少构建时间。HardSourceWebpackPlugin可以缓存中间文件,加速后续构建过程。
  • 使用Tree Shaking: 配置WebpackTree 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:配置WebpackTree Shaking机制,去除未使用的代码。这可以从模块中移除那些在项目中没有被引用到的部分。
  • 压缩代码:使用工具如UglifyJSTerser来压缩JavaScript代码。这会删除空格、注释和不必要的代码,减小文件体积。
  • 使用生产模式:在Webpack中使用生产模式,通过设置mode: 'production'来启用优化。这会自动应用一系列性能优化策略,包括代码压缩和Tree Shaking
  • 使用压缩工具:使用现代的压缩工具,如BrotliGzip,来对静态资源进行压缩,从而减小传输体积。
  • 利用CDN加速:将项目中引用的静态资源路径修改为CDN上的路径,减少图片、字体等静态资源等打包。

10.Webpack的Tree Shaking原理

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

原理:

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