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

因?yàn)楝F(xiàn)代瀏覽器多數(shù)都已經(jīng)默認(rèn)支持了ES6的import語(yǔ)法，在調(diào)試環(huán)境下，我們不需要全部預(yù)打包，只需要把你首次依賴的文件，依次通過網(wǎng)絡(luò)請(qǐng)求去獲取;這樣，整個(gè)項(xiàng)目的開發(fā)體驗(yàn)得到巨大提升，能做到復(fù)雜項(xiàng)目的秒級(jí)調(diào)試和熱更新。

webpack需要查找依賴，打包所有的模塊，然后才能提供服務(wù)，更新速度會(huì)隨著代碼體積增加越來越慢。

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

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

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

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

選擇項(xiàng)目依賴內(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