前端工程化面试题（一）

如何使用 Docker 部署前端项目？

使用 Docker 部署前端项目通常涉及以下几个步骤：

1. 创建项目：首先，需要在本地创建并配置好前端项目。

2. 准备 Docker 文件：

   • .dockerignore：这个文件用于排除不需要上传到 Docker 服务端的文件或目录。
   • Dockerfile：这是 Docker 的核心文件，用于构建 Docker 容器镜像。通常，Dockerfile 会包含基础镜像、工作目录设置、依赖安装、项目构建等指令。
   • nginx.conf（可选）：如果项目需要服务器来托管，可以准备一个 nginx 配置文件来配置服务器。

3. 构建 Docker 镜像：在项目的根目录下，使用 docker build 命令来构建 Docker 镜像。例如：docker build -t my-frontend-app .。这里的 -t 或 --tag 用于给构建的镜像添加一个或多个标签。

4. 创建并运行 Docker 容器：使用 docker run 命令来创建并运行 Docker 容器。例如：docker run -itd -p 8080:80 --name my-frontend-container my-frontend-app。这里的 -i、-t、-d 分别表示交互模式、分配一个终端、在后台运行容器，-p 用于映射端口。

5. 访问应用：在浏览器中输入容器的映射地址（如 http://localhost:8080），即可访问部署在 Docker 容器中的前端项目。

什么是 npm cache？如何有效管理它？

npm cache 是 npm（Node Package Manager）的缓存机制，它用于保存已下载的包，以便在将来的安装中可以快速访问。这可以显著减少安装时间，特别是在慢速网络或离线环境中。

有效管理 npm cache 的方法包括：

1. 清理缓存：使用 npm cache clean 命令可以清理整个 npm 缓存。如果需要清理特定包的缓存，可以使用 npm cache clean <package-name> --force。
2. 查看缓存：使用 npm cache ls 命令可以列出缓存中的所有包。也可以查看特定包的缓存信息。
3. 修复缓存：如果遇到与缓存相关的问题，可以尝试清理缓存来修复。
4. 配置缓存：可以通过 .npmrc 文件配置缓存的存储路径和大小限制等。

如何通过 npm 发布前端 package？发布流程是怎样的？

通过 npm 发布前端 package 的流程通常包括以下几个步骤：

1. 注册 npm 账号：在 npm 官网 注册一个账号。

2. 准备 package：

   • 创建一个新的项目文件夹，并使用 npm init 命令初始化一个新的 npm 包。
   • 编写项目代码和 README.md 文件，详细描述 package 的信息和使用方法。
   • 准备 package.json 文件，确保其中的 name、version、description、main、keywords、author 和 license 等字段都已正确填写。

3. 登录 npm：在命令行中使用 npm login 命令登录 npm 账号。

4. 发布 package：在项目根目录下，使用 npm publish 命令发布 package。如果发布成功，你会看到命令行提示 package 已经成功发布。

export、export default 和 module.exports 有什么区别？

• export：是 ES6 模块系统的核心部分，用于从文件中导出函数、关键字、对象或值，使其可以在其他文件中通过 import 语句导入和使用。它支持命名导出和默认导出。
• export default：用于导出模块的默认值。每个模块只能有一个默认导出。导入时，可以使用任意名称来接收这个默认导出。
• module.exports：是 CommonJS 模块系统的一部分，在 Node.js 环境中使用。它用于导出模块，但这不是 ES6 标准的一部分。与 export 不同，module.exports 只能导出一个对象或函数作为模块的接口。

在 window 对象中，模块间依赖关系由文件加载顺序决定，这种模块组织方式有哪些缺点？

在 window 对象中，如果模块间的依赖关系由文件加载顺序决定，那么这种模块组织方式可能会带来以下缺点：

1. 依赖关系不明确：由于依赖关系隐藏在文件加载顺序中，因此很难直观地看出模块之间的依赖关系。
2. 难以维护：随着项目的增长，文件数量和依赖关系会变得越来越复杂，维护起来也会更加困难。
3. 容易出错：如果文件加载顺序发生变化，或者某个模块被遗漏或重复加载，都可能导致项目出错。

什么是前端工程化？它有什么意义？

前端工程化是指将前端开发纳入软件工程范畴，采用系统化、规范化的方法来进行前端项目的开发、测试、部署和维护。它的意义在于：

1. 提高开发效率：通过工程化的方法，可以自动化地构建、测试和部署前端项目，从而大大提高开发效率。
2. 保证代码质量：通过代码审查、单元测试、集成测试等手段，可以保证代码的质量和稳定性。
3. 便于团队协作：工程化的方法使得前端项目更加模块化、组件化，便于团队成员之间的协作和分工。
4. 降低维护成本：通过合理的项目结构和清晰的依赖关系，可以降低项目的维护成本。

什么是 ESLint？它有什么作用？

ESLint 是一个静态代码检查工具，用于识别和报告 JavaScript 代码中的模式。它的主要作用包括：

1. 代码质量检查：通过配置规则集，ESLint 可以检查代码中的潜在问题，如未声明的变量、未使用的变量、语法错误等。
2. 代码风格统一：ESLint 可以强制团队成员遵循一致的代码风格，从而提高代码的可读性和可维护性。
3. 自动化修复：对于一些简单的错误或不符合规则的地方，ESLint 可以提供自动化修复的建议或工具。

如何在 Webpack 中切换开发环境和生产环境？

在 Webpack 中，可以通过配置不同的环境变量来切换开发环境和生产环境。通常，这涉及到以下几个步骤：

1. 定义环境变量：在 package.json 的 scripts 部分，可以为不同的环境定义不同的脚本命令。例如，可以使用 cross-env 工具来设置环境变量："build": "cross-env NODE_ENV=production webpack --config webpack.config.js" 和 "start": "cross-env NODE_ENV=development webpack serve --config webpack.config.js"。
2. 读取环境变量：在 Webpack 配置文件中，可以使用 process.env.NODE_ENV 来读取当前的环境变量。
3. 配置不同的插件和加载器：根据环境变量的值，可以配置不同的插件和加载器。例如，在生产环境中，可以启用代码压缩、优化等插件；在开发环境中，可以启用热更新、source map 等插件。

Webpack 的 Tree shaking 机制的原理是什么？

Webpack 的 Tree shaking 机制是一种优化技术，用于在构建过程中移除 JavaScript 中未使用的代码。它的原理主要基于 ES6 的模块系统（即 import/export）和静态分析。

在构建过程中，Webpack 会分析模块的依赖关系，并确定哪些代码是实际被使用的，哪些代码是未使用的。然后，它会移除那些未使用的代码，从而减小打包后的文件体积。

需要注意的是，Tree shaking 只能在 ES6 模块系统中有效工作，因为 CommonJS 模块系统是动态加载的，无法进行静态分析。

如何使用 Webpack 实现异步加载？

在 Webpack 中，可以使用动态 import 语法来实现异步加载。动态 import 返回一个 Promise 对象，该对象在解析模块时完成。

例如，可以使用以下代码来异步加载一个模块：

import(/* webpackChunkName: "myModule" */ './myModule').then(module => {// 使用加载的模块module.default();
}).catch(error => {// 处理加载错误console.error('Error loading module:', error);
});

这里的 /* webpackChunkName: "myModule" */ 是一个注释，用于指定生成的 chunk 的名称。Webpack 会将这个模块打包成一个单独的 chunk 文件，并在需要时异步加载它。

使用 html-webpack-plugin 时找不到指定的 template 文件怎么办？

在使用 html-webpack-plugin 时，如果找不到指定的 template 文件，可以尝试以下几个解决方法：

1. 检查文件路径：确保 template 文件的路径是正确的。如果路径中包含相对路径或特殊字符，请确保它们被正确处理。
2. 检查文件名和扩展名：确保文件名和扩展名与在 html-webpack-plugin 配置中指定的名称相匹配。
3. 清理缓存：有时候，Webpack 的缓存可能会导致问题。可以尝试清理缓存后重新构建项目。
4. 检查 Webpack 配置：确保 html-webpack-plugin 的配置是正确的。特别是 template 选项，它应该指向一个有效的模板文件路径。

npm workspaces 解决了什么问题？

npm workspaces 是 npm 7 引入的一个功能，它解决了在大型项目中管理多个相关包时的依赖和版本冲突问题。通过使用 npm workspaces，可以在一个单一的仓库中管理多个 npm 包，并共享相同的依赖关系。

具体来说，npm workspaces 允许你定义一个包含多个子包的仓库，并在根目录下使用一个 package.json 文件来管理所有子包的依赖关系。这样，当你安装依赖时，npm 会根据每个子包的需要来安装相应的依赖版本，并避免在不同子包之间引入冲突的依赖版本。
以下是针对您所提出问题的详细回答：

前端 http client 中如何得知已接收完所有响应数据?

在前端 HTTP client 中，通常通过以下几种方式得知已接收完所有响应数据：

• 事件监听：使用如 XMLHttpRequest 或 Fetch API 时，可以监听相关的事件来判断数据是否接收完毕。例如，在使用 XMLHttpRequest 时，可以监听 onreadystatechange 事件，当 readyState 变为 4（表示请求已完成且响应已就绪）时，即可认为已接收完所有响应数据。在使用 Fetch API 时，可以通过 response.json() 或 response.text() 等方法将响应体转换为 JSON 或文本，并在转换完成的 Promise 中处理数据。
• 状态码检查：在接收到响应后，还需要检查 HTTP 状态码以确保请求成功。通常，状态码在 200~299 范围内表示请求成功。

semver 规范中，~1.2.3 与^1.2.3 的版本号范围分别是什么?

在 SemVer（Semantic Versioning）规范中，~1.2.3 和 ^1.2.3 分别表示不同的版本号范围：

• ~1.2.3：表示允许补丁级别的更新，即允许升级到 1.2.x 中的任何版本，但不允许升级到 1.3.0 或更高版本。
• ^1.2.3：表示允许兼容的更新，即允许升级到 1.x.x 中的任何版本，但不允许升级到 2.0.0 或更高版本。不过，如果主版本号为 0（例如 0.2.3），则 ^0.2.3 允许升级到任何 0.x.x 版本，因为主版本号为 0 时通常表示软件处于开发阶段，可能会有不兼容的更改。

core-js 是什么?有什么作用?

Core-js 是一个广泛使用的 JavaScript 标准库的 polyfill，它为旧版浏览器或环境提供了新标准的实现。其主要作用包括：

• 提供新特性：为不支持新 JavaScript 特性的旧浏览器或环境提供这些特性的实现。
• 提高兼容性：通过为旧环境提供新特性的 polyfill，使开发者能够使用最新的 JavaScript 特性而无需担心兼容性问题。

package-lock.json 与 yarn.lock 有什么区别?

package-lock.json 和 yarn.lock 都是用于记录项目依赖及其版本的文件，但它们分别由 npm 和 Yarn 包管理器生成，具有以下区别：

• 生成方式：package-lock.json 是 npm 在安装依赖时自动生成的，而 yarn.lock 是 Yarn 在安装依赖时生成的。
• 结构差异：两者在文件结构和内容上有所不同，但都是为了确保项目依赖的版本一致性。
• 兼容性：package-lock.json 仅与 npm 兼容，而 yarn.lock 仅与 Yarn 兼容。使用 npm 时应使用 package-lock.json，使用 Yarn 时应使用 yarn.lock。

Webpack 和 Vite 构建工具有什么区别?各自的优缺点是什么?

Webpack 和 Vite 都是前端构建工具，但它们具有不同的特点和优缺点：

• Webpack：

  • 优点：功能强大，插件丰富，支持复杂的项目结构和依赖关系。
  • 缺点：配置相对复杂，学习曲线较陡，热更新（HMR）性能可能不如 Vite。

• Vite：

  • 优点：开发体验快，支持即时热更新（HMR），配置简单且默认配置合理。
  • 缺点：相对于 Webpack，生态系统和插件数量可能较少，对复杂项目的支持可能不如 Webpack 完善。

什么是前端的 SWC 和 Esbuild?它们有什么作用?

• SWC：通常指的是一个用于编译和转换 JavaScript 和 TypeScript 代码的工具链，它可能是一个特定项目或工具的一部分，但在前端开发中并不是一个广泛认知的标准工具。关于其具体作用和详细信息，可能需要根据具体项目或工具链进行了解。

• Esbuild：是一个极快的 JavaScript 打包器和压缩器，它使用 Go 语言编写，具有出色的性能和构建速度。Esbuild 的主要作用包括：

  • 快速打包：将多个 JavaScript 和 CSS 文件打包成一个或多个文件，以优化加载和性能。
  • 代码压缩：对打包后的代码进行压缩，以减少文件大小并提高加载速度。
  • 支持现代 JavaScript 特性：支持最新的 JavaScript 特性，包括模块、类和异步函数等。

Webpack 的核心原理是什么?

Webpack 的核心原理包括以下几个方面：

• 入口：Webpack 从配置的入口文件开始构建依赖图，递归地解析和构建所有依赖的模块。
• 模块：Webpack 将所有类型的文件（如 JavaScript、CSS、图片等）视为模块，并通过相应的 loader 进行处理。Loader 允许 Webpack 处理那些本身不能直接被 JavaScript 解释执行的文件（如 CSS、图片等），并将它们转换为有效的模块。
• 依赖图：Webpack 构建一个依赖图，该图描述了模块之间的依赖关系。每个模块都有一个唯一的标识符，并且模块之间的依赖关系通过标识符进行引用。
• 输出：Webpack 将构建后的模块打包成一个或多个文件，并根据配置将这些文件输出到指定的目录。

npm 执行命令时，为什么需要使用双横线传递参数?

npm 执行命令时，使用双横线（--）传递参数的原因是为了明确区分 npm 命令本身的参数和传递给脚本或程序的参数。当 npm 脚本执行时，它会开启一个 shell 来执行指定的脚本命令或文件。双横线（--）用于告诉 npm，后面的参数不是 npm 命令本身的参数，而是应该传递给 shell 脚本或程序的参数。这样做可以避免参数混淆和解析错误。例如，在 npm script 中有以下命令：{"start": "serve"}，其中 serve 可通过 --port 指定端口号。使用 npm start -- --port 8080 命令时，-- --port 8080 部分会被传递给 serve 程序，而不是被 npm 解析为其自身的参数。
针对您提出的问题，以下是详细的回答：

Performance API 中哪些指标可以衡量首屏加载时间?

在 Performance API 中，可以通过分析 performance.timing 属性中的多个指标来衡量首屏加载时间。这些指标包括：

• navigationStart：表示前一页面卸载结束的时间或浏览器窗口的前一个网页关闭、unload 事件发生的时间戳。
• loadEventEnd：标志着页面加载完成的时间戳。

通过计算 loadEventEnd 和 navigationStart 之间的差值，可以得到页面加载的总时间，这在某种程度上可以反映首屏加载时间。此外，redirectStart、redirectEnd、domainLookupStart、domainLookupEnd、responseStart、domLoading、domComplete 等指标也都在不同程度上影响首屏渲染时间。

如何组织 CSS 以配合 Webpack 构建?

要组织 CSS 以配合 Webpack 构建，可以按照以下步骤进行：

1. 安装相关 loader：确保已经安装了 Webpack 和相关的 loader，如 css-loader 和 style-loader。
2. 配置 Webpack：在 Webpack 配置文件中，添加对 CSS 文件的处理规则。通常，这涉及到在 module.rules 数组中添加规则，指定当遇到以 .css 结尾的文件时，使用 style-loader 和 css-loader 进行处理。
3. 使用 CSS 模块（可选）：为了避免全局污染和类名冲突，可以使用 CSS 模块。这需要在 css-loader 的配置中添加 modules: true 选项，并在 CSS 文件中使用 CSS 模块的语法。

Webpack 打包过程中，import 和 CommonJS 有什么区别?

在 Webpack 打包过程中，import 和 CommonJS（通常使用 require）有以下区别：

• 语法差异：import 是 ES6 引入的官方模块系统的一部分，支持静态导入和导出；而 CommonJS 是 Node.js 使用的模块系统，使用 require 函数导入模块，通过 module.exports 或 exports 导出。
• 打包行为：Webpack 对 import 和 require 的处理有所不同。import 语句支持静态分析，有利于代码优化，如摇树优化（Tree Shaking）；而 CommonJS 模块在 Webpack 中通常会被原样输出，不进行静态分析。

当引入某个前端依赖项时，如何确定引入的具体文件?

当引入某个前端依赖项时，可以通过以下步骤确定引入的具体文件：

1. 查看依赖项的文档：通常，依赖项的文档会提供有关如何引入和使用该依赖项的详细信息。
2. 检查 package.json：package.json 文件中列出了项目的所有依赖项及其版本。通过查看该文件，可以了解引入了哪些依赖项。
3. 分析导入路径：在代码中查找以 import 或 require 开头的语句，分析这些语句的导入路径，以确定引入了哪些具体文件。
4. 查看 node_modules：如果以上方法无法确定具体文件，可以直接查看 node_modules 目录下的依赖项文件夹，以了解该依赖项包含哪些文件和子目录。

什么是服务器端渲染 (SSR)?

服务器端渲染（Server-Side Rendering，简称 SSR）是指在服务器上完成网页的渲染工作，然后将完整的 HTML 页面发送给客户端。客户端的浏览器接收到 HTML 页面后，直接进行展示，无需进行复杂的逻辑计算和渲染工作。SSR 的主要优点包括提高加载速度、提升 SEO 排名、支持离线浏览等。

前端项目中，如何优化首屏渲染时间?

在前端项目中，优化首屏渲染时间可以采取以下措施：

1. 减少网络请求：通过合并和压缩文件、使用雪碧图或字体图标等技术，减少需要下载的资源数量和大小。
2. 延迟加载非关键资源：将非关键资源（如图片、视频）延迟加载，只在用户需要时再进行加载。
3. 使用浏览器缓存：设置适当的缓存策略，使得页面资源可以被浏览器缓存起来，减少重复的网络请求。
4. 优化代码和文件大小：精简和压缩 HTML、CSS 和 JavaScript 文件，删除不必要的代码、注释和空格。
5. 异步加载和执行：将 JavaScript 脚本放在页面底部或使用异步加载的方式，确保脚本不会阻塞页面的渲染。
6. 使用 CDN 加速：将静态资源部署在内容分发网络（CDN）上，提高访问速度。
7. 使用预渲染技术：通过预渲染技术提前生成首屏内容并存储为静态文件，当用户访问时直接返回。

Webpack 支持哪些脚本模块规范?

Webpack 支持多种脚本模块规范，包括：

1. ES Modules (ESM)：ECMAScript 2015（也称为 ES6）及其后续版本引入的官方模块系统。
2. CommonJS：主要用于 Node.js，也被广泛应用于浏览器端代码的打包。
3. Asynchronous Module Definition (AMD)：专为浏览器端设计，支持异步加载模块。
4. Universal Module Definition (UMD)：旨在提供一个在 AMD 和 CommonJS 环境下都可运行的模块定义。
5. SystemJS 模块：由 SystemJS 提出的格式，用于动态加载模块。

如何在前端项目中进行单元测试?

在前端项目中进行单元测试通常涉及以下步骤：

1. 选择测试框架：如 Jest、Mocha、Jasmine 等。
2. 编写测试用例：针对要测试的功能或模块编写测试用例。
3. 配置测试环境：设置测试运行器和测试框架的配置。
4. 运行测试：使用命令行工具运行测试，并查看测试结果。
5. 修复和优化：根据测试结果修复代码中的错误，并优化测试用例。

Webpack 的热更新底层是如何实现的?它如何在不刷新浏览器的前提下更新页面?

Webpack 的热更新（Hot Module Replacement，简称 HMR）底层实现依赖于 WebSocket 或其他实时通信技术。当 Webpack 检测到文件变化时，它会重新构建受影响的模块，并通过 WebSocket 将更新后的模块发送到客户端。客户端接收到更新后的模块后，会使用这些模块替换掉旧的模块，从而实现页面内容的更新，而无需刷新浏览器。

Webpack 打包时 Hash 码是如何生成的?如何避免 Hash 码重复?

Webpack 打包时生成的 Hash 码通常是通过对文件内容进行哈希计算得到的。Webpack 使用一个哈希算法（如 MD5、SHA-1 等）对文件内容进行计算，生成一个唯一的 Hash 码。为了避免 Hash 码重复，可以采取以下措施：

1. 确保文件内容唯一：在打包前确保每个文件的内容都是唯一的，避免相同内容的文件被重复打包。
2. 使用内容哈希：Webpack 提供了内容哈希的选项（如 [contenthash]），该选项会根据文件内容生成 Hash 码，从而确保每个文件都有唯一的 Hash 码。
3. 配置输出文件名：在 Webpack 配置中设置输出文件名时，可以使用占位符（如 [name].[contenthash].js）来生成包含 Hash 码的文件名。

npm 的 dependencies 与 devDependencies 有什么区别?

在 npm 中，dependencies 和 devDependencies 有以下区别：

• dependencies：包含项目运行时所需的依赖项。这些依赖项在项目部署到生产环境时也需要存在。
• devDependencies：包含项目开发过程中所需的依赖项。这些依赖项仅在开发过程中使用，如测试框架、构建工具等。在项目部署到生产环境时，这些依赖项通常不需要存在。

通过在 package.json 文件中分别列出 dependencies 和 devDependencies，可以清晰地了解项目所需的依赖项及其用途。

Webpack 中的 bundle、chunk 和 module

• module（模块）：

  • 定义：模块是 Webpack 中基本的构建块，它指的是一个单独的文件或者代码段。
  • 作用：在 Webpack 中，每个模块都可以通过 require/import 语句进行依赖引入和使用，是代码组织和重用的基础单元。

• chunk（代码块）：

  • 定义：chunk 是指一个代码块，它是由多个模块组合而成的。
  • 作用：当 Webpack 执行构建时，会根据入口文件和依赖关系生成多个 chunk。这有助于实现代码分割，提高应用的加载性能。

• bundle（打包文件）：

  • 定义：bundle 是指最终生成的文件，它包含了所有的 chunk 和模块。
  • 作用：在 Webpack 执行构建时，会把每个 chunk 打包成一个 bundle 文件。这个文件是可以在浏览器中直接运行的，包含了应用所需的所有代码和资源。

JavaScript 代码压缩（minify）的原理

JavaScript 代码压缩的原理主要是在不改变代码语义的情况下，重写代码以缩小代码量。这通常包括：

• 将长的变量名重命名为短的变量名。
• 删除永远不可能到达的分支（如 if(false)）。
• 移除多余的空格、换行符和注释等。

通过这些手段，可以显著减小代码的体积，从而提高加载速度和执行效率。

前端优化 API 请求的方法

对于同一前端页面的 3 个组件请求同一个 API 并发送了 3 次请求的情况，可以通过以下方法进行优化：

• 代码分割与懒加载：将组件拆分为多个小的代码块，并在需要时按需加载，以减少初始加载的文件大小。
• 使用缓存：利用浏览器的缓存机制，对 API 请求的结果进行缓存，避免重复请求。
• 数据共享：在组件之间共享数据，避免每个组件都单独发起请求。可以使用状态管理工具（如 Redux）来实现数据共享。
• 合并请求：如果可能的话，将多个请求合并为一个请求，以减少网络开销。例如，可以使用 GraphQL 来实现这一点。

前端识别图片 MIME 类型的方法

前端可以通过以下方式正确识别图片的 MIME 类型：

• 文件扩展名：根据文件的扩展名（如 .jpg、.png）来猜测 MIME 类型。这种方法虽然简单，但不够准确。
• 文件头信息：读取文件的前几个字节（即文件头），根据文件头信息来确定 MIME 类型。这种方法更准确，但需要额外的处理。
• 使用库：可以使用一些现成的库（如 mime）来识别文件的 MIME 类型。这些库通常会根据文件扩展名和文件头信息来确定 MIME 类型，并提供更方便的接口。

webpack-dev-server 的启动与运行

webpack-dev-server 是一个小型的 Express 服务器，它使用 webpack-dev-middleware 来为通过 webpack 打包的资源提供服务。它的启动与运行通常包括以下几个步骤：

• 安装依赖：首先，需要在项目中安装 webpack-dev-server 及其相关依赖。
• 配置 webpack：在 webpack 配置文件中，需要设置 devServer 选项来配置 webpack-dev-server 的行为。例如，可以设置端口号、代理规则等。
• 启动服务器：通过运行 webpack serve 命令（或在旧版本中运行 webpack-dev-server 命令）来启动 webpack-dev-server。服务器启动后，会自动打开浏览器并访问设定的开发服务器地址。

自定义 Webpack Loader 或 Plugin 插件的编写

• Loader：

  • Loader 本质上是导出为函数的 JavaScript 模块。它们用于对模块的源代码进行转换。
  • 编写自定义 Loader 时，需要实现一个函数，该函数接收源代码作为输入，并返回转换后的源代码作为输出。
  • 在 webpack 配置文件中，通过 module.rules 选项来指定哪些文件应该使用自定义 Loader 进行处理。

• Plugin：

  • Plugin 用于执行更广泛的任务，如打包优化、资源管理、注入环境变量等。
  • 编写自定义 Plugin 时，需要创建一个类，并在其原型上定义一个 apply 方法。apply 方法会在插件被安装到 compiler 对象时被调用。
  • 在 apply 方法中，可以访问 compiler 对象和 compilation 对象，并使用它们提供的钩子（hooks）来执行自定义的任务。

Core Web Vitals

• 定义：Core Web Vitals 是一套旨在衡量用户在网页上获得良好体验的关键性能指标。

• 包括的指标：

  • 首次内容绘制（First Contentful Paint, FCP）：浏览器首次渲染出页面内容的时间点。
  • 最大内容绘制（Largest Contentful Paint, LCP）：页面加载过程中，视口中可见的最大内容元素渲染完成的时间点。
  • 首次输入延迟（First Input Delay, FID）：用户首次与页面交互（如点击按钮）到浏览器开始处理该交互的时间间隔。

这些指标共同反映了网页的加载性能、交互性能和视觉稳定性，是评估网页用户体验的重要依据。

Webpack 处理 node_modules 中的依赖

当使用 import 语句导入模块时，Webpack 会处理 node_modules 中的依赖。Webpack 会从 node_modules 目录中查找模块，并根据配置（如 resolve.extensions 和 resolve.modules）确定模块路径，然后将模块打包到最终的构建文件中。在处理 node_modules 中的依赖时，Webpack 还提供了一些优化策略，如代码分割、缓存、Tree Shaking 等。此外，还可以使用 externals 选项来指定哪些模块是外部依赖，不需要被打包进 bundle 文件。对于后端构建应用，还可以使用 webpack-node-externals 插件来智能排除 node_modules 中的依赖。