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

Vite是什么?Why Vite?

vite概览

定位:新一代前端构建工具两大组成部分:

1.No-bundle开发服务,源文件无需打包

2.生产环境基于Rollup 的Bundler

核心特征

1.高性能, dev启动速度和热更新速度非常快!

2.简单易用，开发者体验好

Vite 具有以下特点：

安装： npm install vite -g

通过vite来启动项目： npx vite

使用Vite后，在浏览器中加载文件的数目大幅减少。

项目启动后，可以通过import_from加载第三方模块，比如： import _ from "lodash-es"

CSS：直接在主文件中导入 CSS 即可，不需要任何其他的配置信息
less：使用命令 npm install less -D 直接导入 less 文件，并且安装 less。如果不安装 less 的话，则会报错
postcss：使用命令 npm install postcss -D 安装 postcss，再使用命令 npm install postcss-preset-env -D 安装相关的插件，并且在 postcss.config.js 中配置相应的插件即可
Typescript：Vite 完全可以支持 Typescript,不需要任何配置，只需要直接引入 Typescript 即可
Vue：使用命令 npm install @vitejs/plugin-vue -D 安装相关的 Vue，然后再新增一个 vite.config.js ，再在其中配置信息

关键技术：依赖预打包

为什么要进行预打包？

避免node_modules过多的文件请求

将CommonJS格式转换为ESM格式

实现原理

服务启动前扫描代码中用到的依赖

用Esbuild对依赖代码进行预打包

改写import语句，指定依赖为预构建产物路径

关键技术：单文件编译

用Esbuild编译TS/JSX

优势：编译速度提升 10-100x

局限性：不支持类型检查，不支持语法降级到ES5

Vite 打包执行的代码是：npx vite build

当我们执行该命令时，会在 node_modules 中创建一个 .vite 文件夹，在其中存放一些打包的文件，当下次打包时，就可以直接使用 .vite 文件夹中的文件。

打包后的文件可以不开启 live serve，此时我们可以执行命令： npx vite preview 来进行开启服务进行预览。

在开发中我们不可能一个项目所有的内容都使用vite从头开始搭建。此时我们应该考虑使用Vite脚手架工具@vitejs/create-app，它类似于 vue-cli, create-react-app。

App.vue 用来编写待渲染的模板结构
index.html 中需要预留一个el 区域
main.js 把 App.vue 渲染到了 index.html 所预留的区域中（按照vue 3.x 的标准用法，把App.vue 中的模板内容渲染到 index.html 页面的el 区域中）