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

extjs 学习笔记（三）最基本的grid

Oct 15 Javascript

jQuery.clean使用方法及思路分析

Jan 07 Javascript

jQuery动态地获取系统时间实现代码

May 24 Javascript

如何让DIV可编辑、可拖动示例代码

Sep 18 Javascript

iframe里面的元素触发父窗口元素事件的jquery代码

Oct 19 Javascript

React通过父组件传递类名给子组件的实现方法

Nov 13 Javascript

layer弹出的iframe层在执行完毕后关闭当前弹出层的方法

Aug 17 Javascript

探索JavaScript中私有成员的相关知识

Jun 13 Javascript

详解JS预解析原理

Jun 16 Javascript

React+EggJs实现断点续传的示例代码

Jul 07 Javascript

解决vue动态下拉菜单有数据未反应的问题

Aug 06 Javascript

微信小程序实现录音Record功能

May 09 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

丧钟首部独立剧集《丧钟：骑士与龙》北美正式开播，场面血腥

2020/04/09 欧美动漫

很好用的PHP数据库类

2009/05/27 PHP

简单谈谈PHP vs Node.js

2015/07/17 PHP

extJs 下拉框联动实现代码

2010/04/09 Javascript

鼠标经过显示二级菜单js特效

2013/08/13 Javascript

jquery与js函数冲突的两种解决方法

2013/09/09 Javascript

判断输入是否为空,获得输入类型的JS代码

2013/10/30 Javascript

window.onload和$(function(){})的区别介绍

2013/10/30 Javascript

javascript使用onclick事件改变选中行的颜色

2013/12/30 Javascript

javascript中eval函数用法分析

2015/04/25 Javascript

AngularJS在IE下取数据总是缓存问题的解决方法

2016/08/05 Javascript

详解angularJs中关于ng-class的三种使用方式说明

2017/06/02 Javascript

详谈vue+webpack解决css引用图片打包后找不到资源文件的问题

2018/03/06 Javascript

JavaScript数组特性与实践应用深入详解

2018/12/30 Javascript

Vuex中的State使用介绍

2019/01/19 Javascript

[03:16]DOTA2完美大师赛主赛事首日集锦

2017/11/23 DOTA

Python 开发Activex组件方法

2009/11/08 Python

Python调用SQLPlus来操作和解析Oracle数据库的方法

2016/04/09 Python

python中实现数组和列表读取一列的方法

2018/04/03 Python

python3监控CentOS磁盘空间脚本

2018/06/21 Python

Jupyter notebook在mac:linux上的配置和远程访问的方法

2019/01/14 Python

WxPython建立批量录入框窗口

2019/02/27 Python

python安装本地whl的实例步骤

2019/10/12 Python

Python使用Tkinter实现转盘抽奖器的步骤详解

2020/01/06 Python

jupyter notebook中美观显示矩阵实例

2020/04/17 Python

Python实现转换图片背景颜色代码

2020/04/30 Python

Python Django form 组件动态从数据库取choices数据实例

2020/05/19 Python

C语言50道问题

2014/10/23 面试题

工业自动化毕业生自荐信范文

2014/01/04 职场文书

开工仪式主持词

2014/03/20 职场文书

党员公开承诺践诺书

2014/03/25 职场文书

辞职信标准格式

2015/02/27 职场文书

学生会辞职信

2015/03/02 职场文书

2015年学校保卫部工作总结

2015/05/11 职场文书

汉字听写大会观后感

2015/06/12 职场文书

javascript对象3个属性特征

2021/11/17 Javascript