vite是个啥
vite是一个开发构建工具，开发过程中它利用浏览器native ES Module特性导入组织代码，生产中利用rollup作为打包工具，它有如下特点：
光速启动
热模块替换
按需编译
本文目标
说白了vite就是为开发者量身定做的一套先进的开发工具，按需编译、热模块替换等特性使我们开发时免除了重新打包的等待时间，开发体验丝滑，默认还整合了vue3，是居家旅行、杀人灭口之必备良药。目前vite已经是正式版，相关的生态正在迅速繁荣起来，我也第一时间在工程化方面做了一些探索，希望能够抛砖引玉，欢迎广大掘友拍砖。
安装vite
$ npm init vite-app $ cd $ npm install $ npm run dev复制代码
代码组织形式分析
关键变化是index.html中的入口文件导入方式
这样main.js中就可以使用ES6 Module方式组织代码
浏览器会自动加载这些导入，vite会启动一个本地服务器处理不同这些加载请求，对于相对地址的导入，要根据后缀名处理文件内容并返回，对于裸模块导入要修改它的路径为相对地址并再次请求处理。
再根据模块package.json中的入口文件选项获取要加载的文件。
对于开发者而言，整体没有大的变化。
资源加载方式解析
CSS文件导入
vite中可以直接导入.css文件，样式将影响导入的页面，最终会被打包到style.css。
在我们程序中，除了全局样式大部分样式都是以形式存在于SFC中
CSS Module
SFC中使用CSS Module
范例：修改组件样式为CSS Module形式JS中导入CSS Module：将css文件命名为*.module.css即可" _ue_custom_node_="true">