编程 Javascript

详解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 新体验内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

详解Vite的新体验

- Author -

痞老板2

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Javascript的匿名函数小结

Dec 31 Javascript

js防止表单重复提交的两种方法

Sep 30 Javascript

js 判断控件获得焦点的示例代码

Mar 04 Javascript

小心！AngularJS结合RequireJS做文件合并压缩的那些坑

Jan 09 Javascript

利用Node.js制作爬取大众点评的爬虫

Sep 22 Javascript

jQuery的事件预绑定

Dec 05 Javascript

requirejs + vue 项目搭建详解

Jun 16 Javascript

通过构造函数实例化对象的方法

Jun 28 Javascript

详谈Node.js之操作文件系统

Aug 29 Javascript

vue之debounce属性被移除及处理详解

Nov 13 Javascript

vue 监听 Treeselect 选择项的改变操作

Aug 31 Javascript

小程序实现文字循环滚动动画

Jun 14 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

通过curl模拟post和get方式提交的表单类

2014/04/23 PHP

对于Laravel 5.5核心架构的深入理解

2018/02/22 PHP

php实现微信公众号创建自定义菜单功能的实例代码

2019/06/11 PHP

laravel开发环境homestead搭建过程详解

2020/07/03 PHP

js函数的引用，关于内存的开销

2012/09/17 Javascript

js读取注册表的键值示例

2013/09/25 Javascript

jquery如何根据值设置默认的选中项

2014/03/17 Javascript

jquery实现瀑布流效果分享

2014/03/26 Javascript

Nodejs sublime text 3安装与配置

2014/06/19 NodeJs

jQuery中Form相关知识汇总

2015/01/06 Javascript

微信小程序 form组件详解

2016/10/25 Javascript

深入理解javascript中的 “this”

2017/01/17 Javascript

ES6正则表达式的一些新功能总结

2017/05/09 Javascript

vuejs 单文件组件.vue 文件的使用

2017/07/28 Javascript

深入浅析Vue.js中 computed和methods不同机制

2018/03/22 Javascript

Vue中的情侣属性$dispatch和$broadcast详解

2019/03/07 Javascript

vue+iview动态渲染表格详解

2019/03/19 Javascript

详解JavaScript 新语法之Class 的私有属性与私有方法

2019/04/23 Javascript

JavaScript 装逼指南(js另类写法)

2020/05/10 Javascript

[02:19]2014DOTA2国际邀请赛专访820少年们一起去追梦吧

2014/07/14 DOTA

[00:47]DOTA2荣耀之路6：天火，天火！

2018/05/30 DOTA

[59:00]DOTA2-DPC中国联赛正赛 Ehome vs PSG.LGD BO3 第一场 3月7日

2021/03/11 DOTA

Python学习资料

2007/02/08 Python

Python实现发送QQ邮件的封装

2017/07/14 Python

python实现数据库跨服务器迁移

2018/04/12 Python

Matplotlib 生成不同大小的subplots实例

2018/05/25 Python

python中强大的format函数实例详解

2018/12/05 Python

对django layer弹窗组件的使用详解

2019/08/31 Python

如何使用repr调试python程序

2020/02/28 Python

基本款天堂：Everlane

2017/05/13 全球购物

ParcelABC西班牙：包裹运送和快递服务

2019/12/24 全球购物

银行实习生的自我评价

2013/12/09 职场文书

幼儿园安全教育月活动总结

2015/05/08 职场文书

CSS完成视差滚动效果

2021/04/27 HTML / CSS

世界十大动漫制作公司排行榜，迪士尼上榜，第二是美国代表性文化符

2022/03/18 欧美动漫

利用Python将list列表写入文件并读取的方法汇总

2022/03/25 Python