面试总结-webpack/git

说说你对webpack的理解

webpack 是一个静态模块打包器,整个打包过程就像是一条生产线,把资源从入口放进去,经过一系列的加工(loader),最终转换成我们想要的结果,整个加工过程还会有监控,在特定的时机,插件就会对资源做处理

Webpack中Loader和Plugin的区别

  • 1、因为webpack只认识JS和JSON,所以Loader相当于翻译官,将其他类型资源进行预处理。
  • 2、Plugin功能更强大,主要目的就是解决loader 无法实现的事情,比如打包优化和代码压缩等。
    Plugin加载后,在webpack构建的某个时间节点就会触发plugin定义的功能,帮助webpack做一些事情。实现对webpack的功能扩展。
    常见的Plugin有哪些
    html-webpack-plugin 处理html资源,默认会创建一个空的HTML,自动引入打包输出的所有资源(js/css)
    mini-css-extract-plugin 打包过后的css在js文件里,该插件可以把css单独抽出来
    clean-webpack-plugin 每次打包时候,CleanWebpackPlugin 插件就会自动把上一次打的包删除
  • 3、运行时机
    1.loader运行在编译阶段
    2.plugins 在整个周期都

为什么要用打包工具(开发环境和生存环境有什么区别)

在没有weapack之前,

  • 作用域问题:所有引用的文件,都挂在在window,如jquery
  • 文件太大:如果分散加载,内容逐渐显示,如果合并加载文件太大,白屏时间长
  • 可读性差:和在一个文件里,可读性差
  • 可维护性弱

在这里插入图片描述

基本配置:

在这里插入图片描述
在这里插入图片描述

开发模式配置介绍:

在这里插入图片描述

loader:帮助webpack识别不能识别的模块,只要是对,less/scss/style/jsx/tsx/图片/视频

  • style-loader
  • css-loader

plugins

devServer

webpack优化

在这里插入图片描述

1、提升开发体验

  • 1、sourceMap在这里插入图片描述

2、提升打包构建速度(一般是对js处理)

1、 开启HMR:修改那个文件只会刷新那一个文件,不会整个页面刷新
- 上面那样配置css就可以生效了
- js还需要另外的配置,react可以使用react-hot-loader来设置
2、oneOf:让我们的文件只被其中一个loader文件处理,每个文件只执行一个loader,提升打包速度
3、Include/Exclude:排除第三方和nodeModule文件,这些不需要编译,只处理src文件,提升打包速度(只能用一种),只能对js进行处理
4、catch:提升第二次编辑及以后的打包速度,第二次打包不会打包所有。只会检查修改的文件进行重新检查和babel编译

在这里插入图片描述
在这里插入图片描述

5、Thead:多进程打包

在这里插入图片描述
配置方法:
在这里插入图片描述
在这里插入图片描述
js代码压缩:
在这里插入图片描述

减少代码体积

1、tree shaking:引用的第三方库中,移除没有引用的工具函数等

在这里插入图片描述

2、plugin-transform-runtime:减少babel打包的文件体积

在这里插入图片描述

3、图片压缩

在这里插入图片描述

优化代码运行性能

code split 代码分割,实现按需加载

在这里插入图片描述

webpack5和webpack4区别(https://juejin.cn/post/6990869970385109005)

  • Tree Shaking:自动剔除第三方包里面没有引入的方法
    当我们引入第三方包的时候,如果只引入的一个方法,其他没有用到的方法是冗余放入,Tree Shaking就可以自动帮我们把那些没有用的东西提出掉,来减少bundle的体积
  • webpack4需要安装插件 terser-webpack-plugin 才能实现js压缩,webpack5内置了插件不需要安装,而且设置mode=“production” 的时候会自动开启 js 压缩功能。
  • webpack5 内部内置了 cache 缓存机制。直接配置即
// webpack.config.js
module.exports= {// 使用持久化缓存cache: {type: 'filesystem',cacheDirectory: path.join(__dirname, 'node_modules/.cac/webpack')}
}

git

  • 1、git pull和git fetch的区别
    • git fetch只是将远程仓库的最新的版本下载到本地,但是不会自动merge,相当于工作区中的文件并没有更新
    • git pull会从远程仓库获取到最新的版本并merge到本地。
    • git pull origin dev=git fetch origin dev+git merge origin/dev;
    • git fetch更保险一些,git pull操作更简单
  • 2、git merge和git rebase的区别
    • 共同点:将一个分支的更改并入另一个分支,只不过方式有些不同
    • 不同点:
      • merge如果master有新提交,合并之后有冲突,仅需修改之后重新提交,后会生一个新的commit,整个历史记录比较混乱
      • rebase如果master有新提交,合并之后有冲突,不会产生额外的commit。这样的好处是,‘干净’;如果合并的分支中存在多个commit,需要重复处理多次冲突。

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

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

相关文章

接口测试和功能测试的区别

接口测试和功能测试的区别: 2023最新Jmeter接口测试从入门到精通(全套项目实战教程) 本文主要分为两个部分: 第一部分:主要从问题出发,引入接口测试的相关内容并与前端测试进行简单对比,总结两者…

利用SimpleDateFormat或者LocalDateTime生成格式为“yyyy-MM-dd HH:mm:ss“的当前时间

java程序: // 利用LocalDateTime生成格式为"yyyy-MM-dd HH:mm:ss"的当前时间 DateTimeFormatter formatter DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss"); LocalDateTime now LocalDateTime.now(); String time1 now.format(format…

(7)(7.4) 集结航点

文章目录 7.4.1 概述 7.4.2 设置集结航点 7.4.3 飞行示例 7.4.4 附录 7.4.1 概述 通常情况下,当固定翼或旋翼飞机进入"返回发射"(Return to Launch (RTL))模式(通常由自动驾驶仪失控保护触发)(failsafe)时,默认行为…

Spring Task入门案例

Spring Task 是Spring框架提供的任务调度工具,可以按照约定的时间自动执行某个代码逻辑。 定位:定时任务框架 作用:定时自动执行某段Java代码 强调:只要是需要定时处理的场景都可以使用Spring Task 1. cron表达式 cron表达式…

spring之AOP简单介绍

1.AOP的概念 AOP,Aspect Oriented Programming,面向切面编程,是对面向对象编程OOP的升华。OOP是纵向对一个 事物的抽象,一个对象包括静态的属性信息,包括动态的方法信息等。而AOP是横向的对不同事物的抽象,…

设计模式(5)代理模式

一、介绍: 【Subject/抽象角色】定义了RealSubject和Proxy的共用接口,这样就可以在任何使用RealSubject的地方都可以使用Proxy 【RealSubject/真实角色】定义Proxy所代表的真实实体 【Proxy/代理角色】保存一个引用使得代理可以访问实体,并…

【Linux】多线程——线程引入 | 线程控制

文章目录 一、Linux多线程1. 线程概念2. 线程创建3. 线程和进程4. 线程的优缺点 二、线程控制1. 线程创建2. 线程终止3. 线程等待4. 线程分离5. 线程局部存储 三、线程封装 一、Linux多线程 一级页表和二级页表都是key/val模型,一级页表的key是第一份的10个比特位&a…

css的transform样式计算-第一节

本文作者为 360 奇舞团前端开发工程师 引言 在使用 css 样式进行样式的缩放、旋转等设置时,思考了一下它的较浅层的原理,恩,这个阶段都 是一些初高的数学计算,从新看这里的时候顺便捡了捡初高中的数学,比如三角函数之类…

利用 Splashtop Enterprise 改善公司的网络安全

在我们日益数字化的世界中,对强有力的网络安全措施的需求从未像现在这样迫切。随着组织扩大其数字足迹并采用远程办公解决方案,他们面临着一系列不断变化的挑战。 威胁行为者不断寻找利用漏洞的新方法,这使得企业保持领先地位至关重要。俗话…

htmlCSS-----弹性布局

目录 前言 什么是弹性布局 样式 学习概要 容器和项目 弹性布局的排列方式 1.横向排列(默认样式) 2.父元素容器的属性(*5) (1)主轴 代码示例: (2)交叉轴 3.子元素…

Stable Diffusion WebUI安装和使用教程(Windows)

目录 下载Stable Diffusion WebUI运行安装程序,双击webui.bat界面启动插件安装(github)模型下载(有些需要魔法)安装过程遇到的大坑总结参考的博客 整个过程坑巨多,我花了一个晚上的时间才全部搞定,本教程针对有编程基础…

分布式系统监控zabbix安装部署及使用

分布式系统监控zabbix安装部署及使用 一.zabbix监控 1.什么是zabbix zabbix:是一款开源免费的,自动化发现服务与网络设备的分布式监控,可以监视应用层服务并以web前端页面集中管理并展示。 2.zabbix功能 监控服务器cpu负载、服务器内存使…

adb 通过wifi连接手机

adb 通过wifi连接手机 1. 电脑通过USB线连接手机2. 手机开启USB调试模式,开启手机开发者模式3.手机开启USB调试模式 更多设置-》开发者选项-》USB调试4.点击Wi-Fi 高级设置,可以查看到手机Wi-Fi的IP地址,此IP地址adb命令后面的ip地址&#xf…

2023年国赛数学建模思路 - 案例:ID3-决策树分类算法

文章目录 0 赛题思路1 算法介绍2 FP树表示法3 构建FP树4 实现代码 建模资料 0 赛题思路 (赛题出来以后第一时间在CSDN分享) https://blog.csdn.net/dc_sinor?typeblog 1 算法介绍 FP-Tree算法全称是FrequentPattern Tree算法,就是频繁模…

消息队列(11) - 通信协议的设计

目录 通信协议设计代码实现 通信协议设计 对于我们客户端与服务器之间的通信协议我们约定如下: 具体的协议设计: 之后我们传递的参数也是这些 关于 type其实是在描述当前这个请求 、 响应是在调用那个API 约定如下 对于channel ,是tcp链接中的一个逻辑上的链接,…

液体神经网络:LNN是个啥概念?

一、说明 在在人工智能领域,神经网络已被证明是解决复杂问题的非常强大的工具。多年来,研究人员不断寻求创新方法来提高其性能并扩展其能力。其中一种方法是液体神经网络(LNN)的概念,这是一个利用动态计算功能的迷人框…

IDEA如何调试Stream API

Stream API现在在实际开发中应用非常广泛,经常会遇到需要调试Stream API的场景,这篇文章主要讲解如何使用IDEA调试Stream Testpublic void test(){Stream.of(10, 20, 30, 40, 50).mapToInt(e->e*10).filter(e->e>200).forEach(System.out::pri…

笔记04:全局内存

一、CUDA内存模型概述 寄存器、共享内存、本地内存、常量内存、纹理内存和全局内存 一个核函数中的线程都有自己私有的本地内存。 一个线程块有自己的共享内存,对同一个线程块中所有的线程都可见,其内容持续线程块的整个生命周期。 所有线程都可以访问…

12.Eclipse导入Javaweb项目

同事复制一份他的项目给我ekp.rar (懒得从SVN上拉取代码了)放在workspace1目录下 新建一个文件夹 workspace2,Eclipse切换到workspace2工作空间 选择Import导入 选择导入的项目(这里是放到workspace1里面) 拷贝一份到workspace2里面 例子 所有不是在自己电脑上开发…

搭建openGauss 5.0 一主一从复制集群

openGauss是一款支持SQL2003标准语法,支持主备部署的高可用关系型国产数据库。 多种存储模式支持复合业务场景,新引入提供原地更新存储引擎。NUMA化数据结构支持高性能。Paxos一致性日志复制协议,主备模式,CRC校验支持高可用。支…