公司面试题总结（六）

31.说一说 webpack 的构建流程是什么？

⚫ 初始化流程：

◼ 从配置文件和 Shell 语句中读取与合并参数

◼ 初始化需要使用的插件和配置插件等执行环境所需要的参数

⚫ 编译构建流程：

◼ 从 Entry 发出，针对每个 Module 串行调用对应的 Loader 去翻译文件内容

◼ 再找到该 Module 依赖的 Module，递归地进行编译处理

⚫ 输出流程：

◼ 对编译后的 Module 组合成 Chunk，

◼ 把 Chunk 转换成文件，输出到文件系统

32.如何优化 webpack 打包速度

⚫ 并行编译：

◼ thread-loader： 利用多个 CPU 内核并行运行加载器。

◼ HappyPack ： 将模块转换任务分解到多个 worker 进程中并行处理。

⚫ 代码拆分：

◼ splitChunksPlugin 代码分割，将公共代码、第三方库等抽离到单独的 chunk，减

少重复编译的工作量。

⚫ 动态导入（import()）：

◼ 根据路由或其他条件按需加载代码，避免一次性打包所有代码。

⚫ Tree Shaking：

◼ 确保你的 ES 模块使用的是静态导入导出， Tree Shaking 移除未使用的代码。

⚫ DllPlugin/DllReferencePlugin：

◼ 不经常变动的依赖（如 React, Vue 库）提前打包成 DLL（动态链接库） ，避免每次

构建都重新打包这些库。

⚫ 减少 Loader 和 Plugin 的数量：

◼ 只使用必要的 loader 和 plugin，每个额外的处理都会增加构建时间。

⚫ 提升 Loader 性能：

◼ Babel 等慢速 loader，使用针对性的配置优化，比如@babel/preset-env 的

useBuiltIns 和 targets 选项，减少不必要的 polyfill。

⚫ Excluding node_modules：

◼ 不需要转译的 node_modules 模块，可以在.babelrc 或 webpack 配置中排除它们。

⚫ Cache：

◼ 利用 Webpack 的持久化缓存特性，如 cacheDirectory 选项，或使用 hard-source

webpack-plugin 等第三方插件来缓存编译结果。

⚫ 优化 Resolving 配置：

◼ 减少模块解析的搜索范围，通过 resolve.modules, resolve.alias 等配置项提高模块查找速度。

⚫ Source Map 优化：

◼ 开发环境使用 cheap-module-eval-source-map 或更快的 source-map 选项，生产

环境考虑是否需要 source map 或使用更简洁的格式。

⚫ 升级 Webpack 和其他依赖：

◼ 保持 Webpack 及其相关 loader、plugin 的版本是最新的，新版本往往带来性能改

进。

⚫ 分析和监控：

◼ 使用 webpack-bundle-analyzer 分析包大小，找出可以进一步优化的地方。

33.说说 webpack 中常见的 Loader？解决了什么问题？

⚫ loader 对模块的"源代码"进行转换，

⚫ 在 import 或"加载"模块时预处理文件

⚫ webpack 分析各种模块依赖关系，然后形成资源列表，最终打包生成到指定的文件中。

⚫ babel-loader :用 babel 来转换 ES6 文件到 ES5

⚫ html-minify-loader: 压缩 HTML

⚫ style-loader: 将 css 添加到 DOM 的内联样式标签 style 里

⚫ css-loader : 允许将 css 文件通过 require 的方式引入，并返回 css 代码

⚫ less-loader: 处理 less → css

⚫ sass-loader: 处理 sass → css

⚫ postcss-loader: 用 postcss 来处理 CSS

⚫ autoprefixer-loader: 处理 CSS3 属性前缀，已被弃用，建议直接使用 postcss

⚫ file-loader: 分发文件到 output 目录并返回相对路径

⚫ url-loader: 和 file-loader 类似，但是当文件小于设定的 limit 时可以返回一个 Data Url

34.说说 webpack 中常见的 Plugin？解决了什么问题？

⚫ Plugin（Plug-in）是一种计算机应用程序，它和主应用程序互相交互，以提供特定的功

能

⚫ 是一种遵循一定规范的应用程序接口编写出来的程序，只能运行在程序规定的系统下，

因为其需要调用原纯净系统提供的函数库或者数据

⚫ webpack 中的 plugin 也是如此，plugin 赋予其各种灵活的功能，例如打包优化、资源

管理、环境变量注入等，它们会运行在 webpack 的不同阶段（钩子 / 生命周期），贯穿

了 webpack 整个编译周期

⚫ HtmlWebpackPlugin

◼ 在打包结束后，自动生成一个 html 文文件，

◼ 并把打包生成的 js 模块引入到该 html 中

⚫ clean-webpack-plugin 删除（清理）构建目录

⚫ mini-css-extract-plugin 提取 CSS 到一个单独的文件中

⚫ DefinePlugin 允许在编译时创建配置的全局对象，是一个 webpack 内置的插件，不需

要安装

⚫ copy-webpack-plugin

◼ 复制文件或目录到执行区域，

◼ 如 vue 的打包过程中，如果我们将一些文件放到 public 的目录下，那么这个目录

会被复制到 dist 文件夹中

35.请详细说说 webpack 中的 plugin 和 loader 之间的区别是什么？

⚫ loader

◼ 是文件加载器，能够加载资源文件，并对这些文件进行一些处理，诸如编译、压缩

等，最终一起打包到指定的文件中

⚫ plugin

赋予了 webpack 各种灵活的功能，例如打包优化、资源管理、环境变量注入等，目的是解决 loader 无法实现的其他事

36.说说你对 promise 的了解

Promise 承诺 ，异步编程的一种解决方案，比传统解决方案（回调函数）更合理和更加强大

回调函数 形成了经典的回调地狱

promise 解决异步操作的优点：

⚫ 链式操作减低了编码难度

⚫ 代码可读性明显增强

⚫ 状态

promise 对象仅有三种状态

⚫ pending（进行中）

⚫ fulfilled（已成功）

⚫ rejected（已失败）

对象的状态不受外界影响，只有异步操作的结果，可以决定当前状态

用法

⚫ Promise 对象是一个构造函数，用来生成 Promise 实例

const promise = new Promise(function(resolve, reject) {});

⚫ Promise 构造函数接受一个函数作为参数，函数的两个参数分别是 resolve 和 reject

⚫ resolve 函数： 将 Promise 对象的状态从“未完成”变为“成功”

⚫ reject 函数： 将 Promise 对象的状态从“未完成”变为“失败”

⚫ 实例方法 then() catch() finally()

⚫ then()

◼ 实例状态发生改变时的回调函数

◆ 第一个参数是 resolved 状态的回调函数，

◆ 第二个参数是 rejected 状态的回调函数

◼ then 方法返回的是一个新的 Promise 实例，也就是 promise 能链式书写的原因

⚫ catch()

.then(null, rejection)或.then(undefined, rejection) 的别名，

◼ 用于指定发生错误时的回调函数

◼ Promise 对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止

◼ 一般来说，使用 catch 方法代替 then()第二个参数

⚫ finally()

◼ 用于指定不管 Promise 对象最后状态如何，都会执行的操作

构造函数方法 all() race() allSettled() resolve() reject()

⚫ all()

◼ Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例

const p = Promise.all([p1, p2, p3]);

◼ 接受一个数组作为参数，数组成员都为 Promise 实例

◼ 实例 p 的状态由 p1、p2、p3 决定，分为两种： ◆ 只有 p1、p2、p3 的状态都变成 fulfilled，p 的状态才会变成 fulfilled，此时 p1、

p2、p3 的返回值组成一个数组，传递给 p 的回调函数

◆ 只要 p1、p2、p3 之中有一个被 rejected，p 的状态就变成 rejected，此时第

一个被 reject 的实例的返回值，会传递给 p 的回调函数

◼ 注意，如果作为参数的 Promise 实例，自己定义了 catch 方法，那么它一旦被

rejected，并不会触发 Promise.all()的 catch 方法

⚫ race()

◼ Promise.race()方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例

const p = Promise.race([p1, p2, p3]);

◼ 只要 p1、p2、p3 之中有一个实例率先改变状态，p 的状态就跟着改变

◼ 率先改变的 Promise 实例的返回值则传递给 p 的回调函数

⚫ allSettled()

◼ Promise.allSettled()方法接受一组 Promise 实例作参数，包装一个新 Promise 实例

◼ 只有等到所有这些参数实例都返回结果，不管是 fulfilled 还是 rejected，包装实例

才会结束

const promises = [

fetch('/api-1'),

fetch('/api-2'),

fetch('/api-3'),

];

await Promise.allSettled(promises);

removeLoadingIndicator();

⚫ resolve()

◼ 将现有对象转为 Promise 对象

Promise.resolve('foo')

// 等价于

new Promise(resolve => resolve('foo'))

◼ 参数可以分成四种情况：

◆ 参数是一个 Promise 实例，promise.resolve 将不做任何修改、原封不动地返

回这个实例

◆ 参数是一个thenable对象，promise.resolve会将这个对象转为 Promise对象，

然后就立即执行 thenable 对象的 then()方法

◆ 参数不是具有 then()方法的对象，或根本就不是对象，Promise.resolve()会返

回一个新的 Promise 对象，状态为 resolved

◆ 没有参数时，直接返回一个 resolved 状态的 Promise 对象

⚫ reject()

◼ Promise.reject(reason)方法也会返回一个新的 Promise 实例，该实例的状态为

rejected

const p = Promise.reject('出错了');

// 等同于

const p = new Promise((resolve, reject) => reject('出错了'))

使用场景

⚫ 将图片的加载写成一个 Promise，一旦加载完成，Promise 的状态就发生变化 ⚫ 通过链式操作，将多个渲染数据分别给个 then，让其各司其职。或当下个异步请求依

赖上个请求结果的时候，我们也能够通过链式操作友好解决问题

⚫ 通过 all()实现多个请求合并在一起，汇总所有请求结果，只需设置一个 loading 即可

⚫ 通过 race 可以设置图片请求超时