如何看待 Web 開發構建工具 Vite?

時間 2021-05-08 17:26:11

1樓:陳隨易

這個問題,我覺得。

目前的前端,不僅僅只是某幾個技術層面的問題。

更多的是,工程化問題,開發效率問題,後期維護問題。

vite只是在技術層面進行了探索,而且還是半隻腳的邁出去的那種。

目前的集大成者終究還是webpack。

對於大部分中小企業來說,什麼技術其實不重要。

最重要的是,如何提高開發效率,減少用人和招人成本,如何增加專案的可維護性。

在這個方向上的思考,我基於目前最易用的前端vue框架+最強大的打包器webpack,封裝了乙個可以替代vue-cli進行前端專案快速開發和維護的腳手架:

chenbimo/yipack-cli

我希望你能看一眼,或者,更進一步使用一下。

那麼。我想。

你會忘掉vite。

2樓:小烏龜

webpack 下,web 開發和 node.js 後台開發的思路是一致的,vite 這種依賴瀏覽器的機制場景是否過小,適應範圍太窄?

而且 webpack 打包速度慢是不是配置得有問題?webpack 只是乙個通用打包框架而已,快慢看用什麼具體的工具去做,而不是 webpack 這個思路有問題。

總體來說,對這個工具持懷疑態度。

3樓:伊撒爾

首先,vite 其實不能算作是打包工具,它其實只是乙個 server,真正的打包工作還是移交給 esbuild,rollup 等工具

所以單純從打包這個角度來說,vite,snowpack,wmr 這類工具是不負責打包的,與其說將它視作 webapck 的替代品,不如將它視作 vue-cli 的替代品

但無論如何,砍掉 webpack 的目標是正確的,但這類輪子也有一些缺陷:

只針對 web 專案,也就是必須有 native module 的特性以及瀏覽器檔案系統的支援才行

模型太簡單,太容易復刻,導致很難大一統

綜上所述,結論就是,對於單純的 web 專案是很贊的,但因為實現太簡單,未來會會和 cli 工具一樣人手乙個

當然,奔著同樣搞死 webapck 的目標,我也寫了適合我們公司業務的打包工具

和 vite 這類工具不一樣,非 web 專案,不走瀏覽器,所以我必須自己實現整個打包器

當然,這麼做的好處就是我可以實現 tree shaking,module federation,code splitting 等 feature,想想這都是小程式的福利,是不是很刺激!

4樓:課呱呱

vite——乙個由 vue 作者尤雨溪專門為 vue 打造的開發利器,其目的是使 vue 專案的開發更加簡單和快速。

vite 究竟有什麼作用?用 vite 文件上的介紹,它具有以下特點:

快速的冷啟動

即時的熱模組更新

真正的按需編譯

提供 web server:借用了 koa 來啟動服務

模組解析:核心是攔截瀏覽器對模組的請求

支援 /@module/ :判斷路徑是否以 /@module/ 開頭,如果是取出包名,去 node_module 裡找到這個庫,基於 package.json 返回對應的內容

檔案編譯:攔截了對模組的請求並執行實時編譯

Vite雖然很爽,但是當前RC 1版本僅適用於Vue3.x,不能使用和Vue3不相容的庫。(速度肯定是比webpack快的,各方面)

5樓:Jacy

這裡借樓問個問題,初次使用vite vue3.0在其他電腦上跑是可以的,但是公司電腦報了個錯,不知道是怎麼問題,搜尋也沒有一點相關的

6樓:方應杭

我用 Vite 寫了乙個 Vue 3 的 UI 套件:方應杭:我寫了一套基於 Vue 3 的 UI 框架

總得來說,我愛 Vite!

絲滑。dev 環境非常高效,相比之下 webpack 簡直就是龜速!

koa。Vite 其實就是內建了乙個 koa,如果你了解 koa 的知識,可以輕鬆拓展 Vite,比如這是我寫的 Vite markdown 外掛程式

Composition API。你再也不用把一些相關性很強的東西分別放在 data、methods 和 computed 裡了,放在單獨的乙個檔案裡不香嗎?

Vite + Vue3 非常符合我的程式設計習慣!

7樓:黃開春

不需要打包工具參與,利用瀏覽器對模組化的支援,實現vue的熱更。具體體驗怎樣,可以簡單截圖一下

首先index.html這個樣子,其中就是利用module,來解決模組化問題

主要的點就這麼多,大概都學會了怎麼使用了把,下面進去原理分析

這塊會從兩方面分析,第一是熱更,這也是vite主要做的,第二是build,build這塊是使用rollup進行打包,用於正式環境,之所以這裡還要提一下,是因為內部做的一些有意思的東西。

其實熱更的原理上面也將的差不多了,簡單來說,就是客戶端ws鏈結到服務端,服務端監聽檔案變化,然後分析變化以及依賴,盡量縮小變化的範圍,然後發訊息給客戶端去請求新的檔案進行hmr,例如vue元件template變化了或者style變化了,只有這種小範圍的變化,客戶端就去請求服務端,獲取完資源檔案會,會讓vue元件重新渲染或者更新具體的style,這樣就達到最小顆粒度的hmr,當然無法達到的時候,有個最後的降級,就是location.reload,哈哈哈

再說說依賴解析,其實這塊vite在注釋裡面寫的很清楚。正常vue檔案變化,會觸發元件的rerender,如果是js變化,我們就需要根據依賴圖來覺得怎麼去最小力度的hmr了。其中,怎麼收集依賴,主要是兩部分,第一是js檔案import的依賴,第二是vue的script的import依賴,這塊都會通過分析重寫import來實現。

在尋找js依賴的過程中,遇到vue依賴,塞到vue reload中,遇到js依賴,如果是hmr 邊界最好,塞到js reload裡面,沒有就繼續往上尋找,如果確實找不到hmr邊界,就強制reload。其中hmr邊界是使用者hot.accept宣告的,vite內部會通過ast分析取出依賴。

8樓:pxqsuffix

其實前端開發者幾年前都已經意識到這個痛點了。

會成為後續工具鏈的發展方向。

不只是開發階段,生產環境使用原生模組也是大勢所趨。

不只是原生模組,CSS變數用作主題控制也會大概率成為下一波元件庫大版本更新時的選擇。

平台原生提供的標準特性,大部分都會逐漸成為主流。

你是如何構建 Web 前端 Mock Server 的?

simsir 放乙個小程式的 https dboy 你需要的不是Mock Server,而是在前端設計高質量的測試機制,實現真正的前後端分離開發。function loadProducts options if options.fixture無後台返回杜撰的資料return new Promise ...

Rust開發Web後端效率如何?

momo 後端 GraphQL 構建 Rust 非同步 GraphQL 服務 基於 tide async graphql mongodb 基於 actix web async graphql rbatis postgresql mysql 構建非同步 Rust GraphQL 服務 前端 Rust ...

如何學習web前端開發,求推薦路線,希望給點建議,不勝感激?

基質的U妹 怎樣學好Web前端,這是很多有意願去學習Web前端的人都非常關注的問題,Web前端工程師通過Html CSS JS等技術的應用實現不用終端裡展現的產品頁面,從而給使用者帶著良好的使用體驗。1.要有端正的學習態度,持之以恆的學習精神。剛開始學習的時候可能由於一時的熱情精力充沛,但是隨著不斷...