Vite是什么？
引用官方的一句话：
Vite是一种新型前端构建工具，能够显著提升前端开发体验。
Vite组成
- 一个开发服务器：基于原生
ES 模块提供了丰富的内建功能 - 一套构建指令：使用底层的
Rollup打包代码。
为什么要使用Vite
当我们去构建越来越大项目时，需要加载很多模块，等待服务器启动可能需要几分钟甚至更长时间， 使用Vite配置项目，极大的提升了加载效率，提供更好的体验。
搭建Vite项目
初始化项目
$ npm init
NPM
npm install vite -g
Vite配置文件
import { defineConfig } from "vite";
import { resolve } from "path";
export default defineConfig({ resolve: { alias: { "@": resolve(__dirname, "src"), }, } });
proxy代理
proxy: {
"/api": {
target: "url",
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '')
},
},
运行
npm run dev
Vite打包
npx vite build
当我们执行npx vite build进行打包的时候，此时会在node_modules中创建一个.vite文件夹，在其中存放一些打包的文件，当下次打包时，就可以直接使用.vite文件夹中的文件。
Vite和Webpack
两种打包工具区别是什么：
- webpack服务器启动速度比vite慢。
- Vite热更新比webpack快。
- Vite生态不及webpack，加载器、插件不够丰富。
- Vite打包到生产环境时，Vite使用传统的rollup进行打包，生产环境esbuild构建对于css和代码分割不够友好。所以，vite的优势是体现在开发阶段。
- Vite项目的开发浏览器要支持esmodule，而且不能识别commonjs语法。
