1、對項目構建的理解

先從瀏覽器出發， 瀏覽器是由瀏覽器內核和JS引擎組成；瀏覽器內核編譯解析html代碼和css代碼，js引擎編譯解析JavaScript代碼；所以從本質上，瀏覽器只能識別運行JavaScript、CSS、HTML代碼。 而我們在編寫項目時，用到了less，ts等擴展語言，vue等js框架，es6等低版本瀏覽器不能兼容的js語法，以及為了提高項目性能做的代碼壓縮,圖片資源壓縮等，把這些源代碼轉換成可以執行的JavaScript、CSS、HTML 代碼稱之為項目構建。 而vite和webpack是兩種不同的項目構建打包工具。

項目構建包括以下內容：
代碼轉換：將 TypeScript編譯成JavaScript 、將Less編譯成css等。
文件優化：壓縮JavaScript、 CSS、HTML 代碼，壓縮合并圖片等。
代碼分割: 提取多個頁面的公共代碼，提取首屏不需要執行部分代碼讓其異步加載。
模塊合并：在采用模塊化的項目里會有很多個模塊和文件，需要通過構建功能將模塊分類合并成一個文件。
熱更新：監聽本地源代碼變化，自動重新構建、刷新瀏覽器。
代碼校驗：在代碼被提交到倉庫前需要校驗代碼是否符合規范，以及單元測試是否通過。
自動發布：更新代碼后，自動構建出線上發布代碼并傳輸給發布系統。

2、Vite和Webpack對比

• 構建速度（項目啟動速度）和熱更新速度

  Vite 的構建速度和熱更新速度更快，在大型項目中， Vite 甚至要比Webpack的構建速度快幾十倍。

  原因分析：
  webpack: 分析依賴=> 編譯打包=> 交給本地服務器進行渲染;隨著模塊的增多，打包出的bundle文件會越來越大，造成啟動速度和熱更新速度越來越慢；webpack用js代碼編寫。
  Vite   : 啟動服務器=> 請求模塊時按需動態編譯顯示。通過在一開始將應用中的模塊區分為依賴和源碼兩類，請求某個模塊時再對該模塊進行實時編譯，因為現代游覽器本身支持ES-Module，所以會自動向依賴的Module發出請求；使用esbuild預構建依賴（esbuild也是一種js構建工具，不過是用go純機器碼語言編寫），以原生的ES Modules向瀏覽器提供源碼；
  

  構建原理圖如下（vite官網抄的）：
  
  

• 上手度簡易程度
  vite的配置相對來說更加簡單，具體的配置方法請見官網：webpack中文官網 vite官網

• 生態豐富度
  vite是尤大大在2021年時推出的新一代前端構建工具，相對于webpack來說，推出時間距今非常的短，缺少很多擴展功能，Webpack 的生態環境更加成熟，在社區中擁有廣泛的支持和豐富的插件庫。可以處理多種類型的文件和資源。

• 瀏覽器兼容性
  Webpack 支持所有符合 ES5 標準 的瀏覽器（不支持 IE8 及以下版本）。webpack 的 import() 和 require.ensure() 需要 Promise。如果你想要支持舊版本瀏覽器，在使用這些表達式之前，還需要 提前加載 polyfill。
  默認情況下，Vite 的目標瀏覽器是指能夠 支持原生 ESM script 標簽 和 支持原生 ESM 動態導入 的。所以vite很多低版本的瀏覽器并不兼容，vite也可以對這個問題進行配置。