详解Vite的新体验
更新时间：2021年2月22日 12:53 点击：1580
什么是Vite?(是前端新玩具)
Vite是一个web开发构建工具，它通过本机 ES 模块导入在开发过程中更新代码，达到快速更新的目的。
特点
- 超快的冷服务器启动
- 即时的模块更新
- 真正的按需编译
- 更小的打包体积
开始使用
Vue用户注意：Vite当前仅适用于Vue3.x。这也意味着您不能使用尚未与Vue 3兼容的库。
安装
npm init vite-app <项目名称> cd <项目名称> npm install npm run dev ## 执行完以上命令，就意味着你的vue3.0项目已经用上了vite了
vite和webpack体验上有什么不同？
就vite目前给我的感觉，就是一个字，快。
- 初次启动调试服务的时候比webpack快了一倍。
- 打包的速度也快了一倍以上。
- 打包出来的文件的体积也是原来webpack的一半体积不到。
Vite是怎样工作的？
用作者的话来说，就是直接请求.vue文件，让浏览器进行解析
最新版的浏览器是支持直接使用import和export关键字了，也就是浏览器开始原生支持模块功能了，这也是Vite使用到的特性之一。
“说了那么多，不如抓个包看看？”
当然可以！在这里我只修改了HelloWorld.vue文件
然后我再次修改了App.vue文件 （不要在意时间戳不一样，我只是不小心删除了，然后又懒得重来）
到这里，相比对Webpack的Code Splitting实现按需加载的方式，Vite给我确实体验是快速了很多
最后
Vite虽然很爽，但是当前RC 1版本仅适用于Vue3.x，不能使用和Vue3不兼容的库。（速度肯定是比webpack快的，各方面）
到此这篇关于详解Vite的新体验的文章就介绍到这了,更多相关Vite 新体验内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！
上一篇: Nest.js环境变量配置与序列化详解
下一篇: 用vite搭建vue3应用的实现方法
相关文章
详解Vue3.0 + TypeScript + Vite初体验
这篇文章主要介绍了详解Vue3.0 + TypeScript + Vite初体验，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-02-22- EMUI11值得升级吗？好不好用？下面小编带来EMUI11上手体验，一起来看看手机鸿蒙OS的提前预演...2020-12-08
- 这篇文章主要介绍了Vite比Vue CLI快在哪里，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下...2021-01-31
- 随着 Vite2 的发布并日趋稳定，现在越来越多的项目开始尝试使用它。本文我们就介绍了Vite创建项目的实现步骤，感兴趣的可以了解一下...2021-07-12
- 这篇文章主要介绍了用vite搭建vue3应用的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-02-22
- 这篇文章主要介绍了详解Vite的新体验，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-02-22
- 本文主要介绍了vite的搭建与使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2022-06-26
vite + electron-builder 打包配置详解
这篇文章主要为大家介绍了electron基于vite + electron-builder 打包配置详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪...2022-09-21- 这篇文章主要介绍了vue3Vite进阶rollup命令行使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪...2022-08-22
- vue前端项目发布的时候,打包可实现gzip格式的压缩,下面这篇文章主要给大家介绍了关于Vite打包性能优化之开启Gzip压缩的相关资料,需要的朋友可以参考下...2022-12-04
- 在vue2中我们通常会在模板中通过三目运算符和require来实现动态图片,下面这篇文章主要给大家介绍了关于Vite不能使用require问题的解决方法,需要的朋友可以参考下...2022-10-21