Webpack面试考点之核心考点

时间:2021-6-7 作者:qvyue

1、模块打包运行原理

Webpack是如何把这些模块合并到一起,并且保证其正常工作的,你是否了解呢?

webpack的整个打包流程:

a、读取webpack的配置参数;

b、启动webpack,创建Compiler对象并开始解析项目;

c、从入口文件(entry)开始解析,并且找到其导入的依赖模块,递归遍历分析,形成依赖关系树;

d、对不同文件类型的依赖模块文件使用对应的Loader进行编译,最终转为Javascript文件;

e、整个过程中webpack会通过发布订阅模式,向外抛出一些hooks,而webpack的插件即可通过监听这些关键的事件节点,执行插件任务进而达到干预输出结果的目的。

其中文件的解析与构建是一个比较复杂的过程,在webpack源码中主要依赖于compiler和compilation两个核心对象实现

compiler对象是一个全局单例,他负责把控整个webpack打包的构建流程。compilation对象是每一次构建的上下文对象,它包含了当次构建所需要的所有信息,每次热更新和重新构建,compiler都会重新生成一个新的compilation对象,负责此次更新的构建过程。

而每个模块间的依赖关系,则依赖于AST语法树。每个模块文件在通过Loader解析完成之后,会通过acorn库生成模块代码的AST语法树,通过语法树就可以分析这个模块是否还有依赖的模块,进而继续循环执行下一个模块的编译解析。

最终Webpack打包出来的bundle文件是一个IIFE的执行函数。(IIFE(Immediately Invoked Function Expressions) 叫做立即执行表达式,顾名思义,该表达式一被创建就立即执行)。

2、缓存

webpack 是如何解决两次引入的?他想问的是webpack是怎么处理模块的,就是引入了一次就会”缓存起来”,再次引入会去判断是否引入过

1)babel缓存 

设置cacheDirectory: true,可以 让第二次打包构建速度更快。

2)文件资源缓存

a、hash:每次wepack构建时会生成一个唯一的hash值。

 存在的问题:因为js和css同时使用一个hash值。如果重新打包,会导致所有缓存失效。(可能我却只改动一个文件)

b、chunkhash:根据chunk生成的hash值。如果打包来源于同一个chunk,那么hash值就一样

存在的问题:js和css的hash值还是一样的,因为css是在js中被引入的,所以同属于一个chunk

c、contenthash: 根据文件的内容生成hash值。不同文件hash值一定不一样

3、webpack 热更新

基于 WDS (Webpack-dev-server) 的模块热替换,只需要局部刷新页面上发生变化的模块,同时可以保留当前的页面状态。

Webpack面试考点之核心考点

热更新的过程:

1)启动阶段:文件经过 Webpack-complier 编译好后传输给 Bundle Server,Bundle Server 可以让浏览器访问到我们打包出来的文件。

2)文件热更新阶段:同时文件经过 Webpack-complier 编译好后传输给 HMR Server,HMR Server 知道哪个资源 (模块) 发生了改变,并通知 HMR Runtime 有哪些变化(也就是上面我们看到的两个请求),HMR Runtime 就会更新我们的代码,这样我们浏览器就会更新并且不需要刷新。

4、webpack的性能优化

1)缩小文件范围 Loader

优化loader配置,使用test、include、exclude三个配置项来缩⼩loader的处理范围,推荐include。

2)优化resolve.modules

resolve.modules用于配置webpack去哪些目录下寻找第三方模块,默认是

[‘node_modules’]。寻找第三方,默认是在当前项目目录下的node_modules里面去找,如果没有找到,就会去上一级目录../node_modules找,再没有会去../../node_modules中找,以此类推,和Node.js的模块寻找机制很类似。

如果我们的第三⽅模块都安装在了项⽬根⽬录下,就可以直接指明这个路径。

3)使用静态资源路径publicPath(CDN)

CDN通过将资源部署到世界各地,使得⽤户可以就近访问资源,加快访问速度。要接⼊CDN,需要把网页的静态资源上传到CDN服务上,在访问这些资源时,使⽤CDN服务提供的URL。

4)借助MiniCssExtractPlugin完成抽离css

Webpack面试考点之核心考点

5)压缩css和HTML

Webpack面试考点之核心考点

6)抽取公共代码

在多页应用中,抽离各页面模块公共代码。

5、Source Map

我们知道 Webpack 通过模块之间的引用关系,构建一个依赖树,并生成相应的结果文件。但这个结果文件是存在一定的缺陷的:代码有可能压缩并混淆;代码文件可能是由一个或者多个组成。

Source Map, 顾名思义,是保存源代码映射关系的文件。因为代码是压缩混淆的,我们找不到报错的文件的相关信息,那有没有一个拥有源文件与打包后文件的映射关系的文件,让它来告诉我们呢?这个文件就是 Source Map 文件。

官方文档列出了很多种组合,在这之前,我们可以先好好看看以下的关键字,不管是什么组合都是下面的一个或者多个拼接而成的。

source map:产生 .map 文件(配合 eval 或者 inline 使用的时候,会不生成 source map 文件,具体要看哪个模式)。

eval:使用 eval 包裹块代码。

cheap:不生成列信息。

inline:将 .map 作为 DataURI 嵌入,不单独生成一个 .map 文件。

module:包含 loader 的 source map。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。