页面不见了――星空见康网

返回……

百度知道 - 信息提示

 | 

 | 

京ICP证030173号-1   京网文【2013】0934-983号     ©2022Baidu  

 | 

B乎问题：通俗的解释下Vite能用来干嘛？是怎么回事？ - 云+社区 - 腾讯云

云+社区翻译社勋章

分享文章到朋友圈

海报分享

最近在B乎看到了这么一个问题，能不能通俗地讲 Vite 到底是用来干嘛的，一开始觉得这个问题没什么意思，因为 Vite 这个话题有太多的人讲了。

但是我看了看其他的回答，大部分都会从 Vite 的特性，ES Modules 去讲整件事情，然后还是会时不时要和 webpack 去做比较。

而且我又仔细看了看题主的疑问。

我也陷入了深深的思考，到底是大家学习一些新知识的时候急迫了呢？还是说前端常常容易把一些简单的东西复杂化，容易形成套娃式的知识？又或者是知识太零散了，分不清到底是哪些是有关系的？

我打开了 Vite 的官网，他的标语是 「 下一代前端开发与构建工具」，因为一般标语需要言简意赅地表达出它的意思，所以会用最精简的去概括（也是为了宣传）。我认为确实也没有啥毛病，但是对于一些新手而且，确实这句话不知所云，官网也没有足够清楚的图，如果是一些不了解的人，确实也容易迷失。

那么这句话到底要表达出什么意思呢？我用通俗的话表述了一遍（可能不一定准确，仅代表个人的理解）：

很多人会从

、

、

、

各种方向来讲解它，更像是在说它的优点，我觉得有点

了，所以才让它变得那么神秘（迷惑）？

而在我看来

就是一个转化器，而 Webpack 就是 模块器 + 转化器。

转化器的用途就是，

，Vite 做的核心就是这个。什么用

快啊，都是浏览器自己的功劳，浏览器统一了模块化方案，Vite 只是吃了一波浏览器的性能红利而已。

用一张图来描述就是（这里我盗用了 Webpack 的官方图，改了改）

就是把所有的资源都转化成了 js 的形式去引入，因为浏览器只支持 js 文件的

方式，毕竟

属于

规范，当然只能是适用于 js 了。而整个模块化过程都是浏览器的功劳。

这里再来看看 Webpack 的整体流程图，如果你对 Webpack 了解，可能能加深印象，但是不了解 webpack 也没关系。

由于 Webpack 要自己的模块化方式，因此需要将所有的资源都打包成一个 js，这个图很形象地解释了 Webpack 的作用。（对于不了解 Webpack 的也没有关系，知道 Vite 的图就够了。）

我举一个例子，可能能让你更加清楚地去理解 Vite 的真面目。

在

装一个

， 然后启动这个 html， 然后我们随便改点东西，可以看到，更新速度的非常快。

也许你会说，我文件数量太少了，没事，我们这次来整活20个文件。

所以我说，

但是尽管浏览器解决了模块化的依赖，依旧是有两个问题：

所以，才会有我们看到 Vite 仿佛又做了很多事情，因为 Vite 能够去加载 .ts/.vue/.svelte 等文件, 它整合了很多插件去做这些转化工作，将所有的资源都转化成浏览器可识别的 js 的方式去导入，将 css 文件经过包装，转化为一个 js 文件等等。

剩余的就是原文件中的内容替换，因为类似于像第三方包中的资源没办法直接引入，需要做一层替换，例如一下代码就被转化成了这样。

在编译的时候需要去替换我们实际写代码的地址，去让浏览器加载，然后为了不让浏览器加载文件太多，还要将第三方包导成一个模块，然后还有热更新功能(这部分功能稍微复杂一些)。并且为了能够在生产环境打包（Tree shaking / 压缩啊，等等之前常规的优化），使用了 Rollup ，不仅提供了 ESM 的打包方式，以及你需要的其他模块化方式（umd/amd/cmd/iife）。

因此核心是简单的，但是相关的生态想要好用，却是要花大量的精力，Vite 团队也是花了大力气去解决了周边的生态问题，各种插件的适配啊等等。

而首次提出利用浏览器原生ESM能力的工具并非是Vite，而是一个叫做Snowpack的工具（可以看我这篇文章

）。前身是

，从1.x版本开始更名为Snowpack。

Snowpack在其官网是这样进行自我介绍的：“Snowpack是一种闪电般快速的前端构建工具，专为现代Web设计。它是开发工作流程较重，较复杂的打包工具（如Webpack或Parcel）的替代方案。Snowpack利用JavaScript的模块化方式（称为ESM）来避免不必要的工作并保持流畅的开发体验”。

为此，Pika团队开发并维护了两个技术体系：构建相关的Snowpack和造福大众的Skypack。其中 skypack 上还有很多特殊处理过的 ES Modules 形式的包（例如 React 等）直接用来调用，由于那些包原先是不支持 ES Modules 形式，他们单独维护了 ES Modules 版本。

看完了 ES Modules 的现状以及 Vite 的本质，我们就再来把模块化来回顾一下，这样整个时间线就完整了以及我们的开发方式变化到现在，Web 真的做出了巨大的努力。

把时间回退到2006年，这个时候

刚呱呱落地，那个时候虽然没有模块化，使用 jQuery 相比传统那样写已经提高极大的速度，当然虽然已经很方便了，单还是阻挡不了爱研究的程序员们。

在2009年的时候

诞生了，但是

由于有两个重要问题没能得到解决，所以迟迟不能推广到浏览器上。（1.由于外层没有

包裹，被导出的变量会暴露在全局中。2.在服务端

一个模块，只会有磁盘 I/O，所以同步加载机制没什么问题；但如果是浏览器加载，一是会产生开销更大的网络 I/O，二是天然异步，就会产生时序上的错误。）中间百家争鸣（

）一直到2016年5月，经过了两年的讨论，ECMAScript 6.0 终于正式通过决议，成为了国际标准。在这一标准中，首次引入了

和

两个 JavaScript 关键字，并提供了被称为

的模块化方案。在 JavaScript 出生的第 21 个年头里，JavaScript 终于迎来了属于自己的模块化方案。而在这期间想要使用模块化，只能通过打包工具来解决。

有了标准之后，也不是能立马让所有设备都支持

因为浏览器的推进是一个漫长的过程，不像服务端，如果做一个升级，只需要对服务端升级，而浏览器的升级伴随着电脑/手机等一系列的因素，因素非常不可控，因为用户总是可以有多种多样的选择，

是 JavaScript 官方的标准化模块系统，而它这一走，却在标准化的道路上已经花费了近 10 年的时间。在2018 年 5 月 Firefox 60 发布之后，所有的主流浏览器就都支持

了。直到现在，

还并不能真正地用在生产环境使用，还是需要转化成以旧的方式（非ESM方式）。

当回答完这个问题的时候，不禁会想，前端的发展过程中却是会有一些新瓶装旧酒的东西，然后神话它，然后让小白觉得它很高大上，让人惧怕，然后大佬就会觉得这个东西很简单，也不愿意去拆解它，是否我们需要转化一些思考，当我们讲一个东西的时候，剥离那些高大上的词汇，做一些更加亲民的解释？当然我不否则这些新的工具带来的便利以及背后的付出，但是亲民是否也是一种方式，或许会变得更加美好？答案我也不得而知，本文只是作出了自己的一个思考，如有错误请大家批评指出。

https://segmentfault.com/a/1190000039370642

本文分享自微信公众号 -

秋风的笔记（qiufengnote）

，作者：蓝色的秋风

原文出处及转载信息见文内详细说明，如有侵权，请联系

yunjia_community@tencent.com

删除。

原始发表时间：

2021-08-10

本文参与

，欢迎正在阅读的你也加入，一起分享。

本文最终实现的简易版 vite 可通过github 地址(https://github.com/levelyu/simple-vite)下载，代码实现地较为简单...

在进行正式的分享之前，先来说一说为什么，要学习 Rust 这一门在广义上归属于后端的语言，以及它能带给我们什么，未来有什么前景。

本来这篇文章的知识点是给我下一次出去蜕变准备的，学历干不过人家，只能在一个领域深入打磨扎根，除了技术，业务也要懂点，成为这个领域带砖头的砖家，下次流浪到社会才能...

从 2021 年元旦 Vite 发布 2.0 Beta 版就一直在关注 Vite 的动态，借着春节放假有时间，而且 Vue 3.0 和 Vite 2.0 都才大...

大家好，我是零一。最近在社区看到一个让人惊讶的消息，近20k Star的构建工具库 Snowpack的作者 Fred K.Schott （文中简称Fred）表示...

看完上一个章节，相信你已经充分的掌握代理的套路，猿人工厂君也知道，内容对于新手而言，理解起来还是比较很吃力的，文中提到的其他方式，大家可以去尝试实现，猿人工厂君...

Web Components 实际上和现在 React/Vue 等前端框架的组件概念十分相似，或者倒不如说 Vue 的 SFC（单文件组件）其实正是借鉴自 We...

这几天整理了一下vue的几种使用方式，对比之后发现有很多相似之处，那么是不是可以混合使用呢？比如这样：

关于 Vite，来看看作者本人怎么说。本视频是 Vue 以及 Vite 作者 尤雨溪 在 2021 年 2 月 12 日在 Twitch 上做客 GitHub ...

一开始我是拒绝的，从 grunt、gulp ，到 Webpack、Rollup、Snowpack 以及若干知名不知名构建框架，都2021了，还来？然后试用了一下...

一开始我是拒绝的，从 grunt、gulp ，到 Webpack、Rollup、Snowpack 以及若干知名不知名构建框架，都2021了，还来？然后试用了一下...

数据通信的种类有：串行通信、并行通信。不管是什么类型的通信，再怎么复杂的，也是在这两种上面衍生出来的。

vite 实际上就是一个面向现代浏览器，基于 ES module 实现了一个更轻快的项目构建打包工具。

在上一节中, 我们提到了Flowable 和Backpressure背压, 本来这一节的确是想讲这两个东西的，可是写到一半感觉还是差点火候，感觉时机未到， 因此...

临近过年，很多小伙伴已经回家和亲戚朋友团聚，长时间不见，自然少不了嘘寒问暖灵魂拷问的环节。

来源：zhihu.com/question/52994936/answer/958545980

OK，回到正题。说到事务的四大特性原子性（Atomicity）、一致性（Consistency）、隔离性（Isolation）、持久性（Durability），...

网络编程能力对于即时通讯技术开发者来说是基本功，而计算机网络又是网络编程的理论根基，因而深刻准确地理解计算机网络知识显然能夯实你的即时通讯应用的实践品质。 本...

为了解决SRS WebRTC推流， 转RTMP后音视频时间戳不同步， 导致的后续HLS切片，FLV/RTMP播放音画不同步等问题，我提交了一个PR：https:...

云+社区翻译社勋章

Copyright © 2013 - 2022 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

扫码关注云+社区

领取腾讯云代金券

IDC机房_百度百科

中国通信学会是全国通信...

提供资源类型：

通俗解释k8s干嘛的？k8s干嘛的？ - 云+社区 - 腾讯云

云+社区翻译社勋章

分享文章到朋友圈

海报分享

微服务，你有100万用户，是不是起码得100台云主机？100台云主机你怎么部署？运行着 ，主机停电死掉了，你怎么知道哪些死掉了？停机上的主机的服务是不是要移动到正常的主机上？100台主机的运维 K8S就诞生了！

一开始只有docker，因为有docker才有k8s，k8s特点就是所有主机上都装上docker，然后用k8s把这些连接起来。

那么100台主机对于操作的人来说，也就相当于1台主机。

例如下图，我这是3台主机组成的，我不用关心部署在什么地方，只要我启动了docker镜像，它会选择一台主机部署应用，

觉得某个服务运算不过来了，加！如果在某个机器死了，它会自动把应用转移到其它服务器上。

我现在自动化部署的步骤 结合K8S是这样的，docker bulid 成镜像，推送到私有镜像库，然后触发K8S构建。K8S 构建也是特别的，它会应用启动完才关闭之前的应用，无缝衔接。

而且它还有个功能，它能加入配置，配置默认变成 linux环境变量，或者还可以变成文件，这就解决了之前说的正式环境的配置不想被人看见。

本文参与

，欢迎正在阅读的你也加入，一起分享。

微服务，你有100万用户，是不是起码得100台云主机？100台云主机你怎么部署？运行着 ，主机停电死掉了，你怎么知道哪些死掉了？停机上的主机的服务是不是要移动...

最近在B乎看到了这么一个问题，能不能通俗地讲 Vite 到底是用来干嘛的，一开始觉得这个问题没什么意思，因为 Vite 这个话题有太多的人讲了。

Kubernetes 集群中，域名解析离不开 DNS 服务，在 Kubernetes v1.10 以前集群使用 kube-dns dns服务，后来在 Kuber...

一看Maven之痛就知道是Java程序员。在与GraalVM匹配的Micronuat和Quarkus两个架构没成熟之前，Java在云原生领域非常尴尬。成熟的架构...

最近业余时间调研了一下在GitLab CI/CD中部署应用到Kubernetes的方案。这是一个老生常谈的话题，很多粉丝和读者问我如何部署应用到K8s中。其实思...

在设计模式中，Socket其实就是一个门面模式，它把复杂的TCP/IP协议族隐藏在Socket接口后面，对用户来说，一组简单的接口就是全部，让Socket去组织...

注解（Annotation），也叫元数据。一种代码级别的说明。它是JDK1.5及以后版本引入的一个特性，与类、 接口、枚举是在同一个层次。它可以声明在包、类、字...

features 包里的代码，主要是用于构建 Spark 在 K8S 中的各类资源所需要的特征，个人觉得可以理解成这些 features 就是帮你写各类 Kin...

从今天起,我们开始研究k8s ,之所以叫k8s,是因为Kubernetes这个单词的K和S之间还有8个字母,为了方便书写,就直接用8来代替.国外也会偷懒,这...

回想最开始接触 k8s 的时候, 经常搞不懂 CRI 和 OCI 的联系和区别, 也不知道为啥要垫那么多的 “shim”(尤其是 containerd-shim...

这是来自官方文档的介绍。就我理解而言，polyaxon依靠k8s部署在集群上，可以自主分配需要集群资源，创建简单，可重复，可移植的部署，依靠docker定制运行...

　　Python是一门解释型，弱类型，高级开发编程语言；可广泛应用于众多领域，如：网页开发，数据分析，爬虫等众多领域。

最近一个月大蕉断更了，主要就在做一些跟 k8s 相关的事情，就在昨天刚刚交付产品了一个版本，这几周几乎把大蕉榨干了。但是大蕉从来不是一个怕事的人，干就完了，一个...

今日洞见 文章作者/配图来自ThoughtWorks：高清华。 本文所有内容，包括文字、图片和音视频资料，版权均属ThoughtWorks公司所有，任何媒体、网...

容器是利用了集装箱的思想，把可运行程序打包成可运行、自包含、标准化的镜像。通过K8S能够管理和编排我们打的镜像，举例来说，如果你想运行两个副本，直接在编排文件中...

最近被业务折腾的死去活来，实在没时间发帖，花了好多个晚上才写好这篇帖子，后续会加油的！

作者：oonamao毛江云，腾讯 CSIG 应用开发工程师 写在前面 笔者今年 9 月从端侧开发转到后台开发，第一个系统开发任务就强依赖了 K8S，加之项目任务...

lz_rec_push_kafka_consume 该项目通过kafka与算法进行交互，通过push推荐平台（lz_rec_push_platform）预生成消...

云原生技术干货文章合集，来咯~ 2020 年，要说咱们技术圈子里什么最火？ 云原生肯定是那 NO.1 截止目前，我们不难看出，K8s 容器、服务网格、...

云+社区翻译社勋章

Copyright © 2013 - 2022 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

扫码关注云+社区

领取腾讯云代金券

什么是IDC？IDC数据中心什么意思？_xiaoyun2019的博客-CSDN博客_idc是什么

作为一位从事网络工作者，一直租用过虚拟主机、服务器租用等。但是对于IDC这三个英文是一直都不太懂是什么意思。相信很多从事网络，也许也不懂是什么意思？现在宵云网络小编给大家讲述一下：什么IDC？IDC数据中心什么意思？

IDC翻译过来的字面意思就是数据中心，它首要是为企业、媒体、网站供给大规模、高质量、安全可靠的互联网服务，首要包含：服务器托管、网站空间租用、带宽批发等业务。加上现在的idc服务商许多，使得许多企业、政府单位、教育机构等单位不必再去建造自己的机房，也无需聘请专门的技术人员去进行保护办理，这样以来便可以节约很大一部分的费用。从idc职业开展史来看，上世纪60时代，大型机时期数据备份可以说是IDC的雏形。而随着互联网的快速开展，随之步入了网络时代，各行各业的公司和个人都开端纷繁树立网站，网站是需要放在服务上运转的，而服务器的运作对周围环境的要求极高，并且还需要专门的技术人员保护，这就促进了许多企业需要一个好的机房和数据中心来放置网站，idc数据中心由此就诞生了。

有了IDC数据中心，企业可以将与网站托管服务相关的一切业务交给IDC网络服务商来做，自己就可以把精力和时间放在产品研制和运作上，更能促进企业的前进和开展。

IDC数据中心有两个明显的特征，分别是在网络中的位置和总的网络带宽容量，二者构成了网络根底资源的一部分，像骨干网、接入网相同，IDC供给了一种高端的数据传输接入服务。

扫一扫，分享内容

打赏作者

宵云建站

你的鼓励将是我创作的最大动力

您的余额不足，请更换扫码支付或

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。

2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。