《前后端面试题
》专栏集合了前后端各个知识模块的面试题,包括html,javascript,css,vue,react,java,Openlayers,leaflet,cesium,mapboxGL,threejs,nodejs,mangoDB,MySQL,Linux… 。
文章目录
- 一、本文面试题目录
- 1. 什么是Vite?它和其他前端构建工具的区别是什么?
- 2. Vite的主要特性有哪些?
- 3. Vite的劣势是什么?
- 4. Vite和Webpack的区别是什么?
- 5. Vite和Rollup的关系是怎样的?
- 6. Vite的开发服务器是如何工作的?
- 7. Vite的生产环境构建是如何工作的?
- 8. Vite如何利用浏览器原生ES模块?
- 9. Vite的依赖预构建是如何实现的?
- 10. Vite中如何配置别名(alias)?
- 11. Vite中如何配置环境变量?
- 12. Vite中.env文件的作用是什么?
- 13. Vite中如何使用不同的模式(mode)?
- 14. Vite中如何处理CSS?
- 15. Vite中如何使用CSS预处理器(Sass, Less, Stylus)?
- 16. Vite中如何使用CSS Modules?
- 17. Vite中如何使用PostCSS?
- 18. Vite中如何处理静态资源?
- 19. Vite中如何配置构建输出路径?
- 20. Vite中如何进行代码分割?
- 21. Vite中如何配置多入口?
- 22. Vite的构建优化有哪些方法?
- 23. Vite的插件机制是如何工作的?
- 24. Vite中如何编写一个插件?
- 25. Vite中常用的插件有哪些?
- 26. Vite中如何使用TypeScript?
- 27. Vite中如何处理Vue单文件组件?
- 28. Vite中如何处理React组件?
- 29. Vite中如何使用JSX/TSX?
- 30. Vite中如何进行单元测试?
- 二、120道面试题目录列表
一、本文面试题目录
1. 什么是Vite?它和其他前端构建工具的区别是什么?
Vite是一个由尤雨溪开发的前端构建工具,旨在提供更快的开发体验。与传统构建工具(如Webpack)不同,Vite基于原生ES模块(ES Modules),在开发环境中无需打包即可直接运行代码,大大提高了冷启动和热更新速度。
主要区别:
- 冷启动速度:Vite无需等待整个应用打包,启动时间接近瞬时;而Webpack需要先构建整个应用。
- 模块处理方式:Vite在开发时利用浏览器原生ES模块支持,按需加载;Webpack通过打包将所有模块合并为一个或多个bundle。
- 热更新(HMR):Vite的HMR速度更快,且通常能保持组件状态;Webpack的HMR可能需要重新编译部分代码。
2. Vite的主要特性有哪些?
- 极速冷启动:基于浏览器原生ES模块,无需打包直接启动。
- 即时热更新(HMR):模块热替换速度极快,且不丢失组件状态。
- 智能依赖预构建:使用esbuild预构建依赖,提高加载速度。
- 按需编译:仅在浏览器请求时编译模块,而非一次性处理所有代码。
- 内置对多种格式的支持:如TypeScript、JSX、CSS预处理器等。
- 优化的生产构建:使用Rollup生成优化后的静态资源。
- 插件系统:可扩展的插件接口,支持各种功能扩展。
3. Vite的劣势是什么?
- 生态系统成熟度:相比Webpack,Vite的插件生态可能不够完善,某些特定场景的解决方案可能较少。
- 复杂配置支持:对于非常复杂的项目结构或特殊需求,Vite的配置可能不如Webpack灵活。
- 生产环境构建:虽然Vite在开发环境表现出色,但生产环境仍依赖Rollup,对于某些极端复杂的打包需求,可能不如Webpack全面。
- 浏览器兼容性:由于依赖原生ES模块,Vite在旧版浏览器中的支持较差,需要额外配置。
4. Vite和Webpack的区别是什么?
特性 | Vite | Webpack |
---|---|---|
构建方式 | 开发时基于ES模块,按需加载 | 先打包所有模块再运行 |
冷启动时间 | 接近瞬时 | 随项目大小增长 |
热更新速度 | 极快,通常保持组件状态 | 较慢,可能需要重新编译 |
依赖处理 | 使用esbuild预构建依赖 | 使用loader和plugin处理依赖 |
生产环境打包 | 使用Rollup | 直接使用Webpack |
配置复杂度 | 相对简单 | 复杂,需要大量配置 |
生态系统 | 快速发展,但不如Webpack成熟 | 非常成熟,几乎支持所有场景 |
5. Vite和Rollup的关系是怎样的?
Vite在生产环境使用Rollup作为打包工具,而在开发环境则使用基于ES模块的轻量级服务器。具体关系:
- 开发环境:Vite不使用Rollup,而是直接利用浏览器原生ES模块支持,通过中间件处理模块导入和转换。
- 生产环境:Vite使用Rollup进行打包,默认配置已优化,但可通过
build.rollupOptions
自定义。 - 插件兼容性:大多数Rollup插件可直接在Vite中使用,通过
vite-plugin-rollup
适配器。
6. Vite的开发服务器是如何工作的?
Vite开发服务器的工作流程:
- 启动服务器:基于原生ES模块,无需打包。
- 依赖预构建:使用esbuild预构建第三方依赖,将CommonJS/UMD转换为ES模块。
- 模块请求处理:拦截浏览器的模块请求,动态转换代码(如TypeScript、JSX)。
- 模块解析:处理裸模块导入(如
import 'vue'
),转换为正确的路径。 - HMR支持:实现模块热更新,通过WebSocket与浏览器通信。
- 静态资源处理:直接提供静态资源,支持按需编译。
7. Vite的生产环境构建是如何工作的?
Vite在生产环境使用Rollup进行构建:
- 配置合并:合并Vite默认配置和用户自定义的
build.rollupOptions
。 - 代码转换:使用各种插件处理代码(如TypeScript、JSX转换)。
- 依赖处理:将依赖和应用代码分离,生成优化的chunk。
- 代码分割:基于动态导入或路由进行代码分割,提高加载性能。
- 资源处理:处理静态资源(图片、字体等),生成哈希文件名。
- 压缩和优化:压缩JavaScript、CSS代码,生成sourcemap。
- 输出文件:将优化后的资源输出到指定目录。
8. Vite如何利用浏览器原生ES模块?
Vite通过以下方式利用原生ES模块:
- 直接提供ES模块:开发服务器直接返回符合ES模块规范的JavaScript文件。
- 处理裸模块导入:将
import 'vue'
转换为import '/node_modules/vue/dist/vue.esm-bundler.js'
。 - 动态模块转换:在浏览器请求时,动态转换非JavaScript模块(如TypeScript、CSS)为ES模块。
- 按需加载:仅在浏览器请求时加载模块,无需预打包整个应用。
示例:
// 源代码
import { createApp } from 'vue';
import App from './App.vue';// Vite处理后,浏览器实际请求的代码
import { createApp } from '/node_modules/vue/dist/vue.esm-bundler.js';
import App from '/src/App.vue?vue&type=script&lang=js';
9. Vite的依赖预构建是如何实现的?
Vite使用esbuild预构建依赖的流程:
- 扫描导入:分析项目入口文件,提取所有依赖(裸模块导入)。
- esbuild转换:使用esbuild将CommonJS/UMD模块转换为ES模块。
- 缓存结果:将预构建的依赖缓存到
node_modules/.vite
目录。 - 优化加载:预构建后的依赖作为单个模块提供,减少浏览器请求。
配置示例(vite.config.js
):
export default {optimizeDeps: {include: ['lodash-es', 'axios'], // 指定需要预构建的依赖exclude: ['some-lib'], // 排除某些依赖不进行预构建},
};
10. Vite中如何配置别名(alias)?
在vite.config.js
中使用resolve.alias
配置别名:
import { defineConfig } from 'vite';export default defineConfig({resolve: {alias: {'@': '/src', // 将@映射到src目录'components': '/src/components', // 自定义别名},},
});
使用示例:
// 原路径
import MyComponent from '../../components/MyComponent.vue';// 使用别名后
import MyComponent from '@/components/MyComponent.vue';
No. | 大剑师精品GIS教程推荐 |
---|---|
0 | 地图渲染基础- 【WebGL 教程】 - 【Canvas 教程】 - 【SVG 教程】 |
1 | Openlayers 【入门教程】 - 【源代码+示例 300+】 |
2 | Leaflet 【入门教程】 - 【源代码+图文示例 150+】 |
3 | MapboxGL 【入门教程】 - 【源代码+图文示例150+】 |
4 | Cesium 【入门教程】 - 【源代码+综合教程 200+】 |
5 | threejs 【中文API】 - 【源代码+图文示例200+】 |
6 | Shader 编程 【图文示例 100+】 |
11. Vite中如何配置环境变量?
Vite通过.env
文件和import.meta.env
访问环境变量:
- 创建环境文件:在项目根目录创建
.env
(通用)、.env.development
(开发环境)、.env.production
(生产环境)。 - 定义变量:变量名必须以
VITE_
开头。VITE_API_URL=https://api.example.com VITE_APP_TITLE=My App
- 访问变量:在代码中使用
import.meta.env.VITE_API_URL
。
12. Vite中.env文件的作用是什么?
.env
文件用于存储环境变量,支持以下特性:
- 环境特定配置:通过
.env.development
、.env.production
等文件为不同环境定义变量。 - 变量前缀:只有以
VITE_
开头的变量会被暴露给客户端代码。 - 优先级:环境特定文件 > 通用文件,命令行变量 > 文件变量。
示例:
# .env.development
VITE_API_URL=http://localhost:3000/api# .env.production
VITE_API_URL=https://api.production.com
13. Vite中如何使用不同的模式(mode)?
Vite通过mode
参数区分不同环境:
- 内置模式:
development
(开发)和production
(生产)。 - 自定义模式:可以定义其他模式(如
test
、staging
)。 - 指定模式:通过命令行参数或配置文件指定。
命令行示例:
# 使用development模式(默认)
npm run dev# 使用production模式
npm run build# 使用自定义模式
vite build --mode staging
配置文件示例(vite.config.js
):
export default defineConfig(({ mode }) => {if (mode === 'staging') {return {base: '/staging/',// 其他配置};}return {// 默认配置};
});
14. Vite中如何处理CSS?
Vite内置对CSS的支持,包括:
- 直接导入:在JavaScript中导入CSS文件。
import './style.css';
- CSS Modules:通过
.module.css
文件名启用。import styles from './style.module.css'; document.body.classList.add(styles.container);
- PostCSS:自动应用项目中的PostCSS配置(如
postcss.config.js
)。 - CSS预处理器:支持Sass、Less、Stylus等,需安装相应依赖。
- CSS代码分割:根据入口点和动态导入自动分割CSS。
15. Vite中如何使用CSS预处理器(Sass, Less, Stylus)?
-
安装依赖:
# Sass npm install sass -D# Less npm install less -D# Stylus npm install stylus -D
-
直接使用:导入相应扩展名的文件(
.scss
、.less
、.styl
)。import './style.scss';
-
全局变量/混合:使用
css.preprocessorOptions
配置。export default defineConfig({css: {preprocessorOptions: {scss: {additionalData: `@import "@/styles/variables.scss";`}}} });
16. Vite中如何使用CSS Modules?
-
命名约定:使用
.module.css
、.module.scss
等扩展名。 -
导入和使用:
// style.module.css .container {padding: 20px; }// App.js import styles from './style.module.css';function App() {return <div className={styles.container}>Hello World</div>; }
-
自定义生成的类名:在
vite.config.js
中配置:export default defineConfig({css: {modules: {localsConvention: 'camelCaseOnly', // 类名转为驼峰generateScopedName: '[name]__[local]___[hash:base64:5]' // 自定义格式}} });
17. Vite中如何使用PostCSS?
-
安装PostCSS:
npm install postcss postcss-loader -D
-
创建PostCSS配置文件(
postcss.config.js
):module.exports = {plugins: {'postcss-preset-env': {}, // 自动添加浏览器前缀cssnano: {} // 压缩CSS} };
-
配置Vite(可选,通常会自动读取PostCSS配置):
export default defineConfig({css: {postcss: {plugins: [// 直接在这里配置插件]}} });
18. Vite中如何处理静态资源?
Vite内置对多种静态资源的支持:
-
直接导入:
import imgUrl from './assets/image.png'; document.getElementById('logo').src = imgUrl;
-
URL引用:在CSS或HTML中使用相对路径。
.logo {background-image: url('./assets/logo.png'); }
-
资源处理:
- 小于
build.assetsInlineLimit
(默认4kb)的资源会被内联为base64。 - 其他资源会被复制到输出目录并生成哈希文件名。
- 小于
-
特殊导入:
import svgUrl from './logo.svg?url'; // 强制作为URL import svgComponent from './logo.svg?component'; // 作为React/Vue组件导入
19. Vite中如何配置构建输出路径?
在vite.config.js
中使用build.outDir
配置:
export default defineConfig({build: {outDir: 'dist', // 默认输出目录assetsDir: 'assets', // 静态资源目录},
});
20. Vite中如何进行代码分割?
Vite支持多种代码分割方式:
-
动态导入(推荐):
// 按需加载模块 button.addEventListener('click', async () => {const { heavyModule } = await import('./heavyModule.js');heavyModule(); });
-
多入口应用:
export default defineConfig({build: {rollupOptions: {input: {main: '/index.html',about: '/about.html',},},}, });
-
共享模块分割:Rollup会自动分割共享模块,也可通过
manualChunks
配置:export default defineConfig({build: {rollupOptions: {output: {manualChunks: {vendor: ['lodash', 'axios'], // 将这些依赖单独打包},},},}, });
No. | 大剑师精品GIS教程推荐 |
---|---|
0 | 地图渲染基础- 【WebGL 教程】 - 【Canvas 教程】 - 【SVG 教程】 |
1 | Openlayers 【入门教程】 - 【源代码+示例 300+】 |
2 | Leaflet 【入门教程】 - 【源代码+图文示例 150+】 |
3 | MapboxGL 【入门教程】 - 【源代码+图文示例150+】 |
4 | Cesium 【入门教程】 - 【源代码+综合教程 200+】 |
5 | threejs 【中文API】 - 【源代码+图文示例200+】 |
6 | Shader 编程 【图文示例 100+】 |
21. Vite中如何配置多入口?
在vite.config.js
中配置Rollup的input
选项:
import { defineConfig } from 'vite';
import { fileURLToPath, URL } from 'url';export default defineConfig({build: {rollupOptions: {input: {main: fileURLToPath(new URL('./index.html', import.meta.url)),admin: fileURLToPath(new URL('./admin.html', import.meta.url)),},},},
});
对应的HTML文件结构:
├── index.html
├── admin.html
└── src/├── main.js└── admin.js
22. Vite的构建优化有哪些方法?
- 代码分割:使用动态导入或
manualChunks
配置。 - 压缩代码:生产环境默认启用Terser压缩。
- 移除console.log:通过Terser配置移除调试代码。
- CDN加载外部资源:使用
externals
排除依赖,通过CDN加载。 - 图片优化:使用
image
插件压缩图片。 - 预加载/预取:通过插件自动添加
<link rel="preload">
。 - 按需加载:动态导入非关键资源。
- 使用esbuild:通过
esbuild
选项进一步优化构建。
配置示例:
export default defineConfig({build: {minify: 'terser',terserOptions: {compress: {drop_console: true, // 移除consoledrop_debugger: true, // 移除debugger},},rollupOptions: {external: ['vue', 'react'], // 排除这些依赖output: {manualChunks: {vendor: ['lodash'], // 将lodash单独打包},},},},
});
23. Vite的插件机制是如何工作的?
Vite插件基于Rollup插件接口,同时扩展了一些特定钩子:
-
插件类型:
- 通用插件:同时影响开发和生产环境。
- 开发时插件:仅在开发环境生效。
- 构建时插件:仅在生产环境生效。
-
核心钩子:
config
:修改Vite配置。transform
:转换单个模块内容。configureServer
:配置开发服务器。handleHotUpdate
:自定义HMR逻辑。
-
执行顺序:插件按注册顺序执行,可通过
enforce
选项调整优先级。
24. Vite中如何编写一个插件?
一个简单的Vite插件结构:
// my-plugin.js
export default function myPlugin() {return {name: 'my-vite-plugin', // 插件名称enforce: 'pre', // 执行优先级:'pre' | 'post'// 修改Vite配置config(config, { command }) {if (command === 'serve') {return {// 开发环境配置};}},// 转换模块内容transform(code, id) {if (id.endsWith('.js')) {// 修改JavaScript代码return code.replace('console.log', '// console.log');}return code;},// 配置开发服务器configureServer(server) {server.middlewares.use((req, res, next) => {// 自定义中间件逻辑next();});},// 自定义HMR处理handleHotUpdate(ctx) {console.log('HMR update:', ctx.file);return [];},};
}
在vite.config.js
中使用:
import myPlugin from './my-plugin';export default defineConfig({plugins: [myPlugin()],
});
25. Vite中常用的插件有哪些?
-
官方插件:
@vitejs/plugin-vue
:Vue 3支持。@vitejs/plugin-react
:React支持。@vitejs/plugin-legacy
:旧版浏览器支持。
-
社区插件:
vite-plugin-pwa
:渐进式Web应用支持。vite-plugin-svg-icons
:SVG图标处理。vite-plugin-compression
:生产环境资源压缩。vite-plugin-eslint
:集成ESLint。unplugin-auto-import
:自动导入API。unplugin-vue-components
:自动导入组件。@rollup/plugin-alias
:别名支持。@rollup/plugin-json
:JSON处理。
26. Vite中如何使用TypeScript?
Vite内置对TypeScript的支持,无需额外配置:
-
安装依赖:
npm install typescript @types/node -D
-
创建tsconfig.json:
npx tsc --init
-
编写TypeScript代码:
// src/main.ts import { createApp } from 'vue'; import App from './App.vue';createApp(App).mount('#app');
-
配置选项(可选):
// vite.config.ts import { defineConfig } from 'vite';export default defineConfig({esbuild: {// 配置esbuild转换选项jsxFactory: 'h',jsxFragment: 'Fragment',}, });
27. Vite中如何处理Vue单文件组件?
-
安装Vue插件:
npm install @vitejs/plugin-vue -D
-
配置Vite:
// vite.config.js import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue';export default defineConfig({plugins: [vue()], });
-
编写Vue组件:
<!-- src/App.vue --> <template><div class="hello"><h1>{{ msg }}</h1></div> </template><script lang="ts"> import { defineComponent } from 'vue';export default defineComponent({setup() {return {msg: 'Hello Vue 3 + TypeScript + Vite',};}, }); </script>
28. Vite中如何处理React组件?
-
安装React插件:
npm install @vitejs/plugin-react -D
-
配置Vite:
// vite.config.js import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react';export default defineConfig({plugins: [react()], });
-
编写React组件:
// src/App.jsx import React from 'react';function App() {return (<div className="App"><h1>Hello React + Vite</h1></div>); }export default App;
29. Vite中如何使用JSX/TSX?
Vite内置对JSX/TSX的支持,无需额外配置:
- React JSX:使用
@vitejs/plugin-react
插件。 - Vue JSX:安装
@vue/babel-plugin-jsx
或使用@vitejs/plugin-vue-jsx
。
示例(Vue JSX):
// 安装依赖
npm install @vitejs/plugin-vue-jsx -D// vite.config.js
import { defineConfig } from 'vite';
import vueJsx from '@vitejs/plugin-vue-jsx';export default defineConfig({plugins: [vueJsx()],
});// 组件中使用
import { defineComponent } from 'vue';export default defineComponent({setup() {return () => <h1>Hello Vue JSX</h1>;},
});
30. Vite中如何进行单元测试?
Vite项目常用的单元测试方案:
-
Jest:
- 安装:
npm install jest @types/jest ts-jest -D
- 配置:创建
jest.config.js
module.exports = {preset: 'ts-jest',testEnvironment: 'jsdom', };
- 测试命令:
npx jest
- 安装:
-
Vitest(Vite官方推荐):
- 安装:
npm install vitest -D
- 配置(
vite.config.js
):
import { defineConfig } from 'vite';export default defineConfig({test: {environment: 'jsdom',}, });
- 编写测试:
// sum.test.js import { describe, it, expect } from 'vitest';describe('sum test', () => {it('adds 1 + 2 to equal 3', () => {expect(1 + 2).toBe(3);}); });
- 测试命令:
npx vitest
- 安装:
二、120道面试题目录列表
文章序号 | vite面试题120道 |
---|---|
1 | vite面试题及详细答案120道(01-30) |
2 | vite面试题及详细答案120道(31-60) |
3 | vite面试题及详细答案120道(61-90) |
4 | vite面试题及详细答案120道(91-120) |