vite面试题及详细答案120题（61-90）

《前后端面试题》专栏集合了前后端各个知识模块的面试题，包括html，javascript，css，vue，react，java，Openlayers，leaflet，cesium，mapboxGL，threejs，nodejs，mangoDB，MySQL，Linux… 。

前后端面试题-专栏总目录

一、本文面试题目录

61. Vite是如何支持模块化开发的？有什么优势？

Vite通过原生ES模块和插件系统支持模块化开发：

1. 原生ES模块：直接利用浏览器的ES模块支持，无需打包即可运行。
2. 依赖预构建：使用esbuild预构建第三方依赖，将CommonJS/UMD转换为ES模块。
3. 插件系统：通过插件支持各种模块格式（如Vue、JSX）。
4. 模块解析：处理裸模块导入（如import 'vue'），转换为正确的路径。

优势：

• 快速冷启动：无需等待整个应用打包。
• 即时热更新：模块热替换速度极快，且不丢失组件状态。
• 按需编译：仅在浏览器请求时编译模块，而非一次性处理所有代码。
• 简化配置：内置对多种模块格式的支持，减少配置工作。

62. 怎样在Vite中调试独立文件，而不需要重新构建整个项目？

1. 使用?raw查询参数：直接导入文件内容。

   import fileContent from './example.js?raw';
   console.log(fileContent);
   

2. 独立HTML文件：创建单独的HTML文件引用目标模块。

   <!-- test.html -->
   <script type="module">import { sum } from './utils/math.js';console.log(sum(1, 2));
   </script>
   

   运行：vite test.html

3. 调试工具：

   • 使用浏览器开发者工具直接调试单个模块。
   • 在代码中添加断点或debugger语句。

63. Vite中import.meta.glob的作用是什么？如何使用？

import.meta.glob用于动态导入多个模块，支持文件路径匹配：

1. 基本用法：

   // 导入所有.js文件
   const modules = import.meta.glob('./modules/*.js');// 使用
   for (const path in modules) {modules[path]().then((mod) => {console.log(path, mod);});
   }
   

2. 同步导入：

   const modules = import.meta.glob('./modules/*.js', { eager: true });// 直接使用
   console.log(modules);
   

3. 匹配模式：

   • *：匹配任意数量的任意字符，不包括目录分隔符。
   • **：匹配任意数量的任意字符，包括目录分隔符。
   • ?：匹配单个任意字符。
   • []：匹配方括号内的任意字符。

64. Vite中import.meta.env的作用是什么？如何正确使用？

import.meta.env用于访问Vite中的环境变量：

1. 内置变量：

   • import.meta.env.MODE：当前模式（development、production等）。
   • import.meta.env.BASE_URL：应用的基础路径。
   • import.meta.env.PROD：是否为生产环境。
   • import.meta.env.DEV：是否为开发环境。

2. 自定义变量：

   • 在.env文件中定义，必须以VITE_开头。

   VITE_API_URL=https://api.example.com
   

   • 在代码中使用：

   console.log(import.meta.env.VITE_API_URL);
   

3. 环境特定配置：

   • .env.development：开发环境配置。
   • .env.production：生产环境配置。

65. Vite中的Tree Shaking是如何工作的？

Vite中的Tree Shaking基于以下机制：

1. ES模块静态分析：Vite使用Rollup进行Tree Shaking，依赖ES模块的静态结构。
2. 副作用标记：通过package.json中的sideEffects字段标记无副作用的模块。
3. 生产环境优化：仅在生产环境构建时应用Tree Shaking。
4. 插件支持：通过插件进一步优化Tree Shaking效果。

示例：

// utils.js
export function add(a, b) {return a + b;
}export function subtract(a, b) {return a - b;
}// main.js
import { add } from './utils.js';console.log(add(1, 2));// 生产环境构建后，subtract函数会被Tree Shaking移除

66. 什么是Vite的依赖预构建？与Webpack的DLLPlugin有何异同？

Vite的依赖预构建：

• 使用esbuild将CommonJS/UMD模块转换为ES模块。
• 缓存预构建结果，提高开发服务器启动速度。
• 自动分析项目依赖，无需手动配置。

Webpack的DLLPlugin：

• 预先编译经常使用的库，减少构建时间。
• 需要手动配置哪些库需要预编译。
• 生成独立的DLL文件，需要在HTML中手动引入。

异同点：

• 相同点：都旨在提高构建/启动速度。
• 不同点：
  • Vite的预构建是自动的，无需手动配置；DLLPlugin需要手动指定。
  • Vite使用esbuild预构建，速度更快；DLLPlugin使用Webpack自身。
  • Vite的预构建结果仅用于开发环境；DLLPlugin的结果用于生产环境。

67. Vite中如何使用Web Assembly（Wasm）？

1. 导入Wasm模块：

   // 异步导入
   import init from './example.wasm';init().then((instance) => {const result = instance.exports.add(1, 2);console.log(result);
   });
   

2. 配置Vite（如果需要）：

   export default defineConfig({optimizeDeps: {exclude: ['*.wasm'], // 排除Wasm文件不进行预构建},
   });
   

3. 使用ES6模块语法：

   // 从Wasm模块导入函数
   import { add } from './example.wasm';console.log(add(1, 2));
   

68. Vite中assetsInlineLimit配置项的作用是什么？

assetsInlineLimit配置项用于控制小于指定大小的静态资源是否内联为base64：

1. 默认值：4096（4kb）。

2. 配置示例：

   export default defineConfig({build: {assetsInlineLimit: 8192, // 8kb以下的资源内联},
   });
   

3. 影响：

   • 内联资源减少HTTP请求，但会增加打包体积。
   • 较大的资源仍会作为单独文件输出。

69. 请解释Vite配置文件中的build和server部分各有哪些常见配置项？

build部分常见配置项：

• target：构建目标浏览器版本。
• outDir：输出目录。
• assetsDir：静态资源目录。
• assetsInlineLimit：内联资源的大小限制。
• minify：压缩工具（terser或esbuild）。
• sourcemap：是否生成sourcemap。
• rollupOptions：自定义Rollup配置。
• commonjsOptions：CommonJS转换选项。

server部分常见配置项：

• port：开发服务器端口。
• host：监听的主机名。
• open：启动时自动打开浏览器。
• https：启用HTTPS。
• proxy：配置代理规则。
• hmr：配置热更新选项。
• cors：配置跨域资源共享。

70. 如何在Vite中启用Gzip压缩？

1. 使用vite-plugin-compression插件：

   npm install vite-plugin-compression -D
   

2. 配置Vite：

   import { defineConfig } from 'vite';
   import compression from 'vite-plugin-compression';export default defineConfig({plugins: [compression({threshold: 10240, // 仅压缩大于10kb的文件algorithm: 'gzip', // 压缩算法}),],
   });
   

3. 生产环境部署：

   • 确保服务器支持提供压缩文件（如Nginx的gzip_static模块）。

71. Vite中如何配置类名的生成规则？

在vite.config.js中配置CSS Modules的generateScopedName：

export default defineConfig({css: {modules: {generateScopedName: '[name]__[local]___[hash:base64:5]',// 或使用函数自定义generateScopedName: (name, filename, css) => {const file = filename.split('/').pop();return `${file.replace(/\.\w+$/, '')}_${name}`;},},},
});

72. Vite中如何自动导入全局SCSS变量文件？

使用css.preprocessorOptions配置：

export default defineConfig({css: {preprocessorOptions: {scss: {additionalData: `@import "@/styles/variables.scss";@import "@/styles/mixins.scss";`,},},},
});

73. Vite的热更新机制与Webpack的热更新机制有何不同？

特性	Vite	Webpack
实现方式	基于原生ES模块和WebSocket	基于自定义runtime和loader
更新速度	极快，通常保持组件状态	较慢，可能需要重新编译
模块处理	按需更新单个模块	需要重新构建相关模块
集成方式	内置支持，无需额外配置	需要配置HMR插件和loader
状态保持	大部分情况下保持状态	可能丢失状态，取决于配置

74. Vite中如何使用插件实现代码压缩？

1. 使用Terser（默认）：

   export default defineConfig({build: {minify: 'terser',terserOptions: {compress: {drop_console: true,drop_debugger: true,},},},
   });
   

2. 使用esbuild（更快）：

   export default defineConfig({build: {minify: 'esbuild',},
   });
   

3. 使用插件：

   npm install vite-plugin-terser -D
   

   import { defineConfig } from 'vite';
   import viteTerser from 'vite-plugin-terser';export default defineConfig({plugins: [viteTerser({terserOptions: {compress: {drop_console: true,},},}),],
   });
   

75. Vite中如何配置生产环境下删除console.log语句？

1. 使用Terser：

   export default defineConfig({build: {minify: 'terser',terserOptions: {compress: {drop_console: true, // 删除consoledrop_debugger: true, // 删除debugger},},},
   });
   

2. 使用esbuild：

   export default defineConfig({esbuild: {pure: ['console.log', 'console.debug'], // 删除这些函数调用},
   });
   

76. Vite中如何处理跨域问题？

1. 开发环境代理：

   // vite.config.js
   export default defineConfig({server: {proxy: {'/api': {target: 'http://localhost:3000',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, ''),},},},
   });
   

2. 生产环境配置：

   • 配置后端CORS头。
   • 使用相同域名部署前后端。

77. Vite中如何配置额外的静态资源类型？

使用assetsInclude配置：

export default defineConfig({assetsInclude: ['**/*.gltf', '**/*.glb'], // 包含这些文件类型作为静态资源
});

78. Vite中小于多少字节的资源会被转为base64内联？

默认情况下，Vite会将小于**4kb（4096字节）**的资源转为base64内联。可以通过build.assetsInlineLimit配置：

export default defineConfig({build: {assetsInlineLimit: 8192, // 8kb以下的资源内联},
});

79. Vite中如何自定义HMR处理？

在模块中使用import.meta.hot自定义HMR逻辑：

// counter.js
export let count = 0;export function increment() {count++;
}if (import.meta.hot) {import.meta.hot.accept((newModule) => {// 更新模块时保持状态newModule.count = count;});
}

80. Vite的性能优化除了代码压缩还有哪些方面？

1. 代码分割：使用动态导入或manualChunks配置。
2. 懒加载：对非关键资源使用动态导入。
3. 预加载/预取：使用<link rel="preload">或插件自动处理。
4. CDN加载：外部依赖通过CDN加载。
5. 图片优化：压缩图片或使用WebP格式。
6. 缓存策略：配置适当的缓存头。
7. 预构建依赖：优化依赖预构建。
8. Tree Shaking：移除未使用的代码。
9. 并行构建：利用多核CPU加速构建。
10. 按需编译：开发环境按需编译模块。

81. Vite中如何指定需要预构建的依赖？

使用optimizeDeps.include配置：

export default defineConfig({optimizeDeps: {include: ['lodash-es', 'axios'], // 指定需要预构建的依赖},
});

82. Vite中预构建依赖的作用是什么？

1. 提高启动速度：预构建依赖缓存后，开发服务器启动更快。
2. 统一模块格式：将CommonJS/UMD模块转换为ES模块。
3. 减少请求数量：将多个依赖合并为一个或少数几个文件。
4. 优化依赖处理：加速依赖的解析和加载。

83. Vite中如何使用vite-plugin-vue插件处理.vue文件？

1. 安装插件：

   npm install @vitejs/plugin-vue -D
   

2. 配置Vite：

   // vite.config.js
   import { defineConfig } from 'vite';
   import vue from '@vitejs/plugin-vue';export default defineConfig({plugins: [vue()],
   });
   

3. 使用Vue组件：

   <!-- App.vue -->
   <template><div>{{ message }}</div>
   </template><script>
   export default {data() {return {message: 'Hello Vue!',};},
   };
   </script>
   

84. Vite中配置代理时，changeOrigin属性的作用是什么？

changeOrigin属性用于修改请求头中的Origin字段：

• true（默认）：修改请求头中的Origin为目标服务器的域名，用于欺骗服务器，使其认为请求来自同源。
• false：保留原始的Origin。

示例：

server: {proxy: {'/api': {target: 'http://localhost:3000',changeOrigin: true, // 修改Origin头},},
}

85. Vite中使用terser和esbuild压缩代码有什么区别？

特性	Terser	esbuild
压缩速度	较慢	极快（快10-100倍）
压缩率	较高	稍低
功能	完整的JavaScript压缩功能	基本压缩功能，缺少一些高级选项
适用场景	生产环境（需要最高压缩率）	开发环境（需要快速反馈）

配置示例：

// 使用Terser
export default defineConfig({build: {minify: 'terser',terserOptions: {compress: {drop_console: true,},},},
});// 使用esbuild
export default defineConfig({build: {minify: 'esbuild',},
});

86. Vite中如何配置开发服务器端口号？

在vite.config.js中配置server.port：

export default defineConfig({server: {port: 3000, // 指定端口号},
});

或通过命令行参数：

vite --port 3000

87. Vite中如何实现按需加载？

1. 动态导入：

   // 按需加载模块
   button.addEventListener('click', async () => {const { heavyModule } = await import('./heavyModule.js');heavyModule();
   });
   

2. 路由懒加载：

   // Vue Router
   const routes = [{path: '/about',component: () => import('./views/About.vue'), // 懒加载组件},
   ];// React Router
   const About = React.lazy(() => import('./components/About'));<React.Suspense fallback={<div>Loading...</div>}><Route path="/about" element={<About />} />
   </React.Suspense>;
   

88. Vite中对于大型库如Lodash如何实现按需加载？

1. 使用lodash-es：

   npm install lodash-es
   

   // 按需导入
   import { debounce } from 'lodash-es';const debouncedFn = debounce(() => {console.log('Debounced');
   }, 300);
   

2. 使用插件：

   npm install unplugin-lodash -D
   

   // vite.config.js
   import { defineConfig } from 'vite';
   import lodash from 'unplugin-lodash/vite';export default defineConfig({plugins: [lodash()],
   });
   

89. Vite中使用动态导入按需加载模块有什么注意事项？

1. 异步处理：动态导入返回Promise，需要使用await或.then()处理。
2. 模块初始化：确保模块可以在需要时正确初始化。
3. 路径问题：动态导入路径必须是静态可分析的，不能包含变量。
4. 副作用：动态导入的模块可能有副作用，需谨慎处理。
5. 性能：过多的动态导入可能导致过多HTTP请求，需权衡。

示例：

// 正确：静态路径
button.addEventListener('click', async () => {const module = await import('./modules/heavy.js');module.doSomething();
});// 错误：动态路径（无法静态分析）
button.addEventListener('click', async (id) => {const module = await import(`./modules/${id}.js`); // 不支持
});

90. Vite是否支持服务端渲染（SSR）？如果支持，如何实现？

Vite支持SSR，实现方式如下：

1. Vue SSR：
   • 安装@vitejs/plugin-vue-server-renderer。
   • 创建服务器入口和客户端入口。
   • 使用Node.js服务器渲染Vue组件。

示例：

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueServerRenderer from '@vitejs/plugin-vue-server-renderer';export default defineConfig({plugins: [vue(),vueServerRenderer(), // 启用SSR支持],
});

2. React SSR：

   • 使用@vitejs/plugin-react。
   • 创建服务器渲染逻辑。
   • 使用Node.js服务器渲染React组件。

3. 通用步骤：

   • 配置Vite构建为SSR模式。
   • 创建服务器渲染入口。
   • 处理客户端和服务器的 hydration。

二、120道面试题目录列表

文章序号	vite面试题120道
1	vite面试题及详细答案120道（01-30）
2	vite面试题及详细答案120道（31-60）
3	vite面试题及详细答案120道（61-90）
4	vite面试题及详细答案120道（91-120）