vite预编译
❶ 什么是vite
目前 vue3.0 的版本已经发布了 此次除了可以通过 vue-cli 和 webpack 搭建脚手架外 官方并核还提供了一种新的脚手架搭建工具 vite
Vite 是 Vue 作者开发的一款意图取代 webpack 的工具
其实现原理是利用 ES6 的 import 会发送请求去加载文件的特性，拦截这些请闷蔽蠢求，做一些预编译，省去 webpack 冗长的打包时间
安装蚂陪：
使用 vite 创建 Vue3 项目：
根据提示运行项目：
❷ vite和webpack的区别
品牌型号：华为MateBook D15系统：Windows 11
vite服务器启动速度比webpack快，由于vite启动的时候不需要打包，也就无需分析模块依赖、悉孙编译，所以启动速度非常快。当浏览器请求需要的模块时，再对模块进行编译，这种按需动态编译的模式，极大缩短了编译时间，当项目越大，文件越多时，vite的开发时优势越明显。vite热更新比webpack快，vite在HRM方面，当某个模块内容改睁搭链变时，让浏览器去重新请求该模块即可，而不是像webpack重新将该模块的所有依赖重新编译。
Vite的使用简单，只需执行初始化命令，就可以得到一个预设好的开发环境，枝弯开箱即获得一堆功能，包括：CSS预处理、html预处理、异步加载、分包、压缩、HMR等。使用复杂度介于Parcel和Webpack的中间，只是暴露了极少数的配置项和plugin接口，既不会像Parcel一样配置不灵活，又不会像Webpack一样需要了解庞大的loader、plugin生态，灵活适中、复杂度适中。
❸ vite和webpack的区别
vite服务器的启动速度比webpack快。因为vite启动时不需要打包，不需要分析模块依赖关系，不需要编译，所以启动速度非虚扒纤常快。当浏览器请求所需的模块时，它会编译该模块。这种按需动态编译模式大大缩短了编译时间。项目越大，文件越多，vite的开差仿发优势就越明显。Vite热更新比webpack快。在HRM中的vite，当一个模块的内容发生变化时，只需让浏览器重新请求该模块，而不需要像webpack一样重新编译该模块的所有依赖关系。
Vite很好用。只需要执行初始化命令此唯，就可以得到一个预置的开发环境。可以得到一堆开箱即用的功能，包括:CSS预处理、html预处理、异步加载、分包、压缩、HMR等。使用复杂度介于Parcel和Webpack之间，但只暴露了少数配置项和插件接口。不会像Parcel那样在配置上不够灵活，也不会像Webpack那样需要知道loader和plugin的庞大生态，灵活性和复杂度适中。
❹ vite 是怎么工作的
👇 下面是我根据自己对 vite 工作方式的理解的极简总闷尘结，欢迎指正
vite 在开发环境下不需要打包，所以碰坦它很快；当我们启动我们的项目的时候，vite 会直接启动一个开发服务器，加载文件入口文件。
它利用了浏览器对原生的 es mole 的支持，拦截浏览器的 http 请求，对返回的结果进行蚂吵禅编译，然后返回给浏览器渲染
❺ 搭建vue3+typescript+vite+yarn项目
vite是vue3推荐的打包工具，相较于webpack，Vite 是基于 native ES mole —— 现代浏览器基本已经全部支持了import/export 语法。 在Vite中,启动本地服务器,是不需要提交编译文件的, 而是在浏览器请求对应URL时, 再提供文件,实现了真正的路由懒加载, 这个比起Webpack节省了不少时间。打包和响应速度提升10倍以上
若您的版本低于4.0
请使用 vue upgrade 命令更新cli
我们选中vue，按回车确定
然后选择vue-ts，回车确认
启动后在浏览器铅答输入： http://localhost:3000/
页面就像这样槐逗慧：
到这里，一个基础的vue+ts+vite的项目就搭指颤建好了
下一节我们讨论关于vite的配置
❻ webpack作者评价vite
评价：Vite 是 vue 的作者尤雨溪在开发 vue3.0 的时候开发的一个 基于原生ES-Mole的前端构建工具。其本人在后来对 vue3 的宣传中对自己的新作品 Vite 赞不绝口，并表示自己 ”再也回不去 webpack 了“ 。
webpack缺点是缓慢的服务器启动
当冷启动开发服务器时，基于打包器的方式是在提供服务前去急切地抓取和构建你的整个应用。
vite改进
Vite 通过在一开始将应用中的模块区分为依赖和源码两类，改进了开发服务器启动时间。
依赖大多为纯JavaScript并在开发时不会变动。一些较大的依赖（例如有上百个模块的组件库）处理的代价也很高。依赖也通常会以某些方式（例如 ESM 或者 CommonJS）被拆分到大量小模块中。
Vite 将会使用 esbuild 预构建依赖。Esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快10-100倍。
源码通常包含一些并非直接是 JavaScript 的文件，需要转换（例如 JSX，CSS 或者 Vue/Svelte 组件），时常会被编辑。同时，并不是所有的源码都需要同时被加载。（例如基于路由拆分的代码模块）。
Vite以原生ESM方式服务源码。这实际上是让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入的代码，即只在当前屏幕上实际使用时才会被处理。
webpack: 分析依赖=> 编译打包=> 交给本地服务器进行渲染。首先分析各个模块之间的依赖，然后进行打包，在启动webpack-dev-server，请求服务器时，直接显示打包结果。
webpack打包之后存在的问题：随着模块的增多，会造成打出的 bundle 体积过大，进而会造成热更新速度明显拖慢。
vite: 启动服务器=> 请求模块时按需动态编译显示。是先启动开发服务器，请求某个模块时再对该模块进行实时编译，因为现代游览器本身支持ES-Mole，所以会自动向依赖的Mole发出请求。
所以vite就将开发环境下的模渣判哪块文冲游件作为浏览器的执行文件，而不是像webpack进行打包后交给本地服务器。
分析了如码webpack和vite的打包方式后，也就明白了为什么vite比webpack打包快，因为它在启动的时候不需要打包，所以不用分析模块与模块之间的依赖关系，不用进行编译。这种方式就类似于我们在使用某个UI框架的时候，可以对其进行按需加载。
热更新方面，效率更高。当改动了某个模块的时候，也只用让浏览器重新请求该模块，不需要像webpack那样将模块以及模块依赖的模块全部编译一次。