1.vite有什么用？Vite实际上是一个现代的面向浏览器的工具，基于ES模块实现了一个更轻量级的项目构建和打包工具。Vite在法语中是轻快的意思。vite的特点：1.快速冷服务启动。vite面向现代浏览器。浏览器支持ES6的imports属性，使用浏览器解析import，在服务端按需编译返回，不打包。所以它运行得更快。2、开发中热更新。监控项目代码并在有更改时立即重新运行。3.按需编译，不刷新所有DOM。vite只需要在浏览器请求时转换源码，按需提供源码。代码根据情况动态导入，只有在实际使用当前屏幕时才会处理。vite对现代浏览器的支持较好，传统浏览器可以通过官方@vite/plugin-legacy插件支持。2.vite创建一个vue项目。Vite是一个构建工具的高级包，它的内部其实是一个Rollup。vite是游鱼溪和vue3正式版一起发布的工具，所以vite只提供了vue3的项目构建方法，没有vue2.0的构建方法。除了可以搭建vue3项目，还可以搭建vue-ts、react、react-ts、preact、preact-ts、vanilla、vanilla-ts、lit、svelte。2.1.构建vite项目的分步说明。打开命令行工具，使用npm命令：npminitvite@lasted运行结果，如图：输入要创建的项目名称“learn_vite”。如果不输入，默认为“vite-project”。回车进入下一步，需要选择要创建的项目类型，如图：使用上下箭头切换，选择我们最熟悉的vue，回车继续到下一步。选的是ts吗？vite原生支持ts。我们直接选择vue。不要。至此，项目创建完成，需要进入项目，安装依赖，启动服务。根据提示地址，去访问我们刚刚创建的第一个项目。如图所示。2.2.vite创建文件目录创建项目后，使用编辑器打开项目，我们可以看到如图所示的项目结构：要了解vite如何运行项目，首先要从配置文件入手。打开package.json文件，代码如下：{"name":"learn_vite","version":"0.0.0","scripts":{"dev":"vite","build":"vitebuild","serve":"vitepreview"},"dependencies":{"vue":"^3.2.16"},"devDependencies":{"@vitejs/plugin-vue":"^1.9.3","vite":"^2.6.4"}}找到启动项目的命令和打包命令。3、viteVSwebpack3.1，vite到底有多快？我们创建两个项目，一个使用vite，另一个使用webpack。创建完成后，启动服务，对比一下启动时间，就知道vite有多快了。启动服务时，webpack需要先打包项目，打包后再启动项目，而vite完全跳过了打包的概念，服务端随时可用。所以在启动服务的时候，vite比webpack要快很多。3.2.vite热更新效率如何？一些packager开发服务器将构建内容存储在内存中，这样他们只需要在文件更改时停用部分模块图，但它也需要整个重建并重新加载到页面中。这很昂贵，重新加载页面会丢失应用程序的当前状态。所以vite支持动态热模块重载（HMR），即允许一个模块“热替换”自己而不影响页面的其他部分，也就是只替换和更新部分发生变化的元素，大大提升了开发体验.Vite还使用了httpheader来加速整个页面的加载。依赖模块请求会通过Cache-Control强缓存：max-age=31536000，不可变。再次请求时，不需要再次请求缓存的内容。3.3.使用不同的语言Webpack使用node.js来实现，而vite使用esbuild预构建依赖。并且esbuild是用Go写的，比用node.js写的packager预建依赖要快10-100倍。上面说了这么多，网赞vite是多么的优秀。vite就这么强大，没有缺点吗？4、vite局限性与webpack相比，vite毕竟出道时间短，生态也不完善。webpack最好的地方在于它有很多加载器和插件。vite在打包项目时，目前使用的是Rollup，对CSS和codesplitting不是很友好。Vite刚刚兴起，生态还不够完善。建议您在创建工作项目时仍然使用webpack。您可以将vite用于您自己的项目。
