2024年前端面试题webpack+vite4篇

2024年前端面试题webpack+vite4篇

我希望我的答案和解释是通俗易懂的。

webpack部分

webpack的构建流程

1. 初始化流程：从配置文件和shell语句中读取和合并参数，并初始化需要使用的插件和配置插件执行环境所需要的参数
2. 编译构建流程：从 Entry 发出，针对每个 Module 串行调用对应的 Loader 去翻译文件内容，再找到该 Module 依赖的 Module，递归地进行编译处理
3. 输出流程：对编译后的 Module 组合成 Chunk，把 Chunk 转换成文件，输出到文件系统，比如dist

loader

一种对模块源码转换的工具，让webpack有处理不同类型文件的能力，原理是链式调用，就是把模块给第一个loader处理，再把这个处理结果给下一个，直到最后一个loader处理完，返回处理结果。常见的有：

1. style-loader
2. css-loader
3. less-loader
4. scss-loader
5. url-loader
6. babel-loader：转换es5

插件

一种用于扩展webpack功能的工具，用于对webpack进行优化和扩展，优化打包效率、提取公共代码、自动生成html代码等等，常见的有：

1. htmlwebpackplugin：自动生成html文件
2. cleanwebpackplugin：自动清空目录，比如打包回删除dist文件
3. minicsswebpackplugin：将css打包成单独的文件
4. copywebpackplugin：复制静态文件到目录
5. hotmodulereplacementplugin：热更新
6. webpackbundleanalyzer：分析打包结果，可视化打包报告

热更新

1. hmr，可以理解为模块热替换，就是你启动项目了之后，替换、添加、更新模块不用重新启动，刷新整个应用
2. 通俗的来说就是可以让开发者实时看到更新，它会启动一个websocket服务器来监听文件变化，当文件变化的时候通过hmr给浏览器发送通知，浏览器根据这个消息进行更新操作

Vite4部分

vite是什么

vite就是一个开发服务器

vite为什么能做到秒开

利用现代浏览器的es模块的特性，不需要打包，可以快速构建环境

因为vite的预构建做到了以下四点：

1. 自动补全模块 – lodash
2. 统一导出格式，把第三方包的导出格式统一为 export default格式
3. 把内部多个模块的依赖项变成一个模块
   vite.config.js配置
   optimizeDeps{
   exclude:[‘依赖包’]，//不进行变成单一模块
   //include 强制进行预构建
   }
4. 把缓存做成了俩种
   • 文件缓存：依赖项缓存在nodemodules里面
   • 浏览器缓存：依赖项使用强缓存Cache-Control和协商缓存If-None-Match

vite的分包

1. 原理：基于es module的动态导入特性
2. 分包方式：
   • 手动分包：手动分包需要在代码中显示指定哪些模块需要分包，然后使用动态按需加载。
   • 自动分包：根据代码的模块导入关系自动将相关模块打包

cdn

vite的内容分发网络

1. 作用：
   • 提高访问稳定性
   • 加速静态资源加载
   • 减轻服务器压力
2. 工作原理：
   • 内容缓存：cdn服务器会储存静态资源在全球各地的节点上，如果用户访问需要加载静态资源就会从最近的cdn节点获取，提高加载速度
   • 请求转发：用户访问浏览器需要请求获取数据会自动转发请求到最合适的节点获取资源数据，并且缓存以备后续访问
   • 负载均衡：cdn可以根据当前节点的负载情况和网络状态来动态选择最合适的节点来处理请求，实现负载均衡，提高访问稳定性

vite查看项目体积

通过rollup-plugin-visualizer插件

最后，欢迎指正和提供问题补充文章~