编程 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 相关文章推荐

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