面试题 - 前端 - 工程化&代码管理

发表于 更新于 分类于 阅读次数：

git 常用命令

git init 初始化仓库

git status 查看当前各个区域的代码状态。

git log 查看 commit 记录

git reflog 查看完整记录

git add 添加工作区代码到暂存区

Git commit 暂存区代码的提交

git reset 代码的版本回退

git stash 将暂存处代码收起来

git stash pop 将收起来的暂存区的代码释放出来

Git tag 可以打标签

Git branch 基于当前分支创建一个分支

git checkout 切换分支

git merge 合并分支

git remote add origin 添加远端仓库地址

git clone 克隆仓库

git pull 下拉对应分支代码

git push 上传对应分支代码

工作中都怎么用 git

公司中每一个项目都会有一个对应的远端仓库（gitLab），我们需要创建账号并配置权限。

一般公司会有几个主要分支，分别对应 4 个环境，当代码更新的时候会通过流水线自动部署到对应的环境：

  1. 发布分支（prod、master）这个分支代码对应的就是线上的代码

  2. UAT 分支（uat），这个分支上的代码对应的是公司内部演示用的分支

  3. TEST 分支（test），这个分支的代码是用于测试

  4. DEV 分支（dev），研发自测分支

正常功能开发或者 bug 修复， 从 dev 分支拉取代码，进行开发就可以。

如果是解决线上 bug，应该从 master 拉取一个分支（hotfix__）, 然后开发完成后将其合并到 test 或者 uat，测试没有问题后，将其合并到 master。还要将 hotfix 上对应的 commit 合并到 dev 分支， 专业 dev 分支也就修复了这个 bug。

如果当前版本代码需要回退（功能不做了，要么要去先着急干别的）， 执行 git reset –hard， 再回到当前的 commit 也是 git reset 只不过需要注意，此时要通过 git reflog 来查看时间最后的一次 commit。

sass 和 scss 的区别

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

scss 只是 sass 的一个语言版本，.scss 文件的特点是层级靠{}来区分，.sass 文件的特点的层级靠缩进来区分

webpack 理解

webpack 就是一个模块化的打包工具。而且能将浏览器不认识的语言，进行编译分析，最终打包生成浏览器认识的语言（需要配置相关 loader 和插件）。

webpack 配置

webpack 包含 mode 模式、entry 入口、output 出口、plugins 插件、loader、resolve、devServer 开发服务器相关的基本配置。

在 webpack 中可以通过多入口的配置，每个入口都会去查询对应的依赖关系图，进行单独的代码。

在模块化开发过程中往往会将各种不同类型的文件都看做是模块来进行互相导入导出，比如将图片、css、sass 之类的文件都可以导入到 js 文件中，但是在打包的过程中需要将这些文件都寻找到然后单独的分离出去，这样就需要用到对应的 loader 来进行文件处理，不同的文件、不同的 loader，处理方式也不一样。

比如 css 文件可以利用 style-loader 将其代码生成 style 标签放入到 head 中，也可以利用 minicssextra 插件中 loader 将其抽离成 css 文件。

img 文件可以利用 url-loader 和 file-loader 对其进行 base64 的转化或者单独抽出。

是否熟知 webpack 代码分割

对于单页面应用，为了加快首页加载，就需要进行代码分隔。

组件模块化导入的时候可以采用懒加载的形式，就会单独打包对应的代码。

有时候我们想把某个路由下的所有组件都打包在同个异步块（chunk）中。只需要使用命名 chunk，一个特殊的注释语法来提供 chunk name（需要 Webpack ＞ 2.4）：

1
2
3
const UserDetails = () => import(/* webpackChunkName: "group-user" */ './UserDetails.vue');
const UserDashboard = () => import(/* webpackChunkName: "group-user" */ './UserDashboard.vue');
const UserProfileEdit = () => import(/* webpackChunkName: "group-user" */ './UserProfileEdit.vue');

webpack 4 大核心理念， 编译原理

entry,output , loaders , pluguins
​ 一切皆为模块，由于 webpack 只支持 js 文件，所以需要用 loader 转换为 webpack 支持的模块，其中 plugin 用于扩张 webpack 的功能，在 webpack 构建生命周期的过程中，在合适的时机做了合适的事情。

webapck 构建优化实战 (打包时间过长， 可以优化时间短点 20s)

  1. 提取公共库， 避免重复引用。 使用 DllPlugin，把第三方库文件分离出来单独编译，并且缓存; 极大的减少业务页面的编译时间。dll 方式也就是通过配置，告诉 webpack 指定库在项目中的位置，从而直接引入，不将其打包在内。
  2. happypack, 多线程解析文件，如 babel-loader 等耗时较长的。还可以配合 cache-loader 使用。
  3. 缓存 cache-loader
  4. loaders 应尽可能配置解析路径 include 参数，排除路径 exclude 参数， 减少解析时查询范围。
  5. dev 阶段 devtool 设置成 cheap-module-eval-source-map， 已经能满足调试需求， 编译能更快。
  6. product 阶段 去掉 source-map