React 面试题 第三部分 webpack 面试真题

1.前端为何要进行打包和构建?

体积更小,加载更快(tree-shaking,压缩合并) 编译高级语言和语法(ts,es6,模块化) 兼容性和错误提示(polyfill,postcss,eslint)

2.module chunk bundle  的区别

module: 只要是文件,都是一个module chunk:代码块,是webpack根据功能拆分出来的(chunk是无法在打包结果中看到的,打包结果中看到的是bundle),包含三种情况: 你的项目入口 (entry) 通过import ()动态引入的代码 通过splitChunks拆分出来的代码

 bundle:bundle是webpack打包之后的各个文件,一般就是和chunk是一对一的关系,bundle就是对chunk进行编译压缩打包等处理之后的产出

3.loader 和 plugin 的区别

二者区别: loader即为文件加载器,操作的是文件,将文件A通过loader转换成文件B,是一个单纯的文件转化过程。 plugin即为插件,是一个扩展器,丰富webpack本身,增强功能 ,针对的是在loader结束之后,webpack打包的整个过程,他并不直接操作文件,而是基于事件机制工作,监听webpack打包过程中的某些节点,执行广泛的任务

4.常见的loader 和 plugin 有哪些?

loader:

file-loader:把文件输出到一个文件夹中,在代码中通过相对URL引用输入的文件。
url-loader:和file类似,但能在文件很小的情况下以base64方式把文件内容注入到代码中。
image-loader:加载并压缩图片文件。
babel-loader:把ES6转换为ES5。
css-loader:加载CSS,支持模块化、压缩、文件导入等特性。
style-loader:把CSS代码注入到JavaScript中,通过DOM操作去加载CSS。
eslint-loader:通过ESlint检查JavaScript代码。
plugin:

define-plugin:定义环境变量。
commons-chunk-plugin:提取公共代码。
uglifyjs-webpack-plugin:缩小(压缩优化)js文件

5.Babel 和 webpack 的区别 

babel和webpack做的事情有一部分重叠, 例如都将js转化为ast并且做了一些transform, 然后再输出各自的目标代码。 但是两者的分工有所不同, babel主要做es语法的转换,确保最新的来的es特性能够以最快的速度deliver到开发者手中, 但是不负责模块的组合。 webpack更多的是将输入的各个模块用自己内部的一套逻辑将代码“链接”起来, 起胶水的作用, 并且目标是输出可以直接在浏览器中执行的代码

6.webpack 如何产出一个lib库

webpack | webpack中文文档 | webpack中文网 (webpackjs.com)

7.说一下Babel-polyfill 和 baber-runtime 的区别

babel-polyfill和babel-runtime两者的关系图可总结如下:在功能上都是模拟了一个ES6+的环境,支持代码中使用新增API特性;在外部依赖上,有两个相同的核心依赖包。 但在实现方式上两者区别很大,一个简单全面,另一个精致优雅,各有长短,适用不同的应用场景

8.webpack 如何实现懒加载

此处主要介绍使用动态导入(通过模块中的内联函数调用来分离代码)的懒加载。 这种动态代码拆分的方式是webpack提供并推荐选择的方式。 其原理是使用符合 ECMAScript 提案 的 import () 语法 来实现动态导入。

9.为何Proxy 不能被Polyfill?

由于ES5的限制,ES6新增的Proxy无法被转译成ES5,或者通过Polyfill提供兼容。 ES5中无法实现自定义对象的读取属性、属性赋值等行为,然而对于函数调用与实例化,通过对原函数对象进行代理,是可以实现Polyfill兼容的。

10.webpack如何优化构建速度?

1. 缓存:提升二次构建速度

2. 减少文件搜索范围

3. 图片压缩

4. 删除无用 CSS

5. 动态 Polyfill

11.webpack 如何优化产出代码

  1. 入口起点优化
  2. 性能优化-CDN
  3. 性能优化-提取css文件
  4. 性能优化-打包文件名
  5. 性能优化-css-js代码压缩
  6. 性能优化-webpack实现Tree Shaking
  7. Scope Hoisting(作用域提升)
  8. 性能优化-Wepack对文件压缩
  9. 性能优化-HTML代码压缩

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值