编程 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实现分割提取页面所需内容

May 09 Javascript

JavaScript Title、alt提示（Tips）实现源码解读

Dec 12 Javascript

jQuery 浮动导航菜单适合购物商品类型的网站

Sep 09 Javascript

jQuery带进度条全屏图片轮播特效代码分享

Jun 28 Javascript

如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上

Dec 26 Javascript

iscroll碰到Select无法选择下拉刷新的解决办法

May 21 Javascript

js实现瀑布流效果（自动生成新的内容）

Mar 16 Javascript

springMvc 前端用json的方式向后台传递对象数组方法

Aug 07 Javascript

vue实现div拖拽互换位置

Jul 29 Javascript

JavaScript实现公告栏上下滚动效果

Mar 13 Javascript

解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题

Oct 29 Javascript

javascript实现简单页面倒计时

Mar 02 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

判“新”函数：得到今天与明天的秒数

2006/10/09 PHP

如何将一个表单同时提交到两个地方处理

2006/10/09 PHP

PHP调用存储过程返回值不一致问题的解决方法分析

2016/04/26 PHP

Jquery中Ajax 缓存带来的影响的解决方法

2011/05/19 Javascript

js页面跳转的问题(跳转到父页面、最外层页面、本页面)

2013/08/14 Javascript

JavaScript中的运算符种类及其规则介绍

2013/09/26 Javascript

js将字符串转成正则表达式的实现方法

2013/11/13 Javascript

nodejs教程之环境安装及运行

2014/11/21 NodeJs

JS随机调用指定函数的方法

2015/07/01 Javascript

基于JS实现PHP的sprintf函数实例

2015/11/14 Javascript

js+css实现回到顶部按钮（back to top）

2016/03/02 Javascript

JavaScript手机振动API

2016/06/11 Javascript

JS中常用的输出方式(五种)

2016/06/12 Javascript

微信小程序教程之列表渲染

2016/10/18 Javascript

微信小程序左右滑动切换页面详解及实例代码

2017/02/28 Javascript

详解vue-cli项目中怎么使用mock数据

2018/05/29 Javascript

Vue组件间通信 Vuex的用法解析

2019/08/05 Javascript

解决vue init webpack 下载依赖卡住不动的问题

2020/11/09 Javascript

在vue中使用image-webpack-loader实例

2020/11/12 Javascript

[34:08]2018DOTA2亚洲邀请赛3月29日小组赛B组 VP VS EG

2018/03/30 DOTA

python实现实时监控文件的方法

2016/08/26 Python

Python如何快速上手? 快速掌握一门新语言的方法

2017/11/14 Python

Pyspider中给爬虫伪造随机请求头的实例

2018/05/07 Python

Python处理命令行参数模块optpars用法实例分析

2018/05/31 Python

Python编程图形库之Pillow使用方法讲解

2018/12/28 Python

详解Numpy中的数组拼接、合并操作（concatenate, append, stack, hstack, vstack, r_, c_等）

2019/05/27 Python

python推导式的使用方法实例

2021/02/28 Python

Under Armour美国官网：美国知名高端功能性运动品牌

2016/09/05 全球购物

请说出你所知道的线程同步的方法

2013/04/19 面试题

Java servlet面试题

2012/03/04 面试题

致全体运动员广播稿

2014/02/01 职场文书

爱国卫生月实施方案

2014/02/21 职场文书

高级销售求职信

2014/02/21 职场文书

实习协议书范本

2014/04/22 职场文书

工作犯错保证书

2015/05/11 职场文书

Pygame如何使用精灵和碰撞检测

2021/11/17 Python