全國(guó)咨詢(xún)/投訴熱線(xiàn):400-618-4000

首頁(yè)技術(shù)文章正文

前端新型構(gòu)建型工具vite有哪些優(yōu)點(diǎn)?

更新時(shí)間:2023-08-28 來(lái)源:黑馬程序員 瀏覽量:

因?yàn)楝F(xiàn)代瀏覽器多數(shù)都已經(jīng)默認(rèn)支持了ES6的import語(yǔ)法,在調(diào)試環(huán)境下,我們不需要全部預(yù)打包,只需要把你首次依賴(lài)的文件,依次通過(guò)網(wǎng)絡(luò)請(qǐng)求去獲取;這樣,整個(gè)項(xiàng)目的開(kāi)發(fā)體驗(yàn)得到巨大提升,能做到復(fù)雜項(xiàng)目的秒級(jí)調(diào)試和熱更新。
1693217149245_vite.png
webpack需要查找依賴(lài),打包所有的模塊,然后才能提供服務(wù),更新速度會(huì)隨著代碼體積增加越來(lái)越慢。
1693217186986_vite3.png

vite使用原生ESModule通過(guò)script標(biāo)簽動(dòng)態(tài)導(dǎo)入,訪(fǎng)問(wèn)頁(yè)面的時(shí)候加載到對(duì)應(yīng)模塊編譯并響應(yīng)。

使用create-vue腳手架創(chuàng)建項(xiàng)目

create-vue是Vue官方新的腳首架工具,底層切換到了vite(下一代前端工具鏈),為開(kāi)發(fā)提供極速響應(yīng),運(yùn)行創(chuàng)建項(xiàng)目命令:

pnpm create vue
// or
npm init vue@latest
// or
yarn create vue

選擇項(xiàng)目依賴(lài)內(nèi)容

?Project name:… my-vue-demo
?Add TypeScript? … `No`/ Yes
?Add JSX Support?…No /`Yes`
?Add Vue Router for Single Page Application development?...No /`Yes`
?Add Pinia for state management?...No /`Yes`
?Add Vitest for Unit Testing?...No /`Yes`
?Add Cypress for both Unit and End-to-End testing?...No /`Yes`
?Add ESLint for code quality?…No /`Yes`
?Add Prettier for code formatting?…No /`Yes`

Scaffolding project in ...

Done.Now run:

   cd my-vue-demo
   pnpm install
   pnpm lint
   pnpm dev


分享到:
在線(xiàn)咨詢(xún) 我要報(bào)名
和我們?cè)诰€(xiàn)交談!