创新实训——前端：VITE

Vite介绍

Vite是一种新型的前端构建工具，它能显著改善前端开发体验。其主要由两部分组成：

1. 一个开发服务器，它基于 原生 ES 模块(ESM)，提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。ESM：ESM是浏览器支持的一种模块化方案，允许在浏览器实现模块化。ES6之前，JS一直没有自己的模块体系。但是ES6引入了ESM，到此，JS终于有了自己的模块体系。HMR：全称 Hot Module Replacement，模块热更新，它能够在保持页面状态的情况下动态替换资源模块，提供丝滑顺畅的 Web 页面开发体验。
2. 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源(打包后的体积更小)。Rollup：基于ES6的模块打包工具，打包文件小且干净，执行效率更高，更专注于JS打包，同时支持 Tree-shaking。Tree-shaking：前端中的 tree-shaking 可以理解为通过工具"摇"我们的 JS 文件，将其中用不到的代码"摇"掉，是一个性能优化的范畴。具体来说，在 webpack 项目中，有一个入口文件，相当于一棵树的主干，入口文件有很多依赖的模块，相当于树枝。实际情况中，虽然依赖了某个模块，但其实只使用其中的某些功能。通过 tree-shaking，将没有使用的模块 code 摇掉，这样来达到删除无用代码的目的。

Vite作为一个基于浏览器原生ESM的构建工具，它省略了开发环境的打包过程，利用浏览器去解析imports，在服务端按需编译返回。同时，在开发环境拥有速度快到惊人的模块热更新，且热更新的速度不会随着模块增多而变慢。因此，使用Vite进行开发，至少会比Webpack快10倍左右。

Vite的主要特性：

1. Instant Server Start —— 即时服务启动
2. Lightning Fast HMR —— 闪电般快速的热更新
3. Rich Features —— 丰富的功能
4. Optimized Build —— 经过优化的构建

Vite安装

要安装 Vite，您需要确保您的系统上已经安装了 Node.js。Vite 需要 Node.js 版本 12.0.0 或更高版本。您可以通过在终端中运行以下命令来检查您的 Node.js 版本：

node -v

如果您的 Node.js 版本符合要求，您可以使用 npm 或 yarn 来安装 Vite。以下是使用 npm 安装 Vite 的步骤：

打开您的终端或命令提示符。

使用 npm 安装 Vite 作为全局开发依赖：

npm install -g create-vite

或者，如果您使用的是 yarn，可以使用以下命令：

yarn global add create-vite

安装完成后，可以使用 create-vite 命令来创建一个新的 Vite 项目。例如：

npm init vite@latest

这将启动一个交互式命令行界面，引导您创建新的 Vite 项目。您需要提供项目名称和选择您想要使用的模板（例如，Vue, React, Preact 等）。

创建项目后，可以在项目目录中运行以下命令来启动开发服务器：

npm install

npm run dev

这将启动 Vite 开发服务器，并且通常会在默认的网络浏览器中打开一个新标签页，显示您的项目。

如上，配置成功。