Vite 2.0 正式发布!

Wesley13
• 阅读 369

当我们还在为假期余额不足而烦恼时,尤大在做些什么?Vite 2.0 正式发布!

Vite 2.0 正式发布!

网友:

Vite 2.0 正式发布!

Vite 2.0 正式发布! Vite 2.0 正式发布! Vite是什么

Vite (法语单词“ fast”,发音为/vit/)是一种新型的前端构建工具,它可以显著改善前端的开发体验。它由两个主要部分组成:

  • 一个通过本机 ES 模块提供源文件的开发服务器,具有丰富的内置特性和快得惊人的热模块替换(HMR)。

  • 一个构建命令,它将代码与 Rollup 捆绑在一起,后者预先配置为输出用于生产的高度优化的静态资产

此外,Vite 通过其插件 APIJavaScript API 具有高度的扩展性,并提供全面的类型支持

有多快?

为了了解 Vite 的速度有多快,这里有一个视频比较了使用 Vite vs. create-React-app (CRA) 应用程序的过程:

关于Vite2

这实际上是 Vite 的第一个稳定版本。也就是说,Vite 2.0比之前的版本有了很大的改进

Vite 2.0采用了一个更健壮的内部架构从头开始重新设计。现在它完全与框架无关,所有特定于框架的支持都委托给了插件。现在有 VueReactPreactLit Element 和正在进行的 Svelte 的官方模板

New Plugin Format and API

受到 WMR 的启发,新的插件系统扩展了 Rollup 的插件界面,并兼容许多 Rollup 插件。插件可以使用 rollup 兼容的钩子,以及额外的 vite 特定钩子和属性来调整 vite 专用行为(例如区分 dev 和 build 或 HMR 的自定义处理)

esbuild Powered Dep Pre-Bundling Esbuild

因为 Vite 是一个本地的 ESM dev 服务器,使用Pre-Bundling以减少浏览器请求的数量并处理 CommonJSESM 的转换

在之前,Vite 使用 Rollup 完成这项工作,而在2.0中,它现在使用 esbuild,从而使依赖性预绑定的速度提高了「10-100」

作为参考,React Meterial 用户界面以前需要28秒,现在需要约1.5秒

First-class CSS Support

CSS 视为moduleFirst-class,并支持以下开箱即用的功能:

  • Resolver enhancement 增强了 CSS 中的路径,以尊重别名和 npm 依赖

  • URL rebasing 不管文件从哪里导入,路径都会自动重新设置

  • CSS code splitting

Server-Side Rendering (SSR) Support

Vite 提供了 api,以便在开发过程中有效地在 Node.js 中加载和更新基于 esm 的源代码(就像服务器端 HMR 一样) ,并自动外部化 commonjs 兼容的依赖关系,以提高开发和 SSR 构建速度。生产服务器可以与 Vite 完全解耦

Vite SSR 是作为一个低层次的特性提供的,我们期望看到更高层次的框架在引擎盖下利用它

Opt-in Legacy Browser Support

Vite 的目标是默认支持原生 ESM 的现代浏览器,你也可以通过官方的@vitejs/plugin-legacy 选择支持传统的浏览器

这个插件会自动生成现代/旧版两个包,并且基于浏览器/特征提取,提供正确的包,确保在支持它们的现代浏览器中有更高效的代码

相关链接

Vite 2.0 正式发布!

交流讨论

欢迎关注公众号「前端试炼」,公众号平时会分享一些实用或者有意思的东西,发现代码之美。专注深度和最佳实践,希望打造一个高质量的公众号。

❤️

公众号后台回复【小炼】

邀请你加入纯净技术交流群(上班划水摸鱼群)

**🙏
**

如果觉得这篇文章还不错

来个【分享、点赞、在看】三连吧

本文分享自微信公众号 - 前端试炼(code-photo)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
3年前
MySQL总结(十一)子查询
!(https://oscimg.oschina.net/oscnet/upa344f41e81d3568e3310b5da00c57ced8ea.png)子查询1\.什么是子查询需求:查询开发部中有哪些员工selectfromemp;通
Stella981 Stella981
3年前
SpringBoot整合Redis乱码原因及解决方案
问题描述:springboot使用springdataredis存储数据时乱码rediskey/value出现\\xAC\\xED\\x00\\x05t\\x00\\x05问题分析:查看RedisTemplate类!(https://oscimg.oschina.net/oscnet/0a85565fa
Easter79 Easter79
3年前
SpringBoot整合Redis乱码原因及解决方案
问题描述:springboot使用springdataredis存储数据时乱码rediskey/value出现\\xAC\\xED\\x00\\x05t\\x00\\x05问题分析:查看RedisTemplate类!(https://oscimg.oschina.net/oscnet/0a85565fa
Stella981 Stella981
3年前
Android蓝牙连接汽车OBD设备
//设备连接public class BluetoothConnect implements Runnable {    private static final UUID CONNECT_UUID  UUID.fromString("0000110100001000800000805F9B34FB");
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这