详解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的弹出警告对话框美化插件(警告,确认和提示)
Jun 10 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
Feb 16 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
May 15 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
Apr 20 Javascript
教你用javascript实现随机标签云效果_附代码
Mar 16 Javascript
解决Window10系统下Node安装报错的问题分析
Dec 13 Javascript
AngularJS执行流程详解
Feb 17 Javascript
Vue声明式渲染详解
May 17 Javascript
利用node.js如何搭建一个简易的即时响应服务器
May 28 Javascript
新手简单了解vue
May 29 Javascript
js实现鼠标拖拽div左右滑动
Jan 15 Javascript
在vue中使用Echarts画曲线图的示例
Oct 03 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对包含html标签的字符串进行截取的函数分享
2014/06/19 PHP
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
分享五个PHP7性能优化提升技巧
2015/12/07 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
javascript之更有效率的字符串替换
2008/08/02 Javascript
ExtJs使用总结(非常详细)
2012/03/22 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
2012/04/15 Javascript
js实现获取焦点后光标在字符串后
2014/09/17 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
jQuery基本筛选选择器实例代码
2017/02/06 Javascript
Vue前后端不同端口的实现方法
2018/09/19 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
2019/03/06 Javascript
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
Python实现屏幕截图的两种方式
2018/02/05 Python
用python处理MS Word的实例讲解
2018/05/08 Python
python 寻找list中最大元素对应的索引方法
2018/06/28 Python
pycharm修改界面主题颜色的方法
2019/01/17 Python
python最小生成树kruskal与prim算法详解
2019/01/17 Python
Python实现代码统计工具
2019/09/19 Python
Python实现子类调用父类的初始化实例
2020/03/12 Python
python 错误处理 assert详解
2020/04/20 Python
keras自定义损失函数并且模型加载的写法介绍
2020/06/15 Python
纯CSS实现预加载动画效果
2017/09/06 HTML / CSS
用CSS禁用输入法(CSS3 UI规范)实例解析
2012/12/04 HTML / CSS
CSS Houdini实现动态波浪纹效果
2019/07/30 HTML / CSS
HTML5操作WebSQL数据库的实例代码
2017/08/26 HTML / CSS
世界上第一个水枕头:Mediflow
2018/12/06 全球购物
宠物店的创业计划书范文
2014/01/11 职场文书
服装创业计划书范文
2014/02/05 职场文书
成本会计实训报告
2014/11/05 职场文书
毕业论文致谢词
2015/05/14 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
工作转正自我鉴定范文
2019/06/21 职场文书
python爬不同图片分别保存在不同文件夹中的实现
2021/04/02 Python