1、對(duì)項(xiàng)目構(gòu)建的理解

先從瀏覽器出發(fā)， 瀏覽器是由瀏覽器內(nèi)核和JS引擎組成；瀏覽器內(nèi)核編譯解析html代碼和css代碼，js引擎編譯解析JavaScript代碼；所以從本質(zhì)上，瀏覽器只能識(shí)別運(yùn)行JavaScript、CSS、HTML代碼。 而我們?cè)诰帉戫?xiàng)目時(shí)，用到了less，ts等擴(kuò)展語言，vue等js框架，es6等低版本瀏覽器不能兼容的js語法，以及為了提高項(xiàng)目性能做的代碼壓縮,圖片資源壓縮等，把這些源代碼轉(zhuǎn)換成可以執(zhí)行的JavaScript、CSS、HTML 代碼稱之為項(xiàng)目構(gòu)建。 而vite和webpack是兩種不同的項(xiàng)目構(gòu)建打包工具。

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

2、Vite和Webpack對(duì)比

• 構(gòu)建速度（項(xiàng)目啟動(dòng)速度）和熱更新速度

  Vite 的構(gòu)建速度和熱更新速度更快，在大型項(xiàng)目中， Vite 甚至要比Webpack的構(gòu)建速度快幾十倍。

  原因分析：
  webpack: 分析依賴=> 編譯打包=> 交給本地服務(wù)器進(jìn)行渲染;隨著模塊的增多，打包出的bundle文件會(huì)越來越大，造成啟動(dòng)速度和熱更新速度越來越慢；webpack用js代碼編寫。
  Vite   : 啟動(dòng)服務(wù)器=> 請(qǐng)求模塊時(shí)按需動(dòng)態(tài)編譯顯示。通過在一開始將應(yīng)用中的模塊區(qū)分為依賴和源碼兩類，請(qǐng)求某個(gè)模塊時(shí)再對(duì)該模塊進(jìn)行實(shí)時(shí)編譯，因?yàn)楝F(xiàn)代游覽器本身支持ES-Module，所以會(huì)自動(dòng)向依賴的Module發(fā)出請(qǐng)求；使用esbuild預(yù)構(gòu)建依賴（esbuild也是一種js構(gòu)建工具，不過是用go純機(jī)器碼語言編寫），以原生的ES Modules向?yàn)g覽器提供源碼；
  

  構(gòu)建原理圖如下（vite官網(wǎng)抄的）：
  
  

• 上手度簡(jiǎn)易程度
  vite的配置相對(duì)來說更加簡(jiǎn)單，具體的配置方法請(qǐng)見官網(wǎng)：webpack中文官網(wǎng) vite官網(wǎng)

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

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