编程 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 Firefox3.5中操作select的问题

Jul 10 Javascript

jquery URL参数判断，确定菜单样式

May 31 Javascript

Javascript类库的顶层对象名用户体验分析

Oct 24 Javascript

javascript SpiderMonkey中的函数序列化如何进行

Dec 05 Javascript

javascript抖动元素的小例子

Oct 28 Javascript

js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果

Aug 31 Javascript

JavaScript数组的一些奇葩行为

Jan 25 Javascript

Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面

Jul 01 Javascript

JavaScript 链式结构序列化详解

Sep 30 Javascript

vue router-link传参以及参数的使用实例

Nov 10 Javascript

jQuery实现动态加载(按需加载)javascript文件的方法分析

May 31 jQuery

浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑

Sep 12 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

PHP5.3的垃圾回收机制(动态存储分配方案)深入理解

2012/12/10 PHP

基于header的一些常用指令详解

2013/06/06 PHP

php获取qq用户昵称和在线状态（实例分析）

2013/10/27 PHP

php常用字符串处理函数实例分析

2014/11/22 PHP

PHP图像处理类库及演示分享

2015/05/17 PHP

thinkPHP5.0框架API优化后的友好性分析

2017/03/17 PHP

php 从指定数字中获取随机组合的简单方法(推荐)

2017/04/05 PHP

PHP基于PDO实现的SQLite操作类【包含增删改查及事务等操作】

2017/06/21 PHP

利用PHPStorm如何开发Laravel应用详解

2017/08/30 PHP

Discuz! 6.1_jQuery兼容问题

2008/09/23 Javascript

关于Javascript与iframe的那些事儿

2013/07/04 Javascript

AngularJS基础 ng-srcset 指令简单示例

2016/08/03 Javascript

JavaScript算法系列之快速排序（Quicksort）算法实例详解

2016/09/04 Javascript

bootstrap制作jsp页面（根据值让table显示选中）

2017/01/05 Javascript

JS正则匹配中文的方法示例

2017/01/06 Javascript

ES6教程之for循环和Map,Set用法分析

2017/04/10 Javascript

layer实现关闭弹出层刷新父界面功能详解

2017/11/15 Javascript

JavaScript 数组去重并统计重复元素出现的次数实例

2017/12/14 Javascript

Vue组件之极简的地址选择器的实现

2018/05/31 Javascript

vue 1.0 结合animate.css定义动画效果

2018/07/11 Javascript

JavaScript生成一个不重复的ID的方法示例

2019/09/16 Javascript

微信小程序实现图片翻转效果的实例代码

2019/09/20 Javascript

详解Vue数据驱动原理

2020/11/17 Javascript

python动态参数用法实例分析

2015/05/25 Python

Python中easy_install 和 pip 的安装及使用

2017/06/05 Python

Python实现对象转换为xml的方法示例

2017/06/08 Python

python实现定时自动备份文件到其他主机的实例代码

2018/02/23 Python

处理python中多线程与多进程中的数据共享问题

2019/07/28 Python

python SocketServer源码深入解读

2019/09/17 Python

Tensorflow获取张量Tensor的具体维数实例

2020/01/19 Python

解决python Jupyter不能导入外部包问题

2020/04/15 Python

HTML5新增元素如何兼容旧浏览器有哪些方法

2014/05/09 HTML / CSS

台湾租车首选品牌：IWS艾维士租车

2019/05/03 全球购物

班主任寄语大全

2014/04/04 职场文书

护士求职自荐信

2015/03/25 职场文书

Python字符串的转义字符

2022/04/07 Python