vite和webpack的差別是什麼

區別：1、webpack伺服器啟動速度比vite慢；由於vite啟動的時候不需要打包，也就不需要分析模組依賴、編譯，所以啟動速度非常快。 2.vite熱更新比webpack快；vite在HRM方面，當某個模組內容改變時，就讓瀏覽器去重新請求該模組即可。 3.vite用esbuild預先建置依賴，而webpack基於node。 4.vite的生態不如webpack，載入器、插件不夠豐富。

本教學操作環境：windows7系統、vue3版，DELL G3電腦。

寫在開頭

• 最近的vite比較火，而且發布了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### 編寫的打包器預先建置依賴快 10-100 倍。 ###

webpack致命缺点3.热更新效率低下

• 当基于打包器启动时，编辑文件后将重新构建文件本身。显然我们不应该重新构建整个包，因为这样更新速度会随着应用体积增长而直线下降。

• 一些打包器的开发服务器将构建内容存入内存，这样它们只需要在文件更改时使模块图的一部分失活[1]，但它也仍需要整个重新构建并重载页面。这样代价很高，并且重新加载页面会消除应用的当前状态，所以打包器支持了动态模块热重载（HMR）：允许一个模块 “热替换” 它自己，而对页面其余部分没有影响。这大大改进了开发体验 - 然而，在实践中我们发现，即使是 HMR 更新速度也会随着应用规模的增长而显著下降。

vite改进

• 在 Vite 中，HMR 是在原生 ESM 上执行的。当编辑一个文件时，Vite 只需要精确地使已编辑的模块与其最近的 HMR 边界之间的链失效（大多数时候只需要模块本身），使 HMR 更新始终快速，无论应用的大小。

• Vite 同时利用 HTTP 头来加速整个页面的重新加载（再次让浏览器为我们做更多事情）：源码模块的请求会根据 304 Not Modified 进行协商缓存，而依赖模块请求则会通过 Cache-Control: max-age=31536000,immutable 进行强缓存，因此一旦被缓存它们将不需要再次请求。

vite缺点1.生态，生态，生态不如webpack

• wepback牛逼之处在于loader和plugin非常丰富,不过我认为生态只是时间问题，现在的vite,更像是当时刚出来的M1芯片Mac，我当时非常看好M1的Mac，毫不犹豫买了，现在也没什么问题

vite缺点2.prod环境的构建，目前用的Rollup

• 原因在于esbuild对于css和代码分割不是很友好

vite缺点3.还没有被大规模使用,很多问题或者诉求没有真正暴露出来

• vite真正崛起那一天，是跟vue3有关系的,当vue3广泛开始使用在生产环境的时候，vite也就大概率意味着被大家慢慢开始接受了

总结

• webpack服务器启动速度比vite慢

  由于vite启动的时候不需要打包，也就无需分析模块依赖、编译，所以启动速度非常快。当浏览器请求需要的模块时，再对模块进行编译，这种按需动态编译的模式，极大缩短了编译时间，当项目越大，文件越多时，vite的开发时优势越明显

• vite热更新比webpack快

  vite在HRM方面，当某个模块内容改变时，让浏览器去重新请求该模块即可，而不是像webpack重新将该模块的所有依赖重新编译；

• vite使用esbuild(Go 编写) 预构建依赖，而webpack基于nodejs, 比node快 10-100 倍

• vite生态不及webpack，加载器、插件不够丰富

【相关推荐：vuejs视频教程、web前端开发】

以上是vite和webpack的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！