前端工程化面试题（一）

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

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

创建项目：首先，需要在本地创建并配置好前端项目。
准备 Docker 文件：
- .dockerignore：这个文件用于排除不需要上传到 Docker 服务端的文件或目录。
- Dockerfile：这是 Docker 的核心文件，用于构建 Docker 容器镜像。通常，Dockerfile 会包含基础镜像、工作目录设置、依赖安装、项目构建等指令。
- nginx.conf（可选）：如果项目需要服务器来托管，可以准备一个 nginx 配置文件来配置服务器。
构建 Docker 镜像 ：在项目的根目录下，使用 docker build 命令来构建 Docker 镜像。例如：docker build -t my-frontend-app .。这里的 -t 或 --tag 用于给构建的镜像添加一个或多个标签。
创建并运行 Docker 容器 ：使用 docker run 命令来创建并运行 Docker 容器。例如：docker run -itd -p 8080:80 --name my-frontend-container my-frontend-app。这里的 -i、-t、-d 分别表示交互模式、分配一个终端、在后台运行容器，-p 用于映射端口。
访问应用 ：在浏览器中输入容器的映射地址（如 http://localhost:8080），即可访问部署在 Docker 容器中的前端项目。

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

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

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

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

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

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

注册 npm 账号 ：在 npm 官网注册一个账号。
准备 package：
- 创建一个新的项目文件夹，并使用 npm init 命令初始化一个新的 npm 包。
- 编写项目代码和 README.md 文件，详细描述 package 的信息和使用方法。
- 准备 package.json 文件，确保其中的 name、version、description、main、keywords、author 和 license 等字段都已正确填写。
登录 npm ：在命令行中使用 npm login 命令登录 npm 账号。
发布 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 对象中，如果模块间的依赖关系由文件加载顺序决定，那么这种模块组织方式可能会带来以下缺点：

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

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

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

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

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

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

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

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

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

定义环境变量 ：在 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"。
读取环境变量 ：在 Webpack 配置文件中，可以使用 process.env.NODE_ENV 来读取当前的环境变量。
配置不同的插件和加载器：根据环境变量的值，可以配置不同的插件和加载器。例如，在生产环境中，可以启用代码压缩、优化等插件；在开发环境中，可以启用热更新、source map 等插件。

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

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

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

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

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

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

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

javascript 复制代码

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 文件，可以尝试以下几个解决方法：

检查文件路径：确保 template 文件的路径是正确的。如果路径中包含相对路径或特殊字符，请确保它们被正确处理。
检查文件名和扩展名：确保文件名和扩展名与在 html-webpack-plugin 配置中指定的名称相匹配。
清理缓存：有时候，Webpack 的缓存可能会导致问题。可以尝试清理缓存后重新构建项目。
检查 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 构建，可以按照以下步骤进行：

安装相关 loader ：确保已经安装了 Webpack 和相关的 loader，如 css-loader 和 style-loader。
配置 Webpack ：在 Webpack 配置文件中，添加对 CSS 文件的处理规则。通常，这涉及到在 module.rules 数组中添加规则，指定当遇到以 .css 结尾的文件时，使用 style-loader 和 css-loader 进行处理。
使用 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 中通常会被原样输出，不进行静态分析。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

确保文件内容唯一：在打包前确保每个文件的内容都是唯一的，避免相同内容的文件被重复打包。
使用内容哈希 ：Webpack 提供了内容哈希的选项（如 [contenthash]），该选项会根据文件内容生成 Hash 码，从而确保每个文件都有唯一的 Hash 码。
配置输出文件名 ：在 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 中的依赖。