认识vite

什么是vite？

官方的定位：下一代前端开发与构建工具

如何定义下一代前端开发和构建工具呢？

我们知道在实际开发过程中，我们编写的代码往往是不能被浏览器直接识别的，比如ES6、TypeScript、Vue文件等等
所以我们必须通过构建工具来对代码进行转换、编译，类似的工具有webpack、rollup、parcel
但是随着项目越来越大，需要处理的JavaScript呈指数级增长，模块越来越多
构建工具需要很长时间才能开启服务器，HMR也需要几秒钟才能在浏览器反映出来

vite是一种新型前端构建工具，能够显著提升前端开发体验。

Vite的构造

它主要由两部分组成：

一个开发服务器，它基于原生ES模块提供了丰富的内建功能，HMR的速度非常快速
一套构建指令，它基于rollup，使用rollup打开我们的代码，并且它是预配置的，可以输出生成环境的优化过的静态资源

目前vite现状

vite已经更新到2.0版本，开发服务器也从1.0的koa更新到了2.0的connect，但是依然不算稳定，大型项目使用vite的比较少
vite的社区插件支持度不够完善
Vite的作用

浏览器原生默认支持 ES Module，但是项目开发中，如果有 ts、vue 等浏览器无法识别的文件类型，就无法加载了；如果一个支持 ES Module 的文件内部引入了其他的插件，那么浏览器也会一起加载。

上面两种情况，一种无法加载，一种加载太多影响性能，都会对项目造成负面影响，而 vite 就是用来处理这些情况的，它能把 ts、vue 等类型的文件转换成符合 ES Module 的文件，放在自己的connect服务器中，做一个重定向，这样就可以解决无法访问 ts、vue 等格式文件的问题，同时还可以对加载其他插件的文件做懒加载等，提高性能。

Vite的安装和基本使用

安装vite

npm isntall vite -D

使用

npx vite

对css、less、process的处理

在vite中，我们不需要配置任意一行代码，只要引入插件，vite就可以帮我们自动处理

引入 css、less 文件 ```javascript // main.js 文件 import { sum } from “./util/math.js”; import _ from “lodash-es”; import “./css/base.css”; import “./css/style.less”;

console.log(“Hello Vite”); console.log(sum(20, 30)); console.log(_.join([“abc”, “cba”]));


2. 安装插件
`npm isntall less -D`
3. process的处理
process用于添加css某些特定属性的前缀，在项目中创建process.config.js文件，做如下配置即可
```javascript
module.exports = {
  plugins: [require("postcss-preset-env")],
};

Vite对ts的支持和原理

vite中支持直接使用ts，不需要像webpack等构建工具需要安装额外依赖，vite无需安装任何依赖。

具体的原理为：

这一原理对 less 也适用，vite 通过 connect 实现一个本地服务，将 ts、less 等格式的文件转换为普通 js，浏览器实际加载的不是原本的 ts、less 文件，而是转换后的 js 文件。
Vite对vue的支持和pre-bundling

vite想要处理vue文件就不能像之前一样直接使用了，需要借助插件：

Vue3 单文件组件支持：@vitejs/plugin-vue
Vue3 JSX 支持：@vitejs/plugin-vue-jsx
Vue2 支持：underfin/vite-plugin-vue2

使用插件需要创建 vite.config.js 文件

// vite.config.js
import { createVuePlugin } from "vite-plugin-vue2";

export default {
  plugins: [createVuePlugin(/* options */)],
};

vite会对要打包的文件做预打包，也就是说，如果你的代码中用到了别的代码，比如我们自己写的main.js中引入了vue，那么vite就会对vue的源码进行打包，并且放在项目的node_modules文件夹下，这样，当我们再次打包项目的时候就会使用之前已经打包好的文件，提高构建速度。

Vite对react的支持

因为React用的jsx语法，和js没有太大差别，所以无需额外安装插件就可以使用。

// 对 react 的处理
import React from "react";
import ReactDom from "react-dom";
import ReactApp from "./react/App";

// ReactDOM的render
ReactDom.render(<ReactApp />, document.getElementById("root"));

如上所示，直接使用就可以了，不过需要注意的是，因为这里ReactDOM.render()是jsx语法，所以我们的这个main.js文件要改为main.jsx文件

ESBuild解析

ESBuild的特定：

超快的构建速度，并且不需要缓存
支持ES6好的Tree Shaking
支持Go、JavaScript的API
支持TypeScript、JSX等语法编译
支持SourceMap
支持代码压缩
支持扩展其他插件

ESBuild为什么这么快呢？

使用Go语言编写的，可以直接转换成机器码，而无需经过字节码
ESBuild可以充分利用CPU的多内核，尽可能让它们饱和运行
ESBuild的所有内容都是从零开始编写的，而不是使用第三方，所以从一开始就考虑各种性能问题

vite