详解Vite的新体验


Posted in Javascript onFebruary 22, 2021

什么是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文件

详解Vite的新体验

然后我再次修改了App.vue文件 (不要在意时间戳不一样,我只是不小心删除了,然后又懒得重来)

详解Vite的新体验

到这里,相比对Webpack的Code Splitting实现按需加载的方式,Vite给我确实体验是快速了很多

最后

Vite虽然很爽,但是当前RC 1版本仅适用于Vue3.x,不能使用和Vue3不兼容的库。(速度肯定是比webpack快的,各方面)

到此这篇关于详解Vite的新体验的文章就介绍到这了,更多相关Vite 新体验内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
Oct 20 Javascript
两种常用的javascript数组去重方法思路及代码
Mar 26 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
Aug 21 Javascript
JavaScript中奇葩的假值示例应用
Mar 11 Javascript
JS对img标签进行优化使用onerror显示默认图像
Apr 24 Javascript
angularjs 源码解析之injector
Aug 22 Javascript
AngularJs+Bootstrap实现漂亮的计算器
Aug 10 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
Oct 20 Javascript
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
详解使用angular框架离线你的应用(pwa指南)
Jan 31 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
May 01 Javascript
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 #Vue.js
Nest.js 授权验证的方法示例
Feb 22 #Javascript
使用原生javascript开发计算器实例代码
Feb 21 #Javascript
Nest.js环境变量配置与序列化详解
Feb 21 #Javascript
关于Js中new操作符的作用详解
Feb 21 #Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 #Vue.js
Vue实现todo应用的示例
Feb 20 #Vue.js
You might like
php使用自带dom扩展进行元素匹配的原理解析
2020/05/29 PHP
JavaScript写的一个DIV 弹出网页对话框
2009/08/14 Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
2010/04/01 Javascript
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
jquery解析xml字符串简单示例
2014/04/11 Javascript
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
JS获取当前日期时间并定时刷新示例
2021/03/04 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
简单介绍JavaScript中字符串创建的基本方法
2015/07/07 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
省市二级联动小案例讲解
2016/07/24 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
教你一步步用jQyery实现轮播器
2016/12/18 Javascript
Angular的$http与$location
2016/12/26 Javascript
nodejs实现邮件发送服务实例分享
2017/03/29 NodeJs
xmlplus组件设计系列之按钮(2)
2017/04/26 Javascript
Express框架之connect-flash详解
2017/05/31 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
微信小程序实现的自定义分享功能示例
2019/02/12 Javascript
vue 中固定导航栏的实例代码
2019/11/01 Javascript
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
[00:21]DOTA2亚洲邀请赛 Logo演绎
2015/02/07 DOTA
Python实现base64编码的图片保存到本地功能示例
2018/06/22 Python
Python Matplotlib实现三维数据的散点图绘制
2019/03/19 Python
python获取Pandas列名的几种方法
2019/08/07 Python
在Python中使用turtle绘制多个同心圆示例
2019/11/23 Python
英格兰足协官方商店:England Store
2019/07/12 全球购物
大二自我鉴定范文
2013/10/05 职场文书
医师定期考核实施方案
2014/05/07 职场文书
工商管理本科生求职信
2014/07/13 职场文书
教师工作失职检讨书
2014/09/18 职场文书
python3 sqlite3限制条件查询的操作
2021/04/07 Python
详解Python小数据池和代码块缓存机制
2021/04/07 Python
Win11软件图标固定到任务栏
2022/04/19 数码科技