工程化&代码管理高频面试题

这篇具有很好参考价值的文章主要介绍了工程化&代码管理高频面试题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. 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 上传对应分支代码
​
​

公司中每一个项目都会有一个对应的远端仓库(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。

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

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

3. 前端工程化工具

gulp&webpack

gulp -src=>pipe(scss翻译).pipe(css 合并).pipe(css压缩)=>dist
gulp -src=>pipe(模块化编译).pipe(js压缩)=>dist
    流程化
webpack
    模块化 默认支持的commonjs规范
​
所有js模块打包生成一个js文件
编译解析浏览器不能识别的语言 (scss ,.vue, jsx, ts, ES6) 
​
配置?
 入口
 出口
 devserver 启动 自动刷新,热更新, 反向代理
 sourcemap-调试代码 .map (地图)
​
 loaders: sass-loader css-loader file-loader  babel-loader vue-loader postcss-loader
​
 plugin:  压缩, 提取公共库
​
4. 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的转化或者单独抽出。

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

工程化&代码管理高频面试题,前端,elasticsearch,大数据,搜索引擎

5. webpack 4大核心理念, 编译原理?

entry,output , loaders , pluguins ​ 一切皆为模块,由于webpack只支持js文件,所以需要用loader 转换为webpack支持的模块,其中plugin 用于扩张webpack 的功能,在webpack构建生命周期的过程中,在合适的时机做了合适的事情。文章来源地址https://www.toymoban.com/news/detail-820470.html

6. 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 

到了这里,关于工程化&代码管理高频面试题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端面试:【前端工程化】构建工具Webpack、Parcel和Rollup

    嗨,亲爱的前端开发者!在现代Web开发中,前端工程化变得愈发重要。构建工具如Webpack、Parcel和Rollup帮助我们自动化任务、管理依赖、优化性能等。本文将深入探讨这三个前端构建工具,帮助你了解它们的优点和用途。 1. Webpack: 用途: Webpack是一个强大的模块打包工具。它

    2024年02月11日
    浏览(45)
  • 【前端工程化面试题】说一下 webpack 的构建流程

    类似问题是,说一下 vite 的构建流程,参考这篇文章。 初始化流程 从配置文件和shell 语句中读取合并参数,初始化需要使用的插件和执行环境所需要的参数 配置文件默认是 webpack.config.js 编译构建流程 解析入口模块,从入口模块开始串行调用对应的loader 去翻译文件内容,依

    2024年02月20日
    浏览(54)
  • 【前端工程化面试题】如何优化提高 webpack 的构建速度

    使用最新版本的 Webpack 和相关插件 : 每个新版本的 Webpack 都会带来性能方面的改进和优化,因此始终确保你在使用最新版本。同时,更新你的相关插件也是同样重要的。 使用DllPlugin动态链接库: 使用DllPlugin和DllReferencePlugin来将第三方库的代码进行预打包,减少构建时间。这个

    2024年02月19日
    浏览(56)
  • 【前端工程化面试题】使用 webpack 来优化前端性能/ webpack的功能

    这个题目实际上就是来回答 webpack 是干啥的,你对webpack的理解,都是一个问题。 (1)对 webpack 的理解 webpack 为啥提出 + webpack 是啥 + webpack 的主要功能 前端开发通常是基于模块化的,为了提高开发效率,webpack 是一个基于模块的构建工具,是一个用于 js 应用程序的静态模块

    2024年02月20日
    浏览(51)
  • 【前端工程化面试题】webpack的module、bundle、chunk分别指的是什么?

    首先从语法方面 在配置文件中有 module 这个配置项,里面有 rules 选项用来配置各种 loader,还有其他各种选项,参考官网。 bundle 和 chunk 在配置文件中是没有这个选项的,但是会出现在配置的值中。 module 模块 指单个文件,可以是 js、css、图片等, 每个文件都是一个独立的模

    2024年02月19日
    浏览(54)
  • 【前端工程化面试题】webpack proxy的工作原理,为什么能解决跨域问题

    在 webpack 的配置文件 webpack.config.js 中有一个配置项 devServer 里面有一个属性是 proxy,这里面可以配置代理服务器,解决跨域问题,请参考官网。 一般来说 webpack 的代理就是说的开发服务器 webpack-dev-server。 其实不光是 webpack 其他的打包工具比如是 vite,也有代理的功能,也是

    2024年02月21日
    浏览(55)
  • 前端工程化详解——理解与实践前端工程化

    前言: 前端工程化一直是一个老生常谈的问题,不管是面试还是我们在公司做基建都会经常提到前端工程化,那么为什么经常会说到前端工程化,并没有听过后端工程化、Java工程化或者Python工程化呢?我们理解的前端工程化是不是一直都是Webpack的性能调优,或者是一个cli工

    2024年02月02日
    浏览(76)
  • 前端工程化

    手把手带你走进Babel的编译世界 - 掘金 (juejin.cn) 我们所写的代码转换为机器能识别的一种 树形结构, 本身是由一堆节点(Node)组成,每个节点都表示源代码中的一种结构。 不同结构用类型(Type)来区分,常见的节点类型有Identifier(标识符),Expression(表达式),VariableDeclarat

    2023年04月11日
    浏览(92)
  • 前端工程化-VUE

    高效的开发离不开基础工程的搭建。本章主要介绍如何使用Vue进行实际SPA项目的开发,这里使用的是目前热门的JavaScript应用程序模块打包工具Webpack,进行模块化开发、代码编译和打包。 Vue脚手架指的是Vue-cli,它是一个专门为单页面应用快速搭建繁杂程序的脚手架,它可以轻

    2024年02月08日
    浏览(71)
  • 什么是前端工程化?

    前端工程化是一种思想,而不是某种技术。主要目的是为了提高效率和降低成本,也就是说在开发的过程中可以提高开发效率,减少不必要的重复性工作等。 tip 现实生活举例 建房子谁不会呢?请几个工人一上来就开始弄,在建筑的过程中缺了材料就叫个工人去买,发现工期

    2024年02月15日
    浏览(81)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包