webpack构建工具面试题

1. 构建工具的作用

• 简化编程过程
• 在编程的过程中能够使用最新语法、简单的编写方式
• 最终打包出来的产物变成体积小、兼容性强、能够在浏览器运行的标准语法

2. webpack的优点

• 模块化：支持将项目拆分为多个模块，最终将多个模块进行打包
• 代码拆分和按需加载：支持将代码拆分为多个chunk，并且实现按需加载，降低页面加载时间，对spa应用极为友好
• 资源优化：支持代码压缩、tree-shaking、静态资源压缩等功能
• 热更新：支持热更新，修改代码时无需再次编译整个文件，只会对改动内容进行重新编译

3. 常见的Loader和Plugin

Loader

• image-loader : 加载并且压缩图片文件
• css-loader : 加载 CSS，支持模块化、压缩、文件导入等特性
• style-loader : 把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS
• eslint-loader : 通过 ESLint 检查 JavaScript 代码
• babel-loader : 把 ES6 转换成 ES5

Plugin

• define-plugin : 定义环境变量

• html-webpack-plugin : 简化 HTML 文件创建

• webpack-parallel-uglify-plugin : 多进程执行代码压缩，提升构建速度

• mini-css-extract-plugin : 分离样式文件，CSS 提取为独立文件，支持按需加载

4. Loader和Plugin的区别

功能不同：

• Loader：本质是一个函数，是一个转换器

  • webpack只能解析原生js文件，对于其他类型文件就需要用loader进行转换

• Plugin：是一个插件，用于增强webpack功能

  • webpack在运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 webpack 提供的 API 改变输出结果

用法不同：

• Loader的配置是在module.rules下
  • 每⼀项都是⼀个 Object ，⾥⾯描述了对于什么类型的⽂件（ test ），使⽤什么加载( loader )和使⽤的参数（ options ）
• Plugin的配置在plugins下
  • 每一项是一个 Plugin 的实例，参数通过构造函数传入

5. webpack的构建过程

• 初始化：
  • 启动构建，读取与合并配置参数
  • 加载 Plugin
  • 实例化 Compiler
• 编译：
  • 从 Entry 出发，针对每个 Module 串行调用对应的 Loader 去翻译文件的内容
  • 再找到该 Module 依赖的 Module，递归地进行编译处理
• 输出：
  • 将编译后的 Module 组合成 Chunk
  • 将 Chunk 转换成文件，输出到文件系统中

6. 热更新及其原理

• 热更新HMR：在不刷新页面的前提下，将新代码替换成旧代码
• 原理：
  • webpack-dev-server（WDS）和浏览器之间维护了一个websocket服务
  • 当本地资源发生变化后，webpack会先将打包生成新的模块代码放入内存中
  • WDS向浏览器推送更新，并附带上构建时的hash，让客户端和上一次资源进行对比
  • 客户端对比出差异后会向WDS发起Ajax请求获取到更改后的内容（文件列表、hash）
  • 通过这些信息再向WDS发起jsonp请求获取到最新的模块代码

7. bundle，chunk，module是什么

• bundle 捆绑包： 它是构建过程的最终产物，由有需要的chunk和module组成

• chunk 代码块：一个chunk由多个模块组合而成，用于代码的合并和分割，在构建过程中一起被打包到一个文件中

• module 模块：是代码的基本单位，可以是一个文件、一个组件、一个库等，在编译的时候会从entry中递归寻找出所有依赖的模块

8. Code Splitting是什么

• 是代码分割，允许将一个大的chunk拆分成多个小的chunk，从而实现按需加载，减少初始加载时间，并提高应用程序的性能
• 每个代码块代表不同的功能或路由，这些代码块可以在需要时被动态加载，使得页面只加载当前所需的功能，而不必等待整个应用程序的所有代码加载完毕
• 通过optimization.splitChunks配置项来开启代码分割

9. Source Map是什么？如何配置生成Source Map

• Source Map是一种文件，它建立了构建后的代码与原始源代码之间的映射关系
• 通常在开发阶段开启，用来调试代码，帮助找到代码问题所在
• 可以在Webpack配置文件中的devtool选项中指定devtool: 'source-map'来开启

10. Tree Shaking原理

• 也叫摇树优化，是一种通过移除多余代码，从而减小最终生成的代码体积，生产环境默认开启
• 原理：
  • 基础是ES6模块系统，具有静态特性，模块的导入和导出关系在编译时就已经确定
  • Webpack会通过静态分析依赖图，从入口文件开始，逐级追踪每个模块的依赖关系，以及模块之间的导入和导出关系
  • 分析模块依赖时，Webpack会标记每个变量、函数、类和导入，以确定它们是否被实际使用。如果一个导入的模块只是被导入而没有被使用，或者某个模块的部分代码没有被使用，Webpack会将这些未使用的部分标记为"unused"
  • 在代码标记为未使用后，Webpack会在最终的代码生成阶段，通过工具（如UglifyJS等）删除这些未使用的代码，这包括未使用的模块、函数、变量和导入

11. 如何提高webpack的打包速度

• 缓存：利用Webpack的持久缓存功能，避免重复构建没有变化的代码

  • 可以使用cache: true选项启用缓存

• 多进程/多线程构建 ：使用thread-loader、happypack等插件可以将构建过程分解为多个进程或线程，从而利用多核处理器加速构建

• 使用DllPlugin和HardSourceWebpackPlugin：

  • DllPlugin可以将第三方库预先打包成单独的文件，减少构建时间
  • HardSourceWebpackPlugin可以缓存中间文件，加速后续构建过程

• 使用Tree Shaking：配置Webpack的Tree Shaking机制，去除未使用的代码，减小生成的文件体积

• 移除不必要的插件：移除不必要的插件和配置，避免不必要的复杂性和性能开销

12. 如何减少打包后的代码体积

• 代码分割：将应用程序的代码划分为多个代码块，按需加载，可以减小初始加载的体积，使页面更快加载
• Tree Shaking：配置Webpack的Tree Shaking机制，去除未使用的代码
• 压缩代码：使用工具如UglifyJS或Terser来压缩JavaScript代码，这会删除空格、注释和不必要的代码，减小文件体积
• 使用生产模式：在Webpack中使用生产模式，通过设置mode: 'production'来启用优化，这会自动应用一系列性能优化策略，包括代码压缩和Tree Shaking
• 使用压缩工具：使用压缩工具，如Brotli和Gzip，来对静态资源进行压缩，从而减小传输体积
• 利用CDN加速：将项目中引用的静态资源路径修改为CDN上的路径，减少图片、字体等静态资源等打包

13. vite比webpack快在哪里

• 冷启动速度：

  • vite利用浏览器的原生ES moudle，采用按需加载的，而不是将整个项目打包
  • 而webpack是将整个项目打包成一个或多个bundle，构建过程复杂

• HMR热更新：

  • vite使用浏览器内置的ES模块功能，哪个文件更新就加载那个文件
  • Webpack在热更新时重新加载整个包

• 构建速度：

  • Vite的按需加载避免了将所有代码打包到一个大文件中，而且，Vite对于缓存、预构建等方面的优化也有助于减少构建时间

• 缓存策略： Vite利用浏览器的缓存机制，将依赖的模块存储在浏览器中，避免重复加载

• 不需要预编译： Vite不需要预编译或生成中间文件，减少了文件IO操作，进一步提升了速度

14. Babel原理

大概分成三大部分：

• 解析：将代码转换成 AST

  • 词法分析（分词）：将代码(字符串)分割为token流，即语法单元组成的数组
  • 语法分析：分析token流(上面生成的数组)并生成 AST

• 转换：访问 AST 的节点进行变换操作生产新的 AST

• 生成：以新的 AST 为基础生成代码