技術文章 » react和webpack的區別是什麼

react和webpack的區別是什麼

2022-03-22 16:00:13

區別：1、React是一個JavaScript框架，而webpack是一個JavaScript應用程式的靜態模組打包器；2、React主要用於構建使用者介面，而webpack可以進行重新載入編譯，可將所有的靜態資源都合併，進而減少io請求。

本教學操作環境：Windows7系統、react17.0.1版、Dell G3電腦。

react是什麼

React是用於構建使用者介面的JavaScript框架。

框架：可以被複用的程式碼。用的人多了，就出名了，越有人越有價值。（笑）

與React齊名的Angular。

React是用於渲染UI的JS庫，定位在與實現UI

React Web App解決方案，衍生的React Native是跨屏App解決方案

特點：

  • 宣告式設計：宣告正規化

  • 高效：使用VDOM，減少DOM的互動

  • 靈活：與已知的庫或框架完好配合

  • JSX：一種獨立的語言，試圖解決很多JS的缺陷，ES6包含了幾乎所有JSX的特性

  • 元件：程式碼複用

  • 單向響應資料流：比雙向繫結更簡單，更快。

為什麼使用React?

傳統方法頻繁操作DOM，效能無法達到要求；React使用VDOM，效能高

傳統JS程式碼維護成本高，React基於元件開發

需要支援行動端開發

React的缺點：

  • 對於一直使用JS，jQuery的傳統前端，React非常不友好

  • React強調元件和狀態管理，其世界觀是面向程式語言的

  • Vue.js強調檢視的自動同步，其世界觀是面向UI指令碼的

  • React的學習成本較Vue.js高。

  • React沒有全家桶,只做UI

webpack是什麼

本質上，webpack 是一個現代 JavaScript 應用程式的靜態模組打包器(module bundler)。當 webpack 處理應用程式時,它會遞迴地構建一個依賴關係圖(dependency graph),其中包含應用程式需要的每個模組,然後將所有這些模組打包成一個或多個 bundle。

webpack 就像一條生產線,要經過一系列處理流程後才能將原始檔轉換成輸出結果。 這條生產線上的每個處理流程的職責都是單一的,多個流程之間有存在依賴關係,只有完成當前處理後才能交給下一個流程去處理。 外掛就像是一個插入到生產線中的一個功能,在特定的時機對生產線上的資源做處理。

webpack 通過 Tapable 來組織這條複雜的生產線。 webpack 在執行過程中會廣播事件,外掛只需要監聽它所關心的事件,就能加入到這條生產線中,去改變生產線的運作。 webpack 的事件流機制保證了外掛的有序性,使得整個系統擴充套件性很好。

webpack 構建流程

Webpack 的執行流程是一個序列的過程,從啟動到結束會依次執行以下流程 :

  • 初始化引數：從組態檔和 Shell 語句中讀取與合併引數,得出最終的引數。

  • 開始編譯：用上一步得到的引數初始化 Compiler 物件,載入所有設定的外掛,執行物件的 run 方法開始執行編譯。

  • 確定入口：根據設定中的 entry 找出所有的入口檔案。

  • 編譯模組：從入口檔案出發,呼叫所有設定的 Loader 對模組進行翻譯,再找出該模組依賴的模組,再遞迴本步驟直到所有入口依賴的檔案都經過了本步驟的處理。

  • 完成模組編譯：在經過第 4 步使用 Loader 翻譯完所有模組後,得到了每個模組被翻譯後的最終內容以及它們之間的依賴關係。

  • 輸出資源：根據入口和模組之間的依賴關係,組裝成一個個包含多個模組的 Chunk,再把每個 Chunk 轉換成一個單獨的檔案加入到輸出列表,這步是可以修改輸出內容的最後機會。

  • 輸出完成：在確定好輸出內容後,根據設定確定輸出的路徑和檔名,把檔案內容寫入到檔案系統。

在以上過程中,Webpack 會在特定的時間點廣播出特定的事件,外掛在監聽到感興趣的事件後會執行特定的邏輯,並且外掛可以呼叫 Webpack 提供的 API 改變 Webpack 的執行結果。

react和webpack的區別

React是一個JavaScript框架，是用於渲染UI的JS庫，用於構建使用者介面。

而webpack是一個打包器（bundler），它能將多個js檔案打包成一個檔案（其實不止能打包js檔案，也能打包其他型別的檔案，比如css檔案，json檔案等）。

webpack的作用

  • 進行重新載入編譯。實際就是將瀏覽器不認識的語法編譯成瀏覽器認識的語法。比如less編譯成css，ES6 語法 轉成 ES5等等。

  • 減少io請求。通常我們在請求後，會返回一個html到瀏覽器。這時，我們如果開啟控制檯，就會發現在html頁面通過script,link等標籤參照的靜態資源， 瀏覽器會再次發出請求去獲取這些資源。但是webpack的打包，將所有的靜態資源都合併好了，減少了io請求。

【相關推薦：Redis視訊教學】

以上就是react和webpack的區別是什麼的詳細內容，更多請關注TW511.COM其它相關文章！