Apakah perbezaan antara vite dan webpack

Perbezaan: 1. Kelajuan permulaan pelayan webpack adalah lebih perlahan daripada vite; memandangkan vite tidak memerlukan pembungkusan semasa memulakan, tidak perlu menganalisis kebergantungan modul dan menyusun, jadi kelajuan permulaan adalah sangat pantas. 2. Kemas kini panas Vite lebih pantas daripada pek web; dari segi HRM Vite, apabila kandungan modul tertentu berubah, biarkan pelayar meminta semula modul tersebut. 3. Vite menggunakan esbuild untuk pra-membina kebergantungan, manakala webpack adalah berdasarkan nod. 4. Ekologi Vite tidak sebaik pek web, dan pemuat serta pemalam tidak cukup kaya.

Persekitaran pengendalian tutorial ini: sistem windows7, versi vue3, komputer DELL G3.

ditulis pada mulanya

• Baru-baru ini vite agak popular dan versi 2.0 telah dikeluarkan Pengarang vue juga mengesyorkan

• Seperti yang saya nyatakan dalam artikel sebelum ini, kekurangan vite ialah ekologi semasa tidak cukup webpack, tetapi selagi kekurangan ini boleh diperbaiki. kerana, terdapat kebarangkalian tinggi bahawa ia boleh menggantikan webpackKebanyakan pasaran semasa

Perbandingan komprehensif vite dan webpack

proses pembungkusan webpack

• 1 Kenal pasti fail kemasukan

• 2. Kenal pasti lapisan kebergantungan modul dengan lapisan. (Import commonjs, amd atau es6 akan dianalisis oleh webpack untuk mendapatkan kebergantungan kod)

• 3 Apa yang dilakukan oleh webpack ialah menganalisis kod. Tukar kod, susun kod dan keluarkan kod

• 4 Akhirnya bentuk kod yang dibungkus

pak web. prinsip pembungkusan

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

• 2 >

• 3 Proseskan kod dalam peringkat AST

• 4

Isi penting: Di sini anda perlu mengenal pasti kebergantungan secara rekursif dan membina graf kebergantungan. Objek graf adalah serupa dengan yang berikut

{ './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;' } }

prinsip vite

• Apabila mengisytiharkan jenis teg skrip sebagai modul

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

• Pelayar akan memulakan 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')

• Pelayar meminta fail main.js, mengesan bahawa ia mengandungi pakej yang diimport dan memulakan HTTP untuk rujukan import dalamannya untuk mendapatkannya fail kandungan modul

• seperti:

  GET http://localhost:3000/@modules/vue.js

• seperti:

  GET http://localhost:3000/src/App.vue

• adalah untuk merampas permintaan ini daripada penyemak imbas dan melakukan pemprosesan yang sepadan pada bahagian belakang untuk hanya mengurai dan menyepadukan fail yang digunakan dalam projek, dan kemudian mengembalikannya ke penyemak imbas vite dalam keseluruhan proses. Fail dibungkus dan disusun, jadi kelajuan berjalannya jauh lebih cepat daripada kelajuan pembangunan dan penyusunan

  asal! Vitewebpack

Kelemahan pek web satu. Permulaan pelayan perlahan

Apabila sejuk memulakan pelayan pembangunan, pendekatan berasaskan pembungkus adalah dengan bersemangat merangkak dan membina keseluruhan aplikasi anda sebelum menyampaikannya .

vite penambahbaikan

Vite dengan membahagikan modul dalam aplikasi kepada Kedua-dua kebergantungan dan kategori kod sumber meningkatkan masa permulaan pelayan pembangunan.
Pergantungan kebanyakannya adalah JavaScript tulen dan tidak akan berubah semasa pembangunan. Beberapa kebergantungan yang lebih besar (seperti perpustakaan komponen dengan ratusan modul) juga mahal untuk ditangani. Ketergantungan juga biasanya dibahagikan kepada sejumlah besar modul kecil dalam beberapa cara (seperti ESM atau CommonJS).
Vite akan menggunakan esbuild untuk pra-membina kebergantungan. Esbuild ditulis dalam Go dan 10-100x lebih cepat daripada kebergantungan pra-bangunan dengan pembungkus yang ditulis dalam JavaScript.
Kod sumber biasanya mengandungi beberapa fail yang bukan JavaScript secara langsung dan perlu ditukar (seperti komponen JSX, CSS atau Vue/Svelte), dan sering diedit. Pada masa yang sama, tidak semua kod sumber perlu dimuatkan pada masa yang sama. (cth. modul kod berdasarkan pemisahan laluan).
Vite menyajikan kod sumber dalam mod ESM asli. Ini pada asasnya membolehkan penyemak imbas mengambil alih sebahagian daripada kerja pembungkus: Vite hanya perlu berubah apabila penyemak imbas meminta kod sumber dan menyampaikannya atas permintaan. Kod yang diimport secara dinamik berdasarkan konteks, iaitu, hanya akan diproses apabila benar-benar digunakan pada skrin semasa.

Kelemahan Pek Web 2. Gunakan node.js untuk melaksanakan

penambahbaikan vite

Vite akan menggunakan
• kebergantungan pra-bina. Esbuild ditulis dalam Go dan 10-100x lebih cepat daripada kebergantungan pra-bangunan dengan pembungkus ditulis dalam

  . esbuild

Kelemahan maut pek web 3. Kemas kini panas tidak cekap

• Apabila dimulakan berdasarkan pembungkus, edit Selepas fail fail itu sendiri akan dibina semula. Jelas sekali kita tidak sepatutnya membina semula keseluruhan pakej, kerana kemudiannya kelajuan kemas kini akan menurun apabila saiz aplikasi berkembang.

• Sesetengah pelayan pembangunan pembungkus menyimpan binaan dalam memori supaya mereka hanya perlu menyahaktifkan sebahagian daripada graf modul apabila fail berubah[1], tetapi ia juga masih memerlukan keseluruhan Bina Semula dan muat semula halaman. Ini mahal, dan memuatkan semula halaman memadamkan keadaan semasa aplikasi, jadi pembungkus menyokong muat semula panas modul dinamik (HMR): membenarkan modul "mengganti panas" sendiri tanpa kesan pada halaman yang lain. Ini sangat meningkatkan pengalaman pembangunan - walau bagaimanapun, dalam amalan, kami mendapati walaupun kelajuan kemas kini HMR menurun dengan ketara apabila saiz apl bertambah.

penambahbaikan jemputan

• Di Vite, HMR dilakukan pada ESM asli . Semasa mengedit fail, Vite 只需要精确地使已编辑的模块与其最近的 HMR 边界之间的链失效（大多数时候只需要模块本身），使 HMR 更新始终快速，无论应用的大小.

• Vite juga menggunakan pengepala HTTP untuk mempercepatkan pemuatan semula keseluruhan halaman (sekali lagi membiarkan penyemak imbas melakukan lebih banyak untuk kami): Permintaan untuk modul kod sumber dirundingkan dan dicache mengikut 304 Not Permintaan modul Bergantung yang diubah suai akan dicache dengan kuat melalui Cache-Control: max-age=31536000, immutable, jadi sebaik sahaja ia dicache, ia tidak perlu diminta lagi.

kelemahan vite 1. Ekologi, ekologi, ekologi tidak sebaik webpack

• wepback adalah hebat Kelebihannya ialah pemuat dan pemalam sangat kaya, tetapi saya fikir ekologi hanya menunggu masa Vite semasa lebih seperti Mac cip M1 yang baru keluar pada masa itu M1 Mac dan membelinya tanpa ragu-ragu kini tiada masalah

kelemahan vite 2. Pembinaan persekitaran prod, kini menggunakan Rollup<. . ia belum digunakan secara besar-besaran dan banyak masalah atau permintaan yang tidak benar-benar terdedah>

• Hari Vite benar-benar bangkit adalah berkaitan dengan Vue3 Vue3 mula digunakan secara meluas dalam persekitaran pengeluaran, Vite kemungkinan besar akan diterima pakai secara perlahan oleh semua orang Mula menerima

Ringkasan

• Pelayan webpack bermula lebih perlahan daripada vite

Memandangkan Vite tidak memerlukan pembungkusan semasa memulakan, tidak perlu menganalisis kebergantungan modul dan menyusun, jadi kelajuan permulaan adalah sangat pantas . Apabila penyemak imbas meminta modul yang diperlukan, ia menyusun modul mod kompilasi dinamik atas permintaan ini sangat memendekkan masa penyusunan apabila projek lebih besar dan fail lebih banyak, kelebihan Vite semasa pembangunan menjadi lebih jelas

Vite hot update lebih pantas daripada webpack Vite Dari segi HRM, apabila kandungan modul berubah, biarkan sahaja pelayar meminta semula modul tersebut, bukannya meminta semula modul seperti webpack Susun semula semua dependensi modul ini; lebih pantas daripada nod

• Ekologi Vite tidak sebaik pek web, dan pemuat serta pemalam tidak cukup kaya
  [Berkaitan cadangan:
tutorial video vuejs
• ,

  pembangunan bahagian hadapan web

  】

Atas ialah kandungan terperinci Apakah perbezaan antara vite dan webpack. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!