2024年上手体验Vue3 Vite的魅力（“快”的艺术），有了它(1)，蚂蚁金服内推有几面

最后

除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。

• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

Vite 将会使用 esbuild 预构建依赖。Esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍。

• 源码 通常包含一些并非直接是 JavaScript 的文件，需要转换（例如 JSX，CSS 或者 Vue/Svelte 组件），时常会被编辑。同时，并不是所有的源码都需要同时被加载。（例如基于路由拆分的代码模块）。

Vite 以 原生 ESM 方式服务源码。这实际上是让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入的代码，即只在当前屏幕上实际使用时才会被处理。

两种构建方式的对比图

问题二：缓慢的更新

当基于打包器启动时，编辑文件后将重新构建文件本身。显然我们不应该重新构建整个包，因为这样更新速度会随着应用体积增长而直线下降。

一些打包器的开发服务器将构建内容存入内存，这样它们只需要在文件更改时使模块图的一部分失活[1]，但它也仍需要整个重新构建并重载页面。这样代价很高，并且重新加载页面会消除应用的当前状态，所以打包器支持了动态模块热重载（HMR）：允许一个模块 “热替换” 它自己，而对页面其余部分没有影响。这大大改进了开发体验 - 然而，在实践中我们发现，即使是 HMR 更新速度也会随着应用规模的增长而显著下降。

在 Vite 中，HMR 是在原生 ESM 上执行的。当编辑一个文件时，Vite 只需要精确地使已编辑的模块与其最近的 HMR 边界之间的链失效（大多数时候只需要模块本身），使 HMR 更新始终快速，无论应用的大小。

Vite 同时利用 HTTP 头来加速整个页面的重新加载（再次让浏览器为我们做更多事情）：源码模块的请求会根据 304 Not Modified 进行协商缓存，而依赖模块请求则会通过 Cache-Control: max-age=31536000,immutable 进行强缓存，因此一旦被缓存它们将不需要再次请求。

注意：尽管原生 ESM 现在得到了广泛支持，但由于嵌套导入会导致额外的网络往返，在生产环境中发布未打包的 ESM 仍然效率低下（即使使用 HTTP/2）。为了在生产环境中获得最佳的加载性能，最好还是将代码进行 tree-shaking、懒加载和 chunk 分割（以获得更好的缓存）。

Vite的使用

---

1、安装create-vite-app脚手架

npm install create-vite-app

2、搭建项目

npm init vite-app vite-project

3、 启动项目

cd vite-project

npm install (or yarn)

npm run dev (or yarn dev)

查看项目的目录结构

目录结构跟平时的vue项目差不多，但是仔细观察，index.html文件放到了根目录下。当vite服务启动之后，服务器访问的目录就是该根目录。比如访问http://localhost:3000/package-lock.json

该文件就是我们根目录的package-lock.json

打开package.json，dependencies是vue3.0版本

项目也使用了vue3的新特性，如main.js中引入的是createApp而不是vue

组件里面的template标签下不止一个根标签，这也是vue3的其中一个特性

Vite的工作机制

Vite整体的工作机制，用简单的图表示：

根据图片来看，Vite实际上也是一个server，在启动vite构建web server后，即服务启动之后（如访问），我们访问这个地址，该页面会向web server发送请求，请求对应的文件，我们可以从network中看到，如下：

注意观察network里面的响应，我们会发现里面有两个App.vue，两个HelloWorld.vue，实际上这就是因为在我们请求这些文件的时候，被vite server拦截了，经过编译后才返回对应的内容。

打开network里面的HelloWorld.vue

对比我们项目里面的HelloWorld.vue，两个的内容是截然不同的

观察network中HelloWorld.vue里面的内容

import { render as __render } from “/src/components/HelloWorld.vue?type=template”

表示引入了HelloWorld.vue?type=template，正好network里面有HelloWorld.vue?type=template请求，打开查看response，这实际就是HelloWorld.vue中template编译之后的内容

这个工作机制也正是vite的速度快的原因，vite server拦截请求，只对请求的文件及其依赖的模块进行编译，那些没有被引用到的文件就不会被编译，做到了按需编译。

证明一下，查看当前的main.js，其引入了index.css

import { createApp } from ‘vue’

import App from ‘./App.vue’

import ‘./index.css’

createApp(App).mount(‘#app’)

此时network中是会去请求index.css

修改main.js，去掉对index.css的引入

import { createApp } from ‘vue’

import App from ‘./App.vue’

//import ‘./index.css’

createApp(App).mount(‘#app’)

此时查看network中发现，index.css不去请求了

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总