详解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 AnythingSlider滑动效果插件
Feb 07 Javascript
javascript闭包的高级使用方法实例
Jul 04 Javascript
jquery简单实现网页层的展开与收缩效果
Aug 07 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
Jan 27 Javascript
浅谈Javascript数组(推荐)
May 17 Javascript
深入理解JavaScript中的for循环
Feb 07 Javascript
vue单页缓存方案分析及实现
Sep 25 Javascript
实例分析javascript中的异步
Jun 02 Javascript
js实现带有动画的返回顶部
Aug 09 Javascript
Vue select 绑定动态变量的实例讲解
Oct 22 Javascript
JavaScript实现通讯录功能
Dec 27 Javascript
微信小程序中wxs文件的一些妙用分享
Feb 18 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 array_push 数组函数
2009/12/26 PHP
使用PHP生成图片的缩略图的方法
2015/08/18 PHP
bindParam和bindValue的区别以及在Yii2中的使用详解
2018/03/12 PHP
ExtJs3.0中Store添加 baseParams 的Bug
2010/03/10 Javascript
jquery动态增加text元素以及删除文本内容实例代码
2013/07/01 Javascript
JQuery中操作Css样式的方法
2014/02/12 Javascript
js基于cookie方式记住返回页面用法示例
2016/05/27 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
2016/10/20 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
2016/11/22 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
微信小程序实战之自定义抽屉菜单(7)
2017/04/18 Javascript
微信小程序与php 实现微信支付的简单实例
2017/06/23 Javascript
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
Vue动态控制input的disabled属性的方法
2018/06/26 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
JavaScript中var的重要性实例分析
2019/07/09 Javascript
JavaScript之Blob对象类型的具体使用方法
2019/11/29 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
python抓取网页中图片并保存到本地
2015/12/01 Python
python3使用urllib模块制作网络爬虫
2016/04/08 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
python批量处理txt文件的实例代码
2020/01/13 Python
pycharm如何使用anaconda中的各种包(操作步骤)
2020/07/31 Python
html5简介及新增功能介绍
2020/05/18 HTML / CSS
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
环境科学专业个人求职信
2013/12/15 职场文书
小露珠教学反思
2014/04/30 职场文书
支部书记四风问题自我剖析材料
2014/09/29 职场文书
夫妻双方自愿离婚协议书
2014/10/24 职场文书
2015教师节师德演讲稿
2015/03/19 职场文书
解析Redis Cluster原理
2021/06/21 Redis
Python使用openpyxl模块处理Excel文件
2022/06/05 Python