日韩黄色视频 - 日韩黄色视频在线观看 - 日韩黄色一级片 - 日韩黄色网址 亚洲毛片无码精品专区,午夜色福利视频,久久精品亚洲婷婷,国产91丝袜在线播放网站

一、什么是 Vite 

Vite 是 vue 的作者尤雨溪在開(kāi)發(fā) vue3.0 的時(shí)候開(kāi)發(fā)的一個(gè) web 開(kāi)發(fā)構(gòu)建工具。由于其原生 ES 模塊導(dǎo)入方式，可以實(shí)現(xiàn)閃電般的冷服務(wù)器啟動(dòng)。

二、Vite 和 Webpack 區(qū)別

Vite 優(yōu)勢(shì)：

1. vite 開(kāi)發(fā)服務(wù)器啟動(dòng)速度比 webpack 快
   webpack 會(huì)先打包，然后啟動(dòng)開(kāi)發(fā)服務(wù)器，請(qǐng)求服務(wù)器時(shí)直接給予打包結(jié)果。
   vite 在啟動(dòng)開(kāi)發(fā)服務(wù)器時(shí)不需要打包，也就意味著不需要分析模塊的依賴(lài)、不需要編譯，因此啟動(dòng)速度非?？?。當(dāng)瀏覽器請(qǐng)求某個(gè)模塊時(shí)，再根據(jù)需要對(duì)模塊內(nèi)容進(jìn)行編譯。這種按需動(dòng)態(tài)編譯的方式，極大的縮減了編譯時(shí)間，項(xiàng)目越復(fù)雜、模塊越多，vite的優(yōu)勢(shì)越明顯。
2. 由于現(xiàn)代瀏覽器本身就支持ES Module，會(huì)自動(dòng)向依賴(lài)的Module發(fā)出請(qǐng)求。vite充分利用這一點(diǎn)，將開(kāi)發(fā)環(huán)境下的模塊文件，就作為瀏覽器要執(zhí)行的文件，而不是像webpack那樣進(jìn)行打包合并。
3. vite 熱更新比 webpack 快
   在 HMR 方面，當(dāng)改動(dòng)了一個(gè)模塊后，vite僅需讓瀏覽器重新請(qǐng)求該模塊即可，不像webpack那樣需要把該模塊的相關(guān)依賴(lài)模塊全部編譯一次，效率更高。
4. vite 使用esbuild(Go 編寫(xiě)) 預(yù)構(gòu)建依賴(lài)，比 webpack 的 nodejs，快 10-100 倍。

Vite 劣勢(shì)：

1. 生態(tài)不及webpack，加載器、插件不夠豐富
2. 打包到生產(chǎn)環(huán)境時(shí)，vite使用傳統(tǒng)的 rollup（也可以自己手動(dòng)安裝webpack來(lái)）進(jìn)行打包
3. 項(xiàng)目的開(kāi)發(fā)瀏覽器要支持 ES Module，而且不能識(shí)別 CommonJS 語(yǔ)法

其他區(qū)別：

     1. 打包原理的區(qū)別

 

     2. 項(xiàng)目入口文件的區(qū)別
         項(xiàng)目根目錄的 index.html 是 Vite 項(xiàng)目的入口文件，而 webpack 的入口文件是 webpack 配置 entry 中指定的 js 文件。

三、Esbuild

Esbuild 是一款基于 Go 語(yǔ)言開(kāi)發(fā)的 javascript 打包工具，最大的一個(gè)特征就是快。

通過(guò)官網(wǎng)提供的一張圖，我們可以清晰的看到 Esbuild 的表現(xiàn)是多么優(yōu)秀:

Esbuild 之所以能這么快，主要原因有兩個(gè):

• Go 語(yǔ)言開(kāi)發(fā)，可以多線程打包，代碼直接編譯成機(jī)器碼；

  Webpack 一直被人詬病構(gòu)建速度慢，主要原因是在打包構(gòu)建過(guò)程中，存在大量的 resolve、load、transform、parse 操作(詳見(jiàn) 為什么有人說(shuō) vite 快，有人卻說(shuō) vite 慢？- 快速的冷啟動(dòng) )，而這些操作通常是通過(guò) javascript 代碼來(lái)執(zhí)行的。要知道，javascript 并不是什么高效的語(yǔ)言，在執(zhí)行過(guò)程中要先編譯后執(zhí)行，還是單線程并且不能利用多核 cpu 優(yōu)勢(shì)，和 Go 語(yǔ)言相比，效率很低。

• 可充分利用多核 cpu 優(yōu)勢(shì)；

關(guān)鍵 API - transfrom & build

Esbuild 并不復(fù)雜，它對(duì)外提供了兩個(gè) API：transform 和 build，使用起來(lái)非常簡(jiǎn)單。

transfrom，轉(zhuǎn)換的意思，將 ts、jsx、tsx 等格式的內(nèi)容轉(zhuǎn)化為 js。 transfrom 只負(fù)責(zé)文件內(nèi)容轉(zhuǎn)換，并不會(huì)生成一個(gè)新的文件。

build，構(gòu)建的意思，根據(jù)指定的單個(gè)或者多個(gè)入口，分析依賴(lài)，并使用 loader 將不同格式的內(nèi)容轉(zhuǎn)化為 js 內(nèi)容，生成一個(gè)或多個(gè) bundle 文件。

Esbuild 在 Vite 中的巧妙使用

我們來(lái)看看Vite 是怎么利用 Esbuild 來(lái)做預(yù)構(gòu)建和內(nèi)容轉(zhuǎn)換的。

預(yù)構(gòu)建

為什么要做預(yù)構(gòu)建？原因有兩點(diǎn):

• 將非 ESM 規(guī)范的代碼轉(zhuǎn)換為符合 ESM 規(guī)范的代碼；

• 將第三方依賴(lài)內(nèi)部的多個(gè)文件合并為一個(gè)，減少 http 請(qǐng)求數(shù)量；

middlewares 中內(nèi)容轉(zhuǎn)換

Vite 中源文件的轉(zhuǎn)換是在 dev server 啟動(dòng)以后通過(guò) middlewares 實(shí)現(xiàn)的。

當(dāng)瀏覽器發(fā)起請(qǐng)求以后，dev sever 會(huì)通過(guò)相應(yīng)的 middlewares 對(duì)請(qǐng)求做處理，然后將處理以后的內(nèi)容返回給瀏覽器。

middlewares 對(duì)源文件的處理，分為 resolve、load、transform、parser 四個(gè)過(guò)程：

1. resolve - 解析 url，找到源文件的絕對(duì)路徑；

2. load - 加載源文件。如果是第三方依賴(lài)，直接將預(yù)構(gòu)建內(nèi)容返回給瀏覽器；如果是業(yè)務(wù)代碼，繼續(xù) transform、parser。

3. transfrom - 對(duì)源文件內(nèi)容做轉(zhuǎn)換，即 ts -> js, less -> css 等。轉(zhuǎn)換完成的內(nèi)容可以直接返回給瀏覽器了。

4. parser - 對(duì)轉(zhuǎn)換以后的內(nèi)容做分析，找到依賴(lài)模塊，對(duì)依賴(lài)模塊做預(yù)轉(zhuǎn)換 - pre transform 操作，即重復(fù) 1 - 4。

   pre transform 是 Vite 做的一個(gè)優(yōu)化點(diǎn)。預(yù)轉(zhuǎn)換的內(nèi)容會(huì)先做緩存，等瀏覽器發(fā)起請(qǐng)求以后，如果已經(jīng)完成轉(zhuǎn)換，直接將緩存的內(nèi)容返回給瀏覽器。

Vite 在處理步驟 3 時(shí)，是通過(guò) esbuild.transform 實(shí)現(xiàn)的，對(duì)比 Webpack 使用各個(gè) loader 處理源文件，那是非常簡(jiǎn)單、快捷的。

四、關(guān)于 Vite 的一些其他知識(shí)

• 在工程中不是所有的引用模塊都是ES寫(xiě)法，可能是CommonJS 和 UMD 、AMD 等等，這個(gè)時(shí)候Vite 會(huì)進(jìn)行預(yù)構(gòu)建，將其轉(zhuǎn)換為ESM模塊，以支持Vite。
• 對(duì)于JSX、或者TS 等需要編譯的文件，Vite是用esbuild來(lái)進(jìn)行編譯的。

五、Webpack 和 Rollup 區(qū)別

經(jīng)驗(yàn)法則：對(duì)于應(yīng)用使用 webpack，對(duì)于類(lèi)庫(kù)使用 Rollup。

如果你需要代碼拆分(Code Splitting)，或者你有很多靜態(tài)資源需要處理，再或者你構(gòu)建的項(xiàng)目需要引入很多CommonJS模塊的依賴(lài)，那么 webpack 是個(gè)很不錯(cuò)的選擇。

如果您的代碼庫(kù)是基于 ES2015 模塊的，而且希望你寫(xiě)的代碼能夠被其他人直接使用，你需要的打包工具可能是 Rollup 。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.axaxx.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司