我们写的代码，比如ES6、TypeScript、react等，浏览器无法直接识别，需要通过webpack、卷起。但是随着项目越来越大，需要处理的资源越来越多，构建工具启动服务的时间会比较长。因此，创建了一个新的前端构建工具Vite，可以提高编译速度，减少构建配置。浏览器支持esmodulevite基于esmodule处理资源。浏览器本身已经支持esmodule。将js资源导入html文件时，只需添加一个type类型即可。一些第三方库也有模块化版本，比如lodash，浏览器可以直接支持lodash-es，在src/index。js是从node_modules导入的。从'../node_modules/lodash-es/lodash.js'导入_；console.log(_.join(','));这时候打开html页面，我们会发现lodash.js资源加载完成后，还发送了很多其他的js请求，直接使用了浏览器支持的模块化。一方面，请求的资源很多。另一方面，如果不支持esmodule的库在浏览器中运行，会直接报错。如何处理资源当有浏览器无法识别的资源时，vite首先通过connect处理esmodule的内容，例如index.ts被处理成index.js，当请求index.ts文件时，它被重定向到处理后的支持esmodule的index.js文件。ES6、TS、React等资源通过ESBuild进行处理，类似babel工具，但编译速度更快，因为它是Go语言编写的，可以直接转为机器码，不需要字节码。Vite无需配置即可处理资源。与webpack一样，vite需要全局或项目安装依赖。css无论是css、less还是postcss为了兼容，webpack都需要使用合适的loader来处理资源，而vite自带处理，配置更简单。webpackvitecsscss-loader-lessless-loader、lesslesspostcsspostcss-loader、pocss-preset-envpostcss-preset-envpostcss等插件需要在postcss.config.js中定义兼容性配置module.exports={plugins:[require('postcss-preset-env')],};typescriptts代码不需要loader或者plugin来处理，只需要安装typescript创建ts文件，将资源导入到入口js文件中constmul=(a:number,b:number)=>{returna*b;};console.日志（多（6、8））；通过vite启动服务，200ms后启动，内置热更新媒体资源和图片资源需要通过url-loader、file-loader或者配置assetmodule类型来处理，在vite中不需要做任何配置，直接导入即可。从'./image/cat.jpg'导入猫；constimg=document.createElement('img');img.src=cat;img.width=300;document.body.appendChild(img);浏览器页面中的jsxreact代码也可以被vite识别，但是后缀需要是jsx，入口文件index.js改为index.jsx，修改html页面的引入。vite.config.js虽然vite内置了针对以上场景的处理功能，但是配置文件也不是完全不能用。默认的配置文件名为vite.config.js，比如vue的处理。import{createVuePlugin}from'vite-plugin-vue2';exportdefault{plugins:[createVuePlugin()],};压缩新依赖时，会有提示打包命令npxvite开启本地服务，内置热更新npxvitebuildgeneration编译文件npxvitepreview预览编译文件创建一个vite项目上面，使用vite作为一个处理资源的工具，也可以直接通过vite搭建react或者vue的脚手架。创建完成后执行npminitvite选择需要的项目，通过npminstall安装需要的依赖，然后查看package.json中的说明，就可以启动了~总结vite基于esmodule处理数据，使用工具ESBuild，而且编译速度更快非常快的css、less、typescript、react可以直接使用vite中默认的配置文件vite.config.js，也可以添加其他配置，比如pluginvite提供命令npxvitepreview来编译预览以上就是vite编译资源的介绍，更多前端和工程化的内容可以参考我的其他博文，持续更新中~
