前端八股文（工程化篇）

目录

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等）删除这些未使用的代码。这包括未使用的模块、函数、变量和导入。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/310095.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【MATLAB】PSO粒子群优化LSTM（PSO_LSTM）的时间序列预测

【MATLAB】PSO粒子群优化LSTM（PSO_LSTM）的时间序列预测

有意向获取代码，请转文末观看代码获取方式~也可转原文链接获取~ 1 基本定义 PSO粒子群优化LSTM（PSO-LSTM）是一种将粒子群优化算法（PSO）与长短期记忆神经网络（LSTM）相结合的混合模型。该算法通过…
阅读更多...
springboot 项目新建流程

springboot 项目新建流程

一、新建工程 二、工程建好后&#xff0c;在pom文件中加入springboot 依赖 <dependencies><!--SpringBoot启动依赖--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId>&l…
阅读更多...
uniapp打包Android、Ios、微信小程序

uniapp打包Android、Ios、微信小程序

首先我们需要在我们的代码中&#xff0c;把我们所要用到的配置信息配置好&#xff0c;在检查一下我们测试的内容是否有打开&#xff08;取消注释&#xff09;&#xff0c;在检查一下我们的版本信息是否正确&#xff0c;查看一下接口ip是否是正式线 这里的配置信息一定要配置好…
阅读更多...
STM32 ESP8266 物联网智能温室大棚 源码PCB原理图 设计文档

STM32 ESP8266 物联网智能温室大棚 源码PCB原理图 设计文档

资料下载: https://download.csdn.net/download/vvoennvv/88680924 一、概述 本系统以STM32F103C8T6单片机为主控芯片&#xff0c;采用相关传感器构建系统硬件电路。其中使用DHT11温湿度传感器对温度和湿度的采集&#xff0c;MQ-7一氧化碳传感器检测CO浓度&#xff0c;GP2Y101…
阅读更多...
【privateGPT】使用privateGPT训练您自己的LLM

【privateGPT】使用privateGPT训练您自己的LLM

了解如何在不向提供商公开您的私人数据的情况下训练您自己的语言模型 使用OpenAI的ChatGPT等公共人工智能服务的主要担忧之一是将您的私人数据暴露给提供商的风险。对于商业用途&#xff0c;这仍然是考虑采用人工智能技术的公司最大的担忧。 很多时候&#xff0c;你想创建自己…
阅读更多...
介绍一款PDF在线工具

介绍一款PDF在线工具

PDF是我们日常工作中的一种常见格式&#xff0c;其处理也是我们工作的重要基础性环节&#xff0c;一款可靠的处理工具显得十分重要。 完全免费、易于使用、丰富的PDF处理工具&#xff0c;包括&#xff1a;合并、拆分、压缩、转换、旋转和解锁PDF文件&#xff0c;以及给PDF文件…
阅读更多...
python+django在线学习教学辅助作业系统gp6yp

python+django在线学习教学辅助作业系统gp6yp

本课题使用Python语言进行开发。基于web,代码层面的操作主要在PyCharm中进行&#xff0c;将系统所使用到的表以及数据存储到MySQL数据库中 技术栈 后端&#xff1a;pythondjango 前端&#xff1a;vue.jselementui 框架&#xff1a;django/flask Python版本&#xff1a;python3.…
阅读更多...
动态路由传参与查询参数传参详情

动态路由传参与查询参数传参详情

动态路由传参 路由规则path :/article/:aid 组件获取参数: this. $route. params.aid 如果想要所有的值&#xff0c;就用this. $route. params 注意&#xff1a;这两个必须匹配 如果是多个参数&#xff0c;path :/article/:aid/:name就写两个参数 接收方式一&#xff1a; 在…
阅读更多...
基于JAVA+SSM+VUE的前后端分离的大学竞赛管理系统

基于JAVA+SSM+VUE的前后端分离的大学竞赛管理系统

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取项目下载方式&#x1f345; 一、项目背景介绍&#xff1a; 随着互联网技术的快速…
阅读更多...
51单片机的中断相关知识

51单片机的中断相关知识

51单片机的中断相关知识点 一、中断概念和功能 概念 程序执行过程中CPU会遇到一些特殊情况&#xff0c;是正在执行的程序被“中断”&#xff0c;cpu中止原来正在执行的程序&#xff0c;转到处理异常情况或特殊事件的程序去执行&#xff0c;结束后再返回到原被中止的程序处(断…
阅读更多...
代码随想录刷题 | Day1

代码随想录刷题 | Day1

今日学习目标 一、基础 数组 array类 模板类vector 数组是存放在连续内存空间上的相同类型数据的集合。 数组可以方便的通过下标索引的方式获取到下标下对应的数据。 需要两点注意的是 数组下标都是从0开始的。 数组内存空间的地址是连续的 而且大家如果使用C的话&…
阅读更多...
条件编译处理多端差异

条件编译处理多端差异

条件编译https://uniapp.dcloud.net.cn/tutorial/platform.html#%E4%B8%BA%E4%BB%80%E4%B9%88%E9%80%89%E6%8B%A9%E6%9D%A1%E4%BB%B6%E7%BC%96%E8%AF%91%E5%A4%84%E7%90%86%E8%B7%A8%E7%AB%AF%E5%85%BC%E5%AE%B9 <template><view class"container"><…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023