Was ist der Unterschied zwischen Vite und Webpack?

Unterschiede: 1. Die Startgeschwindigkeit des Webpack-Servers ist langsamer als die von Vite. Da Vite beim Start nicht gepackt werden muss, müssen keine Modulabhängigkeiten analysiert und kompiliert werden, sodass die Startgeschwindigkeit sehr hoch ist. 2. Das Hot-Update von Vite ist in Bezug auf HRM schneller. Wenn sich der Inhalt eines bestimmten Moduls ändert, muss der Browser das Modul einfach erneut anfordern. 3. Vite verwendet esbuild, um Abhängigkeiten vorab zu erstellen, während Webpack auf Knoten basiert. 4. Die Ökologie von Vite ist nicht so gut wie die von Webpack und die Loader und Plug-Ins sind nicht umfangreich genug.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.

Am Anfang geschrieben

• Der aktuelle vite ist sehr beliebt und wurde in der Version 2.0 veröffentlicht. Der Autor von vue empfiehlt ihn auch wärmstensvite比较火，而且发布了2.0版本，vue的作者也是在极力推荐

• 在之前的文章里面我提到过，vite的缺点在于目前的生态不够webpack成熟，但是只要能弥补这个缺点，便有很大概率能替代目前webpack的大部分市场

全方位对比vite和webpack

webpack打包过程

• 1.识别入口文件

• 2.通过逐层识别模块依赖。（Commonjs、amd或者es6的import，webpack都会对其进行分析。来获取代码的依赖）

• 3.webpack做的就是分析代码。转换代码，编译代码，输出代码

• 4.最终形成打包后的代码

webpack打包原理

• 1.先逐级递归识别依赖，构建依赖图谱

• 2.将代码转化成AST抽象语法树

• 3.在AST阶段中去处理代码

• 4.把AST抽象语法树变成浏览器可以识别的代码， 然后输出

重点:这里需要递归识别依赖，构建依赖图谱。图谱对象就是类似下面这种

{ './app.js':
   { dependencies: { './test1.js': './test1.js' },
     code:
      '"use strict";\n\nvar _test = _interopRequireDefault(require("./test1.js"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nconsole.log(test
1);' },
  './test1.js':
   { dependencies: { './test2.js': './test2.js' },
     code:
      '"use strict";\n\nvar _test = _interopRequireDefault(require("./test2.js"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nconsole.log(\'th
is is test1.js \', _test["default"]);' },
  './test2.js':
   { dependencies: {},
     code:
      '"use strict";\n\nObject.defineProperty(exports, "__esModule", {\n  value: true\n});\nexports["default"] = void 0;\n\nfunction test2() {\n  console.log(\'this is test2 \');\n}\n\nvar _default = tes
t2;\nexports["default"] = _default;' } }

vite原理

• 当声明一个 script 标签类型为 module 时

如：

 <script type="module" src="/src/main.js"></script>

• 浏览器就会像服务器发起一个GET

http://localhost:3000/src/main.js请求main.js文件：

// /src/main.js:
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

• 浏览器请求到了main.js文件，检测到内部含有import引入的包，又会对其内部的 import 引用发起 HTTP 请求获取模块的内容文件

• 如：GET http://localhost:3000/@modules/vue.js

• 如：GET http://localhost:3000/src/App.vue

• Vite 的主要功能就是通过劫持浏览器的这些请求，并在后端进行相应的处理将项目中使用的文件通过简单的分解与整合，然后再返回给浏览器，vite整个过程中没有对文件进行打包编译，所以其运行速度比原始的webpack开发编译速度快出许多！

webpack缺点一。缓慢的服务器启动

• 当冷启动开发服务器时，基于打包器的方式是在提供服务前去急切地抓取和构建你的整个应用。

vite改进

• Vite 通过在一开始将应用中的模块区分为 依赖 和 源码 两类，改进了开发服务器启动时间。

• 依赖 大多为纯 JavaScript 并在开发时不会变动。一些较大的依赖（例如有上百个模块的组件库）处理的代价也很高。依赖也通常会以某些方式（例如 ESM 或者 CommonJS）被拆分到大量小模块中。

• Vite 将会使用 esbuild 预构建依赖。Esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍。

• 源码 通常包含一些并非直接是 JavaScript 的文件，需要转换（例如 JSX，CSS 或者 Vue/Svelte 组件），时常会被编辑。同时，并不是所有的源码都需要同时被加载。（例如基于路由拆分的代码模块）。

• Vite 以 原生 ESM 方式服务源码。这实际上是让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入的代码，即只在当前屏幕上实际使用时才会被处理。

webpack缺点2.使用的是node.js去实现

vite改进

• Vite 将会使用 esbuild 预构建依赖。Esbuild 使用 Go 编写，并且比以 Node.js

🎜In meinem vorherigen Artikel Wie bereits erwähnt, besteht der Nachteil von vite darin, dass die aktuelle Ökologie nicht ausgereift genug für webpack ist. Solange dieser Mangel jedoch ausgeglichen werden kann, gibt es ein Hoch Wahrscheinlichkeit, dass es das aktuelle webpackcode> ersetzen kann. Die meisten Märkte🎜

🎜🎜Umfassender Vergleich von Vite und Webpack🎜🎜🎜🎜Webpack-Verpackungsprozess🎜🎜🎜 🎜🎜1. Identifizieren Sie die Eintragsdatei 🎜🎜🎜2. Identifizieren Sie Modulabhängigkeiten Schicht für Schicht. (Webpack analysiert den Import von Commonjs, amd oder es6, um die Codeabhängigkeiten zu erhalten)🎜🎜🎜3. Webpack analysiert den Code. Konvertieren Sie den Code, kompilieren Sie den Code und geben Sie ihn aus🎜🎜🎜4. Bilden Sie schließlich den gepackten Code🎜🎜🎜 Prinzip der Webpack-Verpackung 🎜🎜🎜🎜🎜1.Identifizieren Sie zuerst Abhängigkeiten Schritt für Schritt und erstellen Sie ein Abhängigkeitsdiagramm🎜🎜🎜2. Konvertieren Sie den Code in eine abstrakte AST-Syntax Baum🎜 🎜🎜3. Verarbeiten Sie den Code in der AST-Stufe 🎜🎜🎜4. Transformieren Sie den abstrakten AST-Syntaxbaum in Code, den der Browser erkennen kann, und geben Sie ihn dann aus 🎜 ul>🎜🎜Wichtige Punkte: hier Es ist notwendig, Abhängigkeiten rekursiv zu identifizieren und ein Abhängigkeitsdiagramm zu erstellen. Das Diagrammobjekt ähnelt dem folgenden 🎜🎜rrreee🎜🎜🎜🎜vite-Prinzip🎜🎜🎜🎜🎜Beim Deklarieren eines Skript-Tag-Typs als Modul🎜🎜Zum Beispiel: 🎜rrreee🎜🎜🎜Der Browser Der Server initiiert ein GET🎜rrreee🎜🎜🎜Der Browser fordert die Datei main.js an, erkennt, dass sie das durch den Import eingeführte Paket enthält, und initiiert eine HTTP-Anfrage, um das Modul dafür zu erhalten interne Importreferenz. Die Inhaltsdatei 🎜🎜🎜wie zum Beispiel: GET http://localhost:3000/@modules/vue.js🎜🎜🎜wie zum Beispiel: GET http:/ Die Hauptfunktion von /localhost:3000/src/App.vue🎜🎜🎜Vite besteht darin, diese Anfragen vom Browser zu kapern und zu verarbeiten Dementsprechend werden die im Projekt verwendeten Dateien einfach zerlegt und integriert und dann an den Browser zurückgegeben. Vite verpackt und kompiliert die Dateien nicht während des gesamten Prozesses, sodass seine Ausführungsgeschwindigkeit viel schneller ist als der ursprüngliche Webpack Entwicklungs- und Kompilierungsgeschwindigkeit viele! 🎜🎜🎜Webpack-Nachteil 1. Langsamer Serverstart🎜🎜🎜🎜🎜 Beim Kaltstart eines Entwicklungsservers besteht der Packager-basierte Ansatz darin, Ihre gesamte Anwendung eifrig zu crawlen und zu erstellen, bevor sie bereitgestellt wird. 🎜🎜🎜vite-Verbesserungen🎜🎜🎜🎜🎜Vite unterscheidet die Module in der Anwendung zu Beginn in Abhängigkeiten und Quellcode Zwei Kategorien: verbesserte Startzeit des Entwicklungsservers. 🎜🎜🎜Abhängigkeiten sind größtenteils reines JavaScript und werden sich während der Entwicklung nicht ändern. Einige größere Abhängigkeiten (z. B. Komponentenbibliotheken mit Hunderten von Modulen) sind ebenfalls teuer in der Handhabung. Abhängigkeiten werden normalerweise auch auf irgendeine Weise in eine große Anzahl kleiner Module aufgeteilt (z. B. ESM oder CommonJS). 🎜🎜🎜Vite verwendet esbuild, um Abhängigkeiten vorab zu erstellen. Esbuild ist in Go geschrieben und ist 10–100 Mal schneller als die Vorerstellung von Abhängigkeiten mit in JavaScript geschriebenen Packagern. 🎜🎜🎜Quellcode enthält normalerweise einige Dateien, die nicht direkt JavaScript sind und konvertiert werden müssen (z. B. JSX-, CSS- oder Vue/Svelte-Komponenten) und werden häufig bearbeitet. Gleichzeitig muss nicht der gesamte Quellcode gleichzeitig geladen werden. (z. B. Codemodule basierend auf Routenaufteilung). 🎜🎜🎜Vite stellt Quellcode im nativen ESM-Modus bereit. Dadurch kann der Browser im Wesentlichen einen Teil der Arbeit des Packagers übernehmen: Vite muss nur transformieren, wenn der Browser Quellcode anfordert, und ihn bei Bedarf bereitstellen. Code, der kontextabhängig dynamisch importiert wird, d. h. nur dann verarbeitet wird, wenn er tatsächlich auf dem aktuellen Bildschirm verwendet wird. 🎜🎜🎜Webpack-Nachteil 2. Es verwendet node.js zur Implementierung🎜
🎜

🎜🎜🎜Vite-Verbesserungen🎜
🎜🎜🎜🎜Vite verwendet esbuild, um Abhängigkeiten vorab zu erstellen. Esbuild ist in Go geschrieben und ist 10–100 Mal schneller als die Vorerstellung von Abhängigkeiten mit Packagern, die in Node.js geschrieben sind. 🎜

Webpack Fataler Nachteil 3. Hot-Update ist ineffizient

• Beim Start basierend auf dem Packager wird die Datei selbst nach der Bearbeitung der Datei neu erstellt. Natürlich sollten wir nicht das gesamte Paket neu erstellen, da dann die Aktualisierungsgeschwindigkeit mit zunehmender Anwendungsgröße sinkt.

• Die Entwicklungsserver einiger Paketierer behalten den Build im Speicher, sodass sie nur einen Teil des Moduldiagramms deaktivieren müssen, wenn sich Dateien ändern [1], aber es erfordert auch immer noch einen kompletten Neuaufbau und ein Neuladen der Seite. Dies ist teuer und durch das Neuladen der Seite wird der aktuelle Status der Anwendung gelöscht. Daher unterstützt der Packager das dynamische Modul-Hot-Reloading (HMR): Es ermöglicht einem Modul, sich selbst im laufenden Betrieb zu ersetzen, ohne dass dies Auswirkungen auf den Rest der Seite hat. Dies verbessert die Entwicklungserfahrung erheblich – in der Praxis haben wir jedoch festgestellt, dass selbst die Aktualisierungsgeschwindigkeit von HMR mit zunehmender App-Größe deutlich abnahm.

vite-Verbesserungen

• In Vite wird HMR auf nativem ESM durchgeführt. Beim Bearbeiten einer Datei, Vite 只需要精确地使已编辑的模块与其最近的 HMR 边界之间的链失效（大多数时候只需要模块本身），使 HMR 更新始终快速，无论应用的大小.

• Vite verwendet außerdem HTTP-Header, um das Neuladen der gesamten Seite zu beschleunigen (wodurch der Browser wiederum mehr für uns tun kann): Quellmodulanforderungen werden gemäß 304 Not Modified ausgehandelt und zwischengespeichert, während abhängige Modulanforderungen durchlaufen werden Cache -Control: max-age=31536000,immutable führt starkes Caching durch, sodass sie nach dem Zwischenspeichern nicht erneut angefordert werden müssen.

Vite Nachteile 1. Ökologie, Ökologie, Ökologie ist nicht so gut wie Webpack

• Das Tolle an Wepback ist, dass der Loader und das Plugin sehr umfangreich sind, aber ich denke, Ökologie ist nur eine Frage Der M1-Mac war damals gerade erst auf den Markt gekommen und ich habe ihn ohne zu zögern gekauft.

vite Nachteile 2. Der Aufbau der Produktumgebung verwendet derzeit Rollup

• Der Grund dafür ist, dass esbuild nicht sehr freundlich zu CSS und Code-Splitting ist

vite Nachteil 3. Es wurde nicht in großem Umfang verwendet. und viele Probleme oder Anforderungen wurden nicht wirklich offengelegt

• Der Tag, an dem Vite wirklich aufsteigt, hat etwas mit vue3 zu tun. Wenn vue3 in Produktionsumgebungen weit verbreitet ist, wird Vite höchstwahrscheinlich langsam akzeptiert Jeder

Zusammenfassung

• Der Webpack-Server startet schneller als Vite Langsam

  Da Vite beim Start nicht gepackt werden muss, besteht keine Notwendigkeit, Modulabhängigkeiten zu analysieren und zu kompilieren Die Startgeschwindigkeit ist sehr hoch. Wenn der Browser das erforderliche Modul anfordert, kompiliert er das Modul bei Bedarf erheblich. Wenn das Projekt größer ist und mehr Dateien vorhanden sind, werden die Entwicklungsvorteile von Vite deutlicher ist in Bezug auf HRM schneller als Webpack

vite. Wenn sich der Inhalt eines Moduls ändert, lassen Sie den Browser das Modul einfach erneut anfordern, anstatt alle Abhängigkeiten des Moduls wie Webpack neu zu kompilieren.

• vite verwendet esbuild ( geschrieben in Go), um Abhängigkeiten vorab zu erstellen, während Webpack auf NodeJS basiert, was 10-100 Mal schneller ist als Node

• vites Ökologie ist nicht so gut wie Webpack und die Loader und Plug-Ins sind nicht umfangreich genug

• [Verwandte Empfehlungen:

  vuejs Video-Tutorial
,

Web-Front-End-Entwicklung

】

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen Vite und Webpack?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!