这是我参与「第五届青训营」伴学笔记创作活动的第 十二 天

Vite 概要介绍

Vite 诞生的背景

随着前端技术的快速发展，许多问题都得到了较好的解决，但是新的问题也呼之欲出。前端开发中对于模块化开发始终没有一个统一的规范，即使现在已经诞生了诸如 ESM、CommonJS、UMD 等行业规范，但是它们也没有形成一个统一。在开发中由于需要对高级语法进行编译，我们会用到许多工具，但是浏览器对于这些工具的支持度却远赶不上工具开发的速度。在项目的开发中，我们需要对其代码的体积与效率进行不断的优化，并且要考虑到其用户体验与兼容性。此外如何提升项目的开发效率也是我们必须去考虑的问题。

Vite

Vite 是新一代前端构建工具，它有两大组成部分：No-bundle开发服务，源文件无需打包；生产环境基于Rollup 的Bundler。Vite 旨在利用生态系统中的新进展解决上述问题：浏览器开始原生支持 ES 模块，且越来越多 JavaScript 工具使用编译型语言编写,帮助开发者进行产物压缩、无用代码删除、语法降级，使用热更新来提高开发效率。

Vite 实战

搭建 Vite 项目

Vite 需要较高版本的 Node 环境支持，建议在 16+ 以上，你可以使用以下命令来搭建 Vite 项目：

//使用 npm
npm create vite@latest
//安装依赖
npm install
//启动项目
npm run dev

参考官方文档，我们还可以用以下命令来直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行:

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

Vite 进阶

Vite 插件开发

在 Vite 当中，为了能够抽离核心逻辑，把构建方面的能力封装为一个个的插件，这样能够更好的解耦，更加易于维护和扩展。在插件的开发中，我们可以通过各个构建阶段的钩子函数，来插入自定义的逻辑。

代码分割(拆包)

在对项目代码进行拆包前，由于其只有一个产物文件，无法进行并发请求，也就无法利用到浏览器的优势，缓存复用率低。拆包后，其能更加利用到并发请求的优势提高代码效率。

JS 编译工具(Babel)

由于现在 JavaScript 语法标准繁多,浏览器支持程度不一，并且开发者需要用到高级语法，因此出现了 Babel 来解决这一问题。

语法安全降级

以 Promises 语法为例，IE11 是没有内置 api 的，如果没有降级的话，就很有可能出现如下的报错问题，导致页面白屏：

Vite 中提供了一个比较上层的解决方案，也就是官方的@vitejs/plugin-legacy 插件，借助这一插件能够完成语法的自动降级。

服务端渲染

服务端渲染是一种常见的渲染模式，通过服务端直接进行渲染，返回完成的 html 文件，来提升用户的访问速度以及 SEO 优化。Vite 在构建阶段会将构建产物分为运行在浏览器的客户端产物和运行在服务端的 SSR 产物。