2024前端面试题-工程化篇

1.webpack（模块打包工具）五大核心

Entry入口，Output定义输出路径和命名规则，Loader模块转换器，Plugin扩展插件，Mode模式（Webpack使用相应模式的配置）

2.谈一谈你对Loader和Plugin的理解，使用过哪些？

loader：模块转换器，用于把模块原内容按照需求转换成新内容
通过使用不同的Loader，Webpack可以要把不同的文件都转成JS文件,比如CSS、ES6/7、JSX等

plugin：扩展插件
在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情
一个插件是含有apply方法的一个对象，通过这个方法可以参与到整个webpack打包的各个流程
IgnorePlugin
不打包匹配文件
PrefetchPlugin
预加载的插件，提高性能

loader是用来对模块的源代码进行转换,而插件目的在于解决 loader 无法实现的其他事
因为plugin可以在任何阶段调用,能够跨Loader进一步加工Loader的输出
常用的：babel-loader（对js代码进行兼容性编译） file-loader（将webpack将所需的对象作为文件发送，并返回其公共URL.） url-loader less-loader, sass-loader

3.webpack热更新原理

Webpack的热更新，在不刷新页面的前提下，将新代码替换掉旧代码。

HRM的原理实际上是 webpack-dev-server（WDS）和浏览器之间维护了一个websocket服务。当本地资源发生变化后，webpack会先将打包生成新的模块代码放入内存中，然后WDS向浏览器推送更新，并附带上构建时的hash，让客户端和上一次资源进行对比.

4.什么是Code Splitting

Code Splitting代码分割，是一种优化技术。它允许将一个大的chunk拆分成多个小的chunk，从而实现按需加载，减少初始加载时间，并提高应用程序的性能。

在Webpack中通过optimization.splitChunks配置项来开启代码分割

5.Webpack的Source Map是什么？如何配置生成Source Map？

Source Map是一种文件，它建立了构建后的代码与原始源代码之间的映射关系。通常在开发阶段开启，用来调试代码，帮助找到代码问题所在。

在Webpack配置文件中的devtool选项中指定devtool: 'source-map'来开启

6.如何减小打包体积

按需加载：路由懒加载，动态组件按需加载
代码压缩：使用uglifyjs-webpack-plugin插件压缩代码
开启Tree Shaking摇树机制：optimization: { usedExports: true, concatenateModules: true, minimize: true, }
图片压缩：image-webpack-plugin
CDN引入
使用Gzip压缩：在服务端（例如Nginx）配置启用Gzip
移除不必要的插件和依赖
代码分割（Code Splitting）：将应用程序的代码划分为多个代码块，按需加载

7.webpack和vite的区别

编译方式：webpack在编译过程中，将文件打包成bundle.js文件，然后再运行这个文件
vite在开发模式下不会打包文件，他会利用浏览器的es module import属性，在需要时编译文件，在生产模式下，使用rollup打包，提供更好的tree-shaking,代码压缩和性能优化。
开发效率：webpack热更新是全量更新，修改一个文件会更新全部，会导致编译速度变慢。
vite是增量更新，只更新修改的文件，在大型应用中也可以保持较快的编译速度。
扩展性：webpack插件比vite丰富
应用场景不同：webpack适合大型复杂的项目，因为插件丰富，vite适合中小型快速开发的项目。

8.前端优化策略

尽量减少http请求个数
避免空的src和href
使用CDN
图片懒加载
路由懒加载
减少页面中的冗余代码
杜绝404

9.为什么pnpm比npm快

Pnpm 使用基于内容寻址的文件系统来存储磁盘上的所有文件，这意味着它不会在磁盘中重复存储相同的依赖包，即使这些依赖包被不同的项目所依赖。这种存储方式使得Pnpm在安装依赖时能够更高效地利用磁盘空间，同时也减少了下载和安装的时间。
Pnpm 在下载和安装依赖时采用了并行下载的能力，这进一步提高了安装速度。
Pnpm 还具有一些其他特性，例如节省空间的硬链接和符号链接的使用，这些都有助于提高其性能。