npm install vite @vitejs/plugin-react-refresh
在根目录下创建index.html文件，也就是项目启动依赖的html文件，
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite Apptitle>
head>
<body>
<div id="root">div>
<script type="module" src="/src/main.jsx">script>
body>
html>
将js模块ReactDom.render到root节点里即可；
注意1：vite之所以快的一个原因是因为它利用了浏览器支持大部分es module的特性，所以在上面的html文件里需要加上type="module"；注意2：vite本身支持js、css、less、scss、postcss、Typescript、图片等，无需loader配置
vite速度快的原因：
Vite 将会使用 esbuild 预构建依赖。esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍。比如lodash、react等库，只有在第一次启动的时候打包，然后放在node_modules下的.vite文件夹下，后面就不再打包。
上面其实是两点原因：1. esbuild构建依赖 ； 2. vite进行了预构建，提高了性能；
Vite 以 原生 ESM 方式提供源码，充分利用浏览器对es moudle支持的能力，vite对于es module 代码只负责转发，而不进行编译等处理；
并不是所有的源码都需要同时被加载（例如基于路由拆分的代码模块）。
Vite 同时利用 HTTP 头来加速整个页面的重新加载（再次让浏览器为我们做更多事情）：源码模块的请求会根据 304 Not Modified 进行协商缓存，而依赖模块请求则会通过 Cache-Control: max-age=31536000,immutable 进行强缓存，因此一旦被缓存它们将不需要再次请求。
在vite启动（npx vite）后，默认在根目录寻找vite.config.js文件，
基础配置如下：
https://cn.vitejs.dev/config/
import { defineConfig } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';
const target = '';
export default defineConfig({
plugins: [reactRefresh()],
server: {
// 配置127.0.0.1 local.test.com
host: 'local.test.com',
proxy: {
'^/signalPage': {
secure: true,
changeOrigin: true,
target: `${target}test/api`
}
},
open: true
}
});
vite常用：
defineConfig使用 defineConfig 工具函数，这样不用 jsdoc 注解也可以获取类型提示：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）