[{"_1":2,"_980":-5,"_981":-5},"loaderData",{"_3":4,"_49":50},"root",{"_5":6},"clerkState",{"_7":8},"__internal_clerk_state",{"_9":10,"_20":21,"_22":23,"_24":23,"_25":26,"_27":23,"_28":23,"_29":23,"_30":23,"_31":23,"_32":23,"_33":23,"_34":23,"_35":36,"_45":23,"_46":23,"_47":26,"_48":26},"__clerk_ssr_state",{"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":-5},"sessionClaims","sessionId","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","__publishableKey","pk_live_Y2xlcmsucXVlc3Rpb25zLnZpc3VhbGl6ZWl0LmFwcCQ","__proxyUrl","","__domain","__isSatellite",false,"__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__signInForceRedirectUrl","__signUpForceRedirectUrl","__signInFallbackRedirectUrl","__signUpFallbackRedirectUrl","__clerk_debug",{"_37":26,"_38":23,"_39":40,"_41":23,"_42":21,"_43":26,"_44":23},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__clerkJSUrl","__clerkJSVersion","__telemetryDisabled","__telemetryDebug","routes/_index",{"_51":52,"_976":977},"questions",[53,185,208,231,272,302,325,354,378,408,433,457,480,504,533,556,591,615,639,663,693,717,741,765,789,812,835,859,882,906,929,953],{"_54":55,"_56":57,"_58":59,"_60":61,"_62":63,"_64":65,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_107":108,"_127":128,"_129":26,"_130":-5,"_131":132,"_133":134,"_155":148,"_149":156,"_151":156,"_154":-5,"_157":158,"_159":160,"_164":-5,"_165":166,"_167":168,"_179":180,"_181":-5,"_182":-5,"_183":184},"url","https://api.github.com/repos/pro-collection/interview-question/issues/1089","repository_url","https://api.github.com/repos/pro-collection/interview-question","labels_url","https://api.github.com/repos/pro-collection/interview-question/issues/1089/labels{/name}","comments_url","https://api.github.com/repos/pro-collection/interview-question/issues/1089/comments","events_url","https://api.github.com/repos/pro-collection/interview-question/issues/1089/events","html_url","https://github.com/pro-collection/interview-question/issues/1089","id",2778229308,"node_id","I_kwDOJGDC6c6lmGo8","number",1089,"title","vite 与 esbuild 是关系【热度: 55】","user",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"login","yanlele",22188674,"MDQ6VXNlcjIyMTg4Njc0","avatar_url","https://avatars.githubusercontent.com/u/22188674?v=4","gravatar_id","https://api.github.com/users/yanlele","https://github.com/yanlele","followers_url","https://api.github.com/users/yanlele/followers","following_url","https://api.github.com/users/yanlele/following{/other_user}","gists_url","https://api.github.com/users/yanlele/gists{/gist_id}","starred_url","https://api.github.com/users/yanlele/starred{/owner}{/repo}","subscriptions_url","https://api.github.com/users/yanlele/subscriptions","organizations_url","https://api.github.com/users/yanlele/orgs","repos_url","https://api.github.com/users/yanlele/repos","https://api.github.com/users/yanlele/events{/privacy}","received_events_url","https://api.github.com/users/yanlele/received_events","type","User","user_view_type","public","site_admin","labels",[109,120],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},5284642729,"LA_kwDOJGDC6c8AAAABOv0_qQ","https://api.github.com/repos/pro-collection/interview-question/labels/%E5%B7%A5%E7%A8%8B%E5%8C%96","name","工程化","color","1d76db","default","description","web 项目工程化",{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},5312231007,"LA_kwDOJGDC6c8AAAABPKI2Xw","https://api.github.com/repos/pro-collection/interview-question/labels/%E9%98%BF%E9%87%8C%E5%B7%B4%E5%B7%B4","阿里巴巴","ededed","公司标签","state","open","locked","assignee","assignees",[],"milestone",{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":144,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},"https://api.github.com/repos/pro-collection/interview-question/milestones/3","https://github.com/pro-collection/interview-question/milestone/3","https://api.github.com/repos/pro-collection/interview-question/milestones/3/labels",9124547,"MI_kwDOJGDC6c4AizrD",3,"高","高级别面试问题","creator",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"open_issues",425,"closed_issues",0,"created_at","2023-03-06T15:00:27Z","updated_at","2025-02-10T16:49:33Z","due_on","closed_at","comments","2025-01-09T16:09:00Z","author_association","MEMBER","sub_issues_summary",{"_161":148,"_162":148,"_163":148},"total","completed","percent_completed","active_lock_reason","body","**关键词**：vite 与 esbuild\n\n1. **Vite 对 Esbuild 的依赖关系（构建阶段）**\n\n - **代码转换和打包工具**：在 Vite 的构建过程（`vite build`）中，Esbuild 扮演了重要的角色。Esbuild 是一个超高速的 JavaScript 打包器，Vite 利用 Esbuild 来进行代码的转换和初步打包。它能够快速地将 ES 模块（ESM）进行处理，如解析`import`和`export`语句，把多个模块合并成一个或多个输出文件。\n - **性能优势体现**：Esbuild 的高性能主要体现在其使用 Go 语言编写，具有高度并行化的编译能力。相比传统的打包工具，它能够以极快的速度完成任务。例如，在处理大型项目中的大量 JavaScript 模块时，Esbuild 可以在很短的时间内完成打包工作，这对于 Vite 在构建阶段提高效率非常有帮助。\n\n2. **功能协作关系（在 Vite 生态中的角色）**\n\n - **与 Vite 插件的协作**：Vite 有丰富的插件生态系统，Esbuild 可以和这些插件协作来完成更复杂的构建任务。例如，在处理 CSS、TS（TypeScript）等文件时，Vite 插件可以在 Esbuild 的基础上进行进一步的处理。当 Esbuild 完成对 JavaScript 模块的初步打包后，Vite 插件可以对打包后的文件进行优化，如压缩、添加代码注释等操作。\n - **在不同模块类型处理中的分工**：对于不同类型的模块，Vite 和 Esbuild 有不同的处理方式。Esbuild 主要专注于 JavaScript 模块的快速打包和转换，而 Vite 则负责整体的构建流程协调，包括对 CSS 文件的处理（如解析`@import`语句）、静态资源的处理（如图片、字体的加载路径优化）以及模块热替换（HMR）等开发阶段的功能。例如，在处理一个包含 JavaScript、CSS 和图片的项目时，Esbuild 会快速打包 JavaScript 模块，Vite 则会确保 CSS 正确加载并且图片资源能够被正确引用。\n\n3. **Vite 开发阶段与 Esbuild 的关联（相对较弱）**\n - **开发模式下的功能侧重不同**：在 Vite 开发阶段，其主要利用浏览器原生 ES 模块的支持来实现快速的模块加载和模块热替换，Esbuild 的打包功能在这个阶段没有像在构建阶段那样被大量使用。Vite 开发服务器会在浏览器请求模块时即时提供相应的 ES 模块文件，而不是依赖 Esbuild 进行预先打包。\n - **潜在的间接关联**：不过，在开发阶段，Vite 的一些配置选项和底层机制可能会和 Esbuild 产生间接关联。例如，在配置`vite.config.js`文件时，一些关于模块解析、路径别名等设置可能会影响到后续构建阶段 Esbuild 的工作方式。同时，开发阶段对模块的处理方式也为构建阶段 Esbuild 的高效打包提供了基础，如准确的模块依赖关系等信息。\n","reactions",{"_54":169,"_170":148,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148},"https://api.github.com/repos/pro-collection/interview-question/issues/1089/reactions","total_count","+1","-1","laugh","hooray","confused","heart","rocket","eyes","timeline_url","https://api.github.com/repos/pro-collection/interview-question/issues/1089/timeline","performed_via_github_app","state_reason","score",1,{"_54":186,"_56":57,"_58":187,"_60":188,"_62":189,"_64":190,"_66":191,"_68":192,"_70":193,"_72":194,"_74":195,"_107":196,"_127":128,"_129":26,"_130":-5,"_131":199,"_133":200,"_155":148,"_149":202,"_151":202,"_154":-5,"_157":158,"_159":203,"_164":-5,"_165":204,"_167":205,"_179":207,"_181":-5,"_182":-5,"_183":184},"https://api.github.com/repos/pro-collection/interview-question/issues/1088","https://api.github.com/repos/pro-collection/interview-question/issues/1088/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1088/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1088/events","https://github.com/pro-collection/interview-question/issues/1088",2778226432,"I_kwDOJGDC6c6lmF8A",1088,"vite 在开发过程中，是如何处理 TS 文件的【热度: 112】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[197,198],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":201,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2025-01-09T16:07:37Z",{"_161":148,"_162":148,"_163":148},"**关键词**：vite、开发、TS\n\n1. **即时编译 TS 文件**\n\n - **原理**：在 Vite 开发过程中，它利用浏览器原生 ES 模块（ESM）的支持，对于 TypeScript（TS）文件，Vite 会在浏览器请求时即时将其编译为 JavaScript。这个编译过程是由 Vite 内部的插件机制和 TypeScript 编译器（tsc）相关工具完成的。当浏览器请求一个 TS 文件时，Vite 会在服务器端快速地将其转换为浏览器能够理解的 JavaScript 代码。\n - **示例操作**：假设在一个 Vite 项目中有一个`main.ts`文件作为入口文件，其中包含了 TypeScript 代码，如`const message: string = \"Hello, Vite\";`。当浏览器访问`main.ts`时，Vite 会在服务器端将这个 TS 文件编译为 JavaScript 代码（类似于`var message = \"Hello, Vite\";`），然后将编译后的 JavaScript 发送给浏览器，浏览器就可以正常地解析和执行这个文件。\n\n2. **类型检查与开发体验优化**\n\n - **类型检查独立于编译过程**：Vite 在开发过程中会将 TypeScript 的类型检查和代码编译分开。它主要关注代码的编译，以确保浏览器能够运行代码，而类型检查可以通过单独的进程来完成。这样做的好处是，即使类型检查出现错误，也不会影响代码的即时编译和在浏览器中的运行，开发者可以在看到代码运行效果的同时，在编辑器（如 VS Code）中根据类型检查的提示来修复代码中的类型问题。\n - **利用 IDE 的类型检查功能**：Vite 项目通常会配合支持 TypeScript 的 IDE（集成开发环境）来提供更好的开发体验。IDE 可以实时地对 TypeScript 代码进行类型检查，当开发者编写代码时，IDE 会根据代码中的类型定义和引用情况及时地显示错误和提示信息。例如，在 VS Code 中，当编写一个函数参数类型错误的 TypeScript 代码时，编辑器会立即在代码行旁边显示红色波浪线，并提供错误信息，帮助开发者快速定位和修复类型错误。\n\n3. **模块解析与 TS 模块支持**\n\n - **正确解析 TS 模块导入和导出**：Vite 能够正确地解析 TypeScript 中的模块导入（`import`）和导出（`export`）语句。无论是 ES 模块风格的导入导出，还是 CommonJS 风格（在 TypeScript 中也可以使用）的模块交互方式，Vite 都可以处理。例如，在一个 TS 文件中，如果有`import { functionA } from './utils.ts';`这样的导入语句，Vite 会准确地找到`utils.ts`文件，并将其编译和处理后提供给当前文件使用。\n - **支持 TS 模块的热替换（HMR）**：和 JavaScript 模块类似，Vite 也支持 TypeScript 模块的热替换。当修改了一个 TS 模块后，Vite 会通过模块热替换机制将更新后的模块发送给浏览器，浏览器会用新模块替换旧模块，同时保持应用的状态。例如，在一个 Vite + React + TS 项目中，如果修改了一个 React 组件的 TSX（TypeScript XML）文件，Vite 会检测到这个变化，通过 HMR 更新这个组件，而不会刷新整个页面。\n\n4. **TS 配置文件（`tsconfig.json`）的协同工作**\n - **读取和应用配置选项**：Vite 会读取项目中的`tsconfig.json`文件来确定 TypeScript 的编译选项。这个文件包含了如目标 JavaScript 版本（`target`）、模块解析方式（`module`）、是否包含类型检查（`noEmitOnError`等选项）等重要信息。Vite 会根据这些配置来正确地编译 TypeScript 文件。例如，如果`tsconfig.json`中设置了`target`为`ES6`，Vite 会将 TS 文件编译为符合 ES6 标准的 JavaScript 代码。\n - **配置文件的更新与 Vite 的响应**：当`tsconfig.json`文件被修改时，Vite 会根据新的配置重新调整对 TypeScript 文件的编译方式。例如，如果在`tsconfig.json`中添加了一个新的路径别名（`paths`选项）用于模块引用，Vite 会识别这个变化，并在后续的模块解析过程中正确地使用这个路径别名来查找和处理相关的 TS 模块。\n\n---\n\n**编译细节**\n\n1. **Vite 的 TS 插件系统工作机制**\n\n - **利用`vite-plugin-typescript`插件**：Vite 在开发过程中通过`vite-plugin-typescript`插件来处理 TypeScript 文件的即时编译。这个插件会在 Vite 开发服务器启动时被加载并初始化。它会自动检测项目中的`tsconfig.json`文件，以获取 TypeScript 的编译选项，如目标编译版本、模块解析规则等。\n - **监听文件变化**：插件会建立一个文件监听器，用于实时监测 TypeScript 文件的变化。当有 TS 文件被修改（例如，保存文件后），插件会立即捕获到这个变化。例如，在开发过程中，当开发者在编辑器中保存了一个`main.ts`文件，插件会察觉到这个文件更新事件。\n\n2. **编译过程细节**\n\n - **语法解析与类型检查（部分）**：插件会首先对 TypeScript 文件进行语法解析，这类似于 TypeScript 编译器（`tsc`）的前端工作。它会检查代码的语法是否正确，包括变量声明、函数定义、类型注解等方面。不过，Vite 中的 TS 插件在开发阶段主要关注代码的编译，对于严格的类型检查，它会和其他工具（如编辑器的 TS 插件）协同工作。例如，对于`const num: number = \"abc\"`这样的错误类型赋值，插件会在编译过程中识别语法问题，但可能不会像完整的`tsc`检查那样提供详细的类型错误链。\n - **转换为 JavaScript 代码**：在解析语法之后，插件会根据`tsconfig.json`中的目标版本（如`ESNext`、`ES6`等）和其他编译规则，将 TypeScript 代码转换为 JavaScript 代码。这个转换过程涉及到诸多 TypeScript 特性的处理，如类型擦除（去除类型注解）、箭头函数转换（如果目标版本较低）、装饰器处理（如果使用）等。例如，对于一个 TypeScript 的箭头函数`const add = (a: number, b: number): number => a + b;`，如果目标版本是`ES5`，插件可能会将其转换为`function add(a, b) { return a + b; }`形式的 JavaScript 函数。\n - **处理模块导入和导出**：插件能够正确处理 TypeScript 中的模块导入（`import`）和导出（`export`）。无论是 ES 模块风格还是 CommonJS 风格的模块交互，插件都会确保在编译后的 JavaScript 中保持正确的模块引用。例如，对于`import { func } from './module.ts';`这样的 TS 模块导入，插件会在编译`module.ts`后，将其正确地转换为 JavaScript 模块引用，使得在浏览器环境中能够正确加载和执行。\n\n3. **与浏览器交互和代码发送**\n - **生成符合浏览器加载的代码格式**：经过编译后的 JavaScript 代码会被格式化为符合浏览器 ES 模块加载的形式。Vite 会确保代码中的模块导入路径、变量声明等都符合浏览器的原生 ES 模块规范。例如，编译后的代码可能会有类似于`import * as module from './module.js';`这样的标准 ES 模块导入语句，其中`.js`扩展名是在编译过程中添加的（即使原始文件是`.ts`），以满足浏览器对模块文件扩展名的识别要求。\n - **即时发送给浏览器**：一旦编译完成，Vite 会立即将编译后的 JavaScript 代码发送给浏览器。当浏览器请求一个 TypeScript 文件时，Vite 能够快速地完成编译并提供编译后的代码，使得浏览器可以像加载普通 JavaScript 模块一样加载和执行这些代码。例如，当浏览器通过`import { app } from './main.ts';`请求`main.ts`时，Vite 会编译`main.ts`为 JavaScript 并发送给浏览器，让浏览器能够顺利地执行应用程序的入口代码。\n",{"_54":206,"_170":148,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148},"https://api.github.com/repos/pro-collection/interview-question/issues/1088/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/1088/timeline",{"_54":209,"_56":57,"_58":210,"_60":211,"_62":212,"_64":213,"_66":214,"_68":215,"_70":216,"_72":217,"_74":218,"_107":219,"_127":128,"_129":26,"_130":-5,"_131":222,"_133":223,"_155":148,"_149":225,"_151":225,"_154":-5,"_157":158,"_159":226,"_164":-5,"_165":227,"_167":228,"_179":230,"_181":-5,"_182":-5,"_183":184},"https://api.github.com/repos/pro-collection/interview-question/issues/1087","https://api.github.com/repos/pro-collection/interview-question/issues/1087/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/1087/comments","https://api.github.com/repos/pro-collection/interview-question/issues/1087/events","https://github.com/pro-collection/interview-question/issues/1087",2778212060,"I_kwDOJGDC6c6lmCbc",1087,"vite 开发和构建有何不同？【热度: 292】",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[220,221],{"_66":110,"_68":111,"_54":112,"_113":114,"_115":116,"_117":26,"_118":119},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":224,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2025-01-09T16:00:57Z",{"_161":148,"_162":148,"_163":148},"**关键词**：vite、开发、构建\n\n1. **开发阶段**\n\n - **快速的模块加载**\n - **原理**：在开发阶段，Vite 充分利用浏览器对原生 ES 模块（ESM）的支持。当浏览器请求一个模块时，Vite 直接将对应的 ES 模块文件发送给浏览器，而不需要像传统构建工具那样先进行打包。这使得模块加载速度非常快，因为浏览器可以直接解析和执行这些原生模块。\n - **示例**：假设在一个 Vite 项目中有`main.js`和`utils.js`两个模块，`main.js`通过`import { someFunction } from './utils.js';`来引用`utils.js`中的函数。在开发服务器启动后，当浏览器访问`main.js`并遇到这个`import`语句时，Vite 会直接将`utils.js`发送给浏览器，浏览器能够快速地加载和执行这个模块。\n - **高效的模块热替换（HMR）**\n - **原理**：Vite 的 HMR 功能允许在修改代码后，只更新发生变化的模块，而不需要刷新整个页面。它通过建立一个 WebSocket 连接来实时监听文件变化。当一个模块被修改后，Vite 会将更新后的模块发送给浏览器，浏览器会用新模块替换旧模块，同时保持应用的当前状态。\n - **示例**：如果在上述`utils.js`模块中修改了`someFunction`的实现，Vite 会检测到这个变化，通过 WebSocket 将更新后的`utils.js`发送给浏览器。浏览器接收到新模块后，会更新`main.js`中对`someFunction`的引用，并且应用的其他部分状态（如组件的局部状态）可以保持不变，从而实现了快速的热替换，提高了开发效率。\n - **开发服务器的便利性**\n - **原理**：Vite 提供了一个轻量级的开发服务器，它可以快速启动并且自动处理一些常见的开发任务，如解析`import`语句、处理 CSS 的`@import`等。这个开发服务器还支持一些开发时的功能，如自动打开浏览器、代理请求等。\n - **示例**：在启动 Vite 开发服务器后，它可以自动打开默认浏览器并访问项目的首页。如果项目需要从后端 API 获取数据，并且开发环境和生产环境的 API 地址不同，Vite 的开发服务器可以通过配置代理，将前端请求转发到正确的后端 API 地址，方便开发过程中的联调。\n\n2. **构建阶段（主要是`vite build`）**\n - **代码打包与优化**\n - **原理**：在构建阶段，Vite 使用 Rollup 作为打包工具（在`vite build`过程中）。Rollup 会对项目中的所有 ES 模块进行静态分析，将它们打包成一个或多个适合生产环境的文件。这个过程包括 Tree - Shaking（摇树优化），即剔除未使用的代码，以及作用域提升（Scope Hoisting）来优化代码结构，减少变量查找的层级，从而生成更紧凑、高效的代码。\n - **示例**：假设有一个包含多个工具函数的`utils.js`模块，如`export const add = (a, b) => a + b;`，`export const subtract = (a, b) => a - b;`等。在`main.js`中只使用了`add`函数，通过`import { add } from './utils.js';`引用。在构建过程中，Rollup 会通过 Tree - Shaking 检测到`subtract`等未使用的函数，不会将它们打包到最终的输出文件中，减小了文件大小。\n - **资源处理与整合**\n - **原理**：Vite 在构建阶段会对各种资源（如 CSS、静态图像、字体等）进行处理。对于 CSS，它会将`@import`语句解析并将相关的 CSS 文件合并，还可能进行压缩和代码转换。对于静态资源，它会根据配置将它们复制到输出目录，并可能对文件名进行哈希处理，以方便缓存管理。\n - **示例**：如果项目中有一个`styles.css`文件，其中通过`@import`导入了其他 CSS 文件，如`@import 'normalize.css';`。在构建时，Vite 会将`normalize.css`和`styles.css`合并成一个或多个 CSS 文件，并将它们放置在输出目录的合适位置，同时可能会对 CSS 进行压缩，减少文件大小，提高页面加载速度。\n - **输出格式和部署准备**\n - **原理**：构建阶段会根据配置生成适合生产环境部署的文件格式。Vite 可以生成多种格式的输出，如`umd`、`es`、`cjs`等，以满足不同的部署场景。例如，`umd`格式可以用于在浏览器中通过`\n \n\n```\n\n此时的页面:\n\n![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4948c01e92814e9583a34ea2ce4bbd42~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp#?w=1928&h=1040&s=1053345&e=png&b=ffffff)\n\n### JavaScript 部分\n\n### 实现原理：\n\n1.使用一个父容器 container 包裹子容器 box\n\n2.图片容器 box-img 包裹在容器 box 中，用来展示\n\n3.通过 js 获取父容器的 DOM 结构，再获取其子元素图片容器 box\n\n4.将其按照瀑布流的规则使用绝对定位放置\n\n5.获取屏幕大小计算该屏幕最多能放下几张图片，将前 n 张图片放在第一行\n\n6.使用一个 heightArr 高度数组,在放置的时候记录每一列图片的高度,后面的图片放置在高度最低的那一列\n\n### 图解:\n\n![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d2e0b52959ea49df9cb63ab2a5aa9bd2~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp#?w=905&h=636&s=34819&e=png&b=ffffff)\n\n### js 代码实现:\n\n```javascript\n//获取用户屏幕宽度，决定一行几张图\n//操作下一张图，放到上一行最矮的列下\nimgLocation(\"container\", \"box\");\n\nfunction imgLocation(parent, content) {\n var cparent = document.getElementById(parent);\n var ccontent = getChildElement(cparent, content); //document.querySelectorAll('#container .box')\n // console.log(ccontent)\n var imgWidth = ccontent[0].offsetWidth;\n var num = Math.floor(document.documentElement.clientWidth / imgWidth);\n cparent.style.width = `${imgWidth * num}px`;\n //要操作的是哪张，每一列的高度\n\n var BoxHeightArr = [];\n for (var i = 0; i < ccontent.length; i++) {\n if (i < num) {\n //记录第一行\n BoxHeightArr[i] = ccontent[i].offsetHeight;\n } else {\n //开始操作，找到最矮的高度及列数\n minHeight = Math.min.apply(null, BoxHeightArr);\n var minIndex = BoxHeightArr.indexOf(minHeight);\n\n //摆放图片位置\n ccontent[i].style.position = \"absolute\";\n ccontent[i].style.top = minHeight + \"px\";\n ccontent[i].style.left = ccontent[minIndex].offsetLeft + \"px\";\n //更新这一列图片高度\n BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight;\n }\n }\n console.log(BoxHeightArr);\n}\n\nfunction getChildElement(parent, child) {\n //获取parent中所有child\n var childArr = [];\n var allChild = parent.getElementsByTagName(\"*\");\n //找出所有box\n for (var i = 0; i < allChild.length; i++) {\n if (allChild[i].className == child) {\n childArr.push(allChild[i]);\n }\n }\n return childArr;\n}\n```\n\n### 最终效果:\n\n![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/19e9ec489a484120b12c43fe87b532e7~tplv-k3u1fbpfcp-jj-mark:3024:0:0:0:q75.awebp#?w=1920&h=911&s=1021235&e=png&b=fefcfc)\n",{"_54":974,"_170":148,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148},"https://api.github.com/repos/pro-collection/interview-question/issues/820/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/820/timeline","pagination",{"_978":979,"_161":577},"value",-1,"actionData","errors"]