当前位置：首页 > news >正文

vite的基本使用

news 2025/7/3 19:54:38

vite

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

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

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

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是原生支持的他会直接使用ESBuild来编译
只需直接导入即可

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

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

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()]
})

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

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

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

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

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

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