vite的基本使用

vite

浏览器原生支持模块化

浏览器原生加载的缺点
1.必须明确的写上后缀名
2.如果某一个模块 加载跟多其他的js文件 那么这些js文件都需要被依次加载 浏览器需要将所有的js文件请求下来 发送跟多的http请求（效率也是非常低的）
3.如果代码中由typescript/jsx/vue代码 那么浏览器是不识别的

vite就帮助我们解决了上面的问题

vite工具的使用

安装vite工具
npm install vite
通过vite来启动项目
npx vite

vite对css的支持

vite可以直接支持css的处理
直接导入css即可

vite可以直接支持css预处理器 比如less
直接导入less
之后安装less编译器
npm install less

vite直接支持postcss的转换
只需要安装postcss 并配置postcss.config.js的配置文件即可
npm install postcss postcss-preset-env

module.exports = {
	plugins: [require("postcss-preset-env")],
};

vite对typescript的支持

vite对typescript是原生支持的 他会直接使用ESBuild来编译
只需直接导入即可

如果我们产看浏览器中的请求 会发现请求的依然是ts的文件
这时因为vite中服务器Connect会对我们的请求进行转发
获取ts编译后的代码 给浏览器返回 浏览器可以直接进行解析

vite1中使用koa开启服务器
从vite2开始使用connect服务器

vite对vue的支持

vue3单文件组件支持 @vitejs/plugin-vue
vue3jsx支持 @vitejs/plugin-vue-jsx
vue2支持 underfin/vite-plugin-vue2

npm install @vitejs/plugin-vue
创建vite.config.js
使用defienConfig函数的原因是 可以更好的代码提示 不使用defienConfig直接导出也没有关系

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
	plugins: [
		vue()
	]
})

vite对react的支持

.jsx和.tsx文件同样开箱即用 他们也是通过ESBuild来完成编译的
所以我们只需要直接编写react代码即可
在index.html加载main.js时 需要将main.js的后缀修改为main.jsx作为后缀

vite打包项目

我们可以直接通过npx vite build打包项目
npx vite preview 开启一个本地服务来预览打包后的效果

vite脚手架工具

vite：相当于一个构建工具 类似于webpack rollup
@vitejs/create-app: 类似于vue-cli create-react-app

使用方法
npm create vite
yarn create vite
pnpm create vite

ESBuild解析

ESBuild的特点
超快的构建速度 并且不需要缓存
支持ES6和CommonJS的模块化
支持ES6的Tree Shaking
支持Go、Javascript的API
支持TypeScript、JSX等语法编译
支持SourceMap
支持代码压缩
支持扩展其他插件

ESBuild为什么这么快
1.使用go语言编写 可以直接转换成机器代码 无需经过字节码
2.ESBuild可以充分利用CPU的多核 尽可能让他们饱和运行
3.ESBuild的所有内容都是从零开始编写的 不是使用第三方 所以一开始就考虑了各种性能问题