前端核心面试题：工程化

@Git

Git常用命令

• add commit push 日常三件套：添加受控、提交、推远程
• stash 暂存（不能达到提交要求的）鸡肋代码
• reset/revert 版本回退
• merge/rebase 合并其它分支
• fetch/pull 拉取远程仓库内容

Git怎么回退版本

• git reset --hard 版本Id = 暴力硬回退至指定版本，其后的历史记录被销毁；
• git revert 版本id = 否定特定版本的贡献 = 将这个版本以前的版本合并到HEAD中来，形成一个最新的快照；
• 硬回退在有充分把握的情况下简单粗暴高效；
• revert不销毁任何一次提交的历史记录，更为稳妥一些；

pull与fetch的区别

• pull将远程仓库的所有更新（分支+快照）同步到本地仓库，并直接将origin/xxx合并到工作区里的xxx分支，有覆盖未提交内容的风险；
• fetch仅仅将远程仓库的所有更新（分支+快照）同步到本地仓库，而不更新工作区内容；
• git pull = git fetch + git merge origin/xxx

merge与rebase的区别

• merge xxx 立足当前分支，将目标分支xxx的代码兼并进来；
• rebase xxx 以xxx的最新提交为底，与当前分支的每次提交一一形成合并版本；
• merge是一步到位的暴力合并，没有过程信息；
• rebase是逐快照地慢慢合并，过程记录完整；
• merge简单粗暴，rebase精细一些，具体使用哪种看公司要求，通常规模越大，对过程的控制要求就越精细；

哪些命令可能形成冲突

• git merge xxx 当前分支兼并其它分支
• git stash pop 暂存区顶部代码包与工作区分支合并
• git revert xxx 目标快照的上一快照与HEAD节点合并
• git rebase xxx 道理同merge
• git pull 远程分支origin/xxx与工作区中的xxx合并

@Webpack

按需加载 VS 异步加载 VS TreeShakig VS Webpack分包

• 按需加载主要指代码层面不引入不需要的东西，典型场景是组件库中只引入自己需要的组件

import {Button} from "antd"

• 异步组件，什么时候访问，就什么时候加载，否则不加载

//同步引入 编译时引入 无论用户访问不访问都引入
//import Home from "@/views/Home.vue"

//异步加载 运行时加载 用户访问该页面时才临时去加载
// 注释部分代表Webpack打包时将该组件打包为about.js这样一个异步chunk
const About = ()=>import(/* webpackChunkName: "about" */,"@/views/About.vue")

• TreeShaking：Webpack打包时自动将引而未用的内容排除在外，启动方式mode:production
• Wepack分包的核心目的是为了最大化地使用包的缓存，例如将常用的第三方包打在vendor.hash.js中，自己的轮子代码打在common.hash.js中，将自身的业务逻辑打在main.hash.js中，当项目需要升级时，如果只改动了业务代码而没有触及轮子与第三方包，则vendor.hash.js与common.hash.js这两个chunk的hash是不变的，HTTP的缓存机制自动生效，用户端只需要更新main.hash.js这一个包即可；