Webpack 常见面试题
Webpack 常见面试题
整理自:
话说校招生整这个,真的是越来越卷了呢
Webpack中常见的Loader?解决了什么问题?
- style-loader: 将css添加到DOM的内联样式标签style里
- css-loader :允许将css文件通过require的方式引入,并返回css代码
- less-loader: 处理less
- sass-loader: 处理sass
- postcss-loader: 用postcss来处理CSS
- autoprefixer-loader: 处理CSS3属性前缀,已被弃用,建议直接使用postcss
- file-loader: 分发文件到output目录并返回相对路径
- url-loader: 和file-loader类似,但是当文件小于设定的limit时可以返回一个Data Url
- html-minify-loader: 压缩HTML
- babel-loader :用babel来转换ES6文件到ES
Webpack中常见的Plugin?解决了什么问题?
Loader和Plugin的区别?编写Loader,Plugin的思路?
前面两节我们有提到Loader
与Plugin
对应的概念,先来回顾下
- loader 是文件加载器,能够加载资源文件,并对这些文件进行一些处理,诸如编译、压缩等,最终一起打包到指定的文件中
- plugin 赋予了 webpack 各种灵活的功能,例如打包优化、资源管理、环境变量注入等,目的是解决 loader 无法实现的其他事
Webpack的热更新是如何做到的?原理是什么?
HMR
全称 Hot Module Replacement
,可以理解为模块热替换,指在应用程序运行过程中,替换、添加、删除模块,而无需重新刷新整个应用
例如,我们在应用运行过程中修改了某个模块,通过自动刷新会导致整个应用的整体刷新,那页面中的状态信息都会丢失
如果使用的是 HMR
,就可以实现只将修改的模块实时替换至应用中,不必完全刷新整个应用
Webpack proxy工作原理?为什么能解决跨域?
webpack proxy
,即webpack
提供的代理服务
基本行为就是接收客户端发送的请求后转发给其他服务器
其目的是为了便于开发者在开发模式下解决跨域问题(浏览器安全策略限制)
想要实现代理首先需要一个中间服务器,webpack
中提供服务器的工具为webpack-dev-server
如何借助Webpack来优化前端性能?
- JS代码压缩
- CSS代码压缩
- HTML文件代码压缩
- 文件大小压缩
- 图片压缩
- Tree Shaking
- 代码分离
- 内联 chunk
如何提高Webpack的构建速度?
优化 loader 配置
在使用
loader
时,可以通过配置include
、exclude
、test
属性来匹配文件,接触include
、exclude
规定哪些匹配应用loader
合理使用 resolve.extensions
在开发中我们会有各种各样的模块依赖,这些模块可能来自于自己编写的代码,也可能来自第三方库,
resolve
可以帮助webpack
从每个require/import
语句中,找到需要引入到项目的模块代码优化 resolve.modules
resolve.modules
用于配置webpack
去哪些目录下寻找第三方模块。默认值为['node_modules']
,所以默认会从node_modules
中查找文件 当安装的第三方模块都放在项目根目录下的./node_modules
目录下时,所以可以指明存放第三方模块的绝对路径,以减少寻找优化 resolve.alias
alias
给一些常用的路径起一个别名,特别当我们的项目目录结构比较深的时候,一个文件的路径可能是./../../
的形式使用 DLLPlugin 插件
DLL
全称是 动态链接库,是为软件在winodw中实现共享函数库的一种实现方式,而Webpack也内置了DLL的功能,为的就是可以共享,不经常改变的代码,抽成一个共享的库。这个库在之后的编译过程中,会被引入到其他项目的代码中使用 cache-loader
在一些性能开销较大的
loader
之前添加cache-loader
,以将结果缓存到磁盘里,显著提升二次构建速度。保存和读取这些缓存文件会有一些时间开销,所以请只对性能开销较大的loader
使用此loader
terser 启动多线程
使用多进程并行运行来提高构建速度,毕竟JS是单线程的
合理使用 sourceMap
打包生成
sourceMap
的时候,如果信息越详细,打包速度就会越慢。
与Webpack类似的工具还有哪些?区别?
在前端领域中,并非只有webpack
这一款优秀的模块打包工具,还有其他类似的工具,例如Rollup
、Parcel
、snowpack
,以及最近风头无两的Vite
。
Rollup
现在很多我们熟知的库都都使用它进行打包,比如:Vue
、React
和three.js
等
特点:
- 代码效率更简洁、效率更高
- 默认支持 Tree-shaking
但缺点也十分明显,加载其他类型的资源文件或者支持导入 CommonJS
模块,又或是编译 ES
新特性,这些额外的需求 Rollup
需要使用插件去完成
综合来看,rollup
并不适合开发应用使用,因为需要使用第三方模块,而目前第三方模块大多数使用CommonJs
方式导出成员,并且rollup
不支持HMR
,使开发效率降低
但是在用于打包JavaScript
库时,rollup
比 webpack
更有优势,因为其打包出来的代码更小、更快,其存在的缺点可以忽略
Parcel
Parcel ,是一款完全零配置的前端打包器,它提供了 “傻瓜式” 的使用体验,只需了解简单的命令,就能构建前端应用程序
Parcel
跟 Webpack
一样都支持以任意类型文件作为打包入口,但建议使用HTML
文件作为入口,该HTML
文件像平时一样正常编写代码、引用资源。
Snowpack
Snowpack,是一种闪电般快速的前端构建工具,专为现代Web
设计,较复杂的打包工具(如Webpack
或Parcel
)的替代方案,利用JavaScript
的本机模块系统,避免不必要的工作并保持流畅的开发体验
开发阶段,每次保存单个文件时,Webpack
和Parcel
都需要重新构建和重新打包应用程序的整个bundle
。而Snowpack
为你的应用程序每个文件构建一次,就可以永久缓存,文件更改时,Snowpack
会重新构建该单个文件
Vite ⭐
vite ,是一种新型前端构建工具,能够显著提升前端开发体验
它主要由两部分组成:
- 一个开发服务器,它基于 原生 ES 模块 提供了丰富的内建功能,如速度快到惊人的 [模块热更新HMR
- 一套构建指令,它使用 Rollup打包你的代码,并且它是预配置的,可以输出用于生产环境的优化过的静态资源
其作用类似webpack
+ webpack-dev-server
,其特点如下:
- 快速的冷启动
- 即时的模块热更新
- 真正的按需编译
vite
会直接启动开发服务器,不需要进行打包操作,也就意味着不需要分析模块的依赖、不需要编译,因此启动速度非常快
利用现代浏览器支持ES Module
的特性,当浏览器请求某个模块的时候,再根据需要对模块的内容进行编译,这种方式大大缩短了编译时间
在热模块HMR
方面,当修改一个模块的时候,仅需让浏览器重新请求该模块即可,无须像webpack
那样需要把该模块的相关依赖模块全部编译一次,效率更高