什么是vite 以及为什么要使用vite(即vite的优点)？

最新推荐文章于 2024-02-21 19:20:39 发布
最新推荐文章于 2024-02-21 19:20:39 发布
阅读量5.5k 收藏 6
点赞数 4
文章标签： 前端 javascript typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_69282350/article/details/127906632
版权

 一，什么是vite?

vite是前端的构建工具，和webpack类似。

二，vite有哪些优点？

     1，极速的服务启动，使用原生 ESM 文件，无需打包。

     2，轻量快速的热重载，无论应用程序大小如何，都始终极快的模块热重载（HMR）

     3，丰富的功能，对 TypeScript、JSX、CSS 等支持开箱即用。

     4，优化的构建，可选 “多页应用” 或 “库” 模式的预配置 Rollup 构建

     5，通用的插件，在开发和构建之间共享 Rollup-superset 插件接口。

     6，完全类型化的API，灵活的 API 和完整 TypeScript 类型。

三，vite有哪些劣势?

  1. 生态不及webpack，加载器、插件不够丰富
  2. 打包到生产环境时，vite使用传统的 rollup（也可以自己手动安装webpack来）进行打包
  3. 项目的开发浏览器要支持 ES Module，而且不能识别 CommonJS 语法

四，vite / wedpack 的打包原理 

     webpack打包原理

     vite打包原理

超勇的.
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vite分享、原理介绍ppt
11-15
Vite分享、原理介绍ppt。vite是一种新型前端构建工具，能够显著提升前端开发体验。 本ppt从什么是vite、为什么选择vite作为构建工具、vite与webpack在冷启动与热更新方面的区别、vite的优势与劣势等方面详细介绍了vite的相关知识。同时本ppt含盖较为详细的vite的原理介绍，如vite是如何处理依赖预购建，是如何对源码进行转换的，以及热更新的原理等。同时通过与webpack在打包等方面的对比，展示了为什么会选择vite作为前端构建工具的原因。同时本ppt还介绍了一些额外知识，如esbuild为何构建这么快、esm的定义，有多少浏览器支持esm、Monorepo、虚拟模块又是什么？为什么可以用 esbuild 打包代替深度遍历的过程？html 类型的文件是如何转换为js的？预购建 inclued 、exclude 的使用场景是什么？预购建是如何实现缓存判断与依赖扫描、依赖打包的？有没有预购建的影响是怎样的？有无 middlewares 的影响又是怎样的？等等，这些问题都可以在这里找到答案。快来看看吧~~
个Vite+Vue3+TypeScript+Cesium.js集成模板是一个开箱即用的项目模板
04-01
这个Vite+Vue3+TypeScript+Cesium.js集成模板是一个开箱即用的项目模板，旨在帮助开发者快速搭建基于Cesium.js的Vue3应用程序。该模板使用了最新的Vite构建工具和Vue3框架，并集成了TypeScript和Cesium.js技术栈。 该模板提供了一个简单的示例，展示了如何在Vue3应用程序中使用Cesium.js API创建一个基本的地球场景，并实现了一些基本的交互功能。除此之外，该模板还提供了一些常用的依赖和插件，如axios、element-plus、vuex等，可以方便地扩展应用程序的功能。 如果您想快速搭建一个基于Cesium.js的Vue3应用程序，这个模板将是一个很好的起点，可以帮助您快速启动项目，并提供了可靠的技术栈和开发经验。
Vite详解
zz130428的博客
04-13 1723
构建工具 Vite，目前只有vue3才可以使用Vite，如果本文对你有所帮助请三连支持博主。Vite是一种面向现代浏览器的一个更轻、更快的前端构建工具，能够显著提升前端的开发体验。除了Vite外，前端著名的构建工具还有Webpack和Gulp。目前，Vite已经发布了Vite2，Vite全新的插件架构、丝滑的开发体验，可以和Vue3的完美结合。
vite是什么
0
02-21 1615
因此，针对开发环境中的启动慢问题，Vite开发环境冷启动无需打包，无需分析模块之间的依赖，同时也无需在启动开发服务器前进行编译，启动时还会使用esbuild来进行预构建。而Webpack 启动后会做一堆事情，经历一条很长的编译打包链条，从入口开始需要逐步经历语法解析、依赖收集、代码转译、打包合并、代码优化，最终将高版本的、离散的源码编译打包成低版本、高兼容性的产物代码，这可满满都是 CPU、IO 操作啊，在 Node 运行时下性能必然是有问题。经过1.3节，我们简单对比了各打包工具之间的差异。
vite简介，使用vite创建项目的优势
qq_59208151的博客
11-18 1188
下一代构架工具vite
【前端工程化】深入浅出vite（一）--vite的优点及原理、性能优化
未来可期
06-21 4098
本文学习了`vite`的优点、简单分析了优点背后实现的原理，以及还有性能优化的方案。
Vite 完整版详解
weixin_51225684的博客
11-11 2万+
一些较大的依赖（例如有上百个模块的组件库）处理的代价也很高。：通常包含一些并非直接是 JavaScript 的文件，需要转换（例如 JSX，CSS 或者 Vue/Svelte 组件），时常会被编辑。同时，并不是所有的源码都需要同时被加载（例如基于路由拆分的代码模块）除了默认的developmen和production还可以自定义模式，如可能希望有一个 “staging” (预发布|预上线) 模式，它应该具有类似于生产的行为，但环境变量与生产环境略有不同。响应浏览器请求的过程中，不可避免的导致首屏性能下降。
web开发构建工具Vite
qq_48018288的博客
10-18 1838
web开发构建工具Vite
对vite的简单了解
汉堡请不要欺负面条
09-07 7206
vite 是一种新型的前端构建工具，能够显著的提升前端开发者的体验。它主要有俩部分组成： 一个开发服务器：它基于原生的es模块，提供了丰富的内建功能，如速度快到惊人的模块热更新HMR. 一套构建指令：使用Rollup打包代码，并且它是预构建的，可输出用于生产环境的高度优化过的静态资源。 vite旨在提供开箱即用的配置，但同时它也提供插件API和JavaSccript API 带来高度的可扩展性并且有完整的类型支持。
Vite是什么？怎样使用Vite创建Vue3项目？【详细教程】
zy1992As的博客
10-06 2010
Vite(读音：/vit/)是一个轻量级、运行速度快的前端构建工具，它支持模块热替换(Hot Module Replacement，HMR)，可以即时、准确地更新模块，当代码修改时无须重新加载页面或清除应用程序状态。Vite默认安装的插件比较少，随着开发过程中依赖的增多，需要额外进行配置。Vite不需要以命令的方式安装和卸载，只要安装了npm或yarn，就可使用Vite的相关命令创建项目。Vite会作为项目的开发依赖保存在项目的node_modules目录中。
vite详解
热门推荐
weixin_47450807的博客
02-06 3万+
一、认识vite webpack是目前整个前端使用最多的构建工具，但是除了webpack之后也存在其他一些构建工具。比如说rollup,parcel,gulp,vite等等。vite的官方定位是下一代前端开发和构建工具。 如何定义下一代开发和构建工具呢？ 我们知道在实际开发中，我们在编写的代码往往是不能被浏览器直接识别的，比如ES6，TypeScript,Vue文件等。所以此时我们必须通过构建工具来对代码进行转换，编译，类似的工具有webpack,rollup,parcel.但是随着项目越来越大，需要处理的
vite-plugin-restart:自定义文件组重新启动Vite服务器
03-25
vite-plugin-restart 自定义文件/全局文件以重新启动Vite服务器 用法 安装 npm i vite-plugin-restart -D # yarn add vite-plugin-restart -D 将其添加到vite.config.js // vite.config.js import ViteRestart from 'vite-plugin-restart' export default { plugins : [ ViteRestart ( { restart : [ 'my.config.[jt]s' , ] } ) ] , } ; 现在，对my.config.js或my.config.ts更改将自动重新启动服务器。 动机 Byebye nodemon -w my.config.js
electron-vite-quick-start:全栈使用 Vite 运行 Electron 应用程序，包括主进程
07-24
该项目已被收录到。 Electron-vite-快速启动 :high_voltage: 全栈使用 Vite来运行 Electron 应用程序，包括主进程。 :light_bulb: 项目使用管理，因此推荐使用Yarn作为包管理工具。 快速使用 # Clone this repository $ git clone https://github.com/yingpengsha/electron-vite-quick-start.git # Go into the repository $ cd electron-vite-quick-start # Install dependencies $ yarn install # Run the app $ yarn run start 建造 $ yarn run build 去做 执照
如何使用vite-svg-loader
02-23
如何使用vite-svg-loader
vue-cli-plugin-vite：与vue-cli一起使用Vite Today
03-04
立即使用Vite 无需任何代码库修改即可直接使用的vue-cli项目。 目录 用法 vue add vite 插件的生成器将为相应的main。{js，ts}编写一些main.html ，因为vite需要html文件作为dev-server条目文件 动机 我们有很多现有的vue-cli（3.x / 4.x）项目。 在生产中：基于webpack的vue-cli仍然是捆绑webapp的最佳实践（通过代码拆分，旧版浏览器的旧版构建）。 在开发中：即时启动服务器并通过闪电快速实现HMR很有趣。 我们为什么不一起使用它们呢？ // vue.config.js { // ... pluginOptions : { vite : { /** * deprecated since v0.2.2. we can auto-resolve alias from
vite-test-example:使用Vite设置测试的示例
05-17
要尝试，请运行： yarn test:e2e 使用Vite运行端到端测试与其他捆绑软件没有什么不同： 捆绑该应用以进行生产； 启动静态HTTP服务器； 从测试框架运行命令。 Vite提供了一个内置的静态HTTP服务器来预览构建结果。 ...
vite+vue3使用模块化批量发布Mockjs接口
最新发布
03-29
vite+vue3使用模块化批量发布Mockjs接口
vite+vue3动态模块化导入并使用pinia
03-25
vite+vue3动态模块化导入并使用pinia
vue vite特点与优缺点
FieeSingle的博客
09-09 3841
Vite 的特点： 和 Webpack相比，Vite 具有以下特点： 快速的冷启动，不需要等待打包 即时的热模块更新 真正的按需编译，不用等待整个项目编译完成 由于完全跳过了打包这个概念，Vite的出现大大的撼动了Webpack的地位，且真正做到了服务器随起随用。 Vite 优点 Vite 缺点 Vite 优点 Vite 缺点 开发服务器比 Webpack 快 10-100 倍 只能针对现代浏览器（ES2015+） 将 code-splitting 作为优先事项 与 CommonJS 模
Vite和webpack的不同？Vite的优势是什么？
06-07
Vite和Webpack都是前端打包工具，但是它们有一些不同之处，主要包括以下几个方面： 1. 构建方式 Vite使用ESM原生模块化开发，它不需要预先构建，而是在浏览器端实时编译和构建。而Webpack则是通过打包构建生成静态文件，在浏览器端加载。 2. 构建速度 由于Vite的构建方式不需要预先构建，所以它的构建速度比Webpack更快。在开发过程中，Vite可以实时编译和构建，所以它可以更快地更新更改后的代码。 3. 插件机制 Vite采用了基于Rollup的插件机制，可以轻松地扩展和定制开发环境。而Webpack的插件机制则相对复杂，需要对Webpack的内部机制有一定的了解。 4. 对开发体验的优化 Vite针对开发过程进行了优化，它支持快速的HMR（热更新）功能，可以在不刷新浏览器的情况下实时更新应用程序，提高开发效率。 5. 静态资源处理 Vite支持在开发环境下直接加载静态资源，而Webpack需要将静态资源打包到输出文件中。 综上所述，Vite相对于Webpack的优势主要在于构建速度快、开发体验好、支持原生ESM模块化开发以及插件机制简单等方面。因此，对于开发小型应用或者需要频繁调试的场景，使用Vite会更加方便和高效。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值