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

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

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

vite使用原生ESModule通過script標簽動態(tài)導入，訪問頁面的時候加載到對應模塊編譯并響應。

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

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

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

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