-
如何定義?Vite
是一種新型前端構(gòu)建工具
Vite?由兩部分組成：
? ? 一個(gè)開發(fā)服務(wù)，服務(wù)于開發(fā)環(huán)境，?ESM +?HMR
? ? 一套構(gòu)建指令，服務(wù)于生成環(huán)境，?用?Rollup?打包
什么是打包？使用工具抓取、處理并將我們的源碼模塊串聯(lián)成可以在瀏覽器中運(yùn)行的文件
?webpack rollup parcel gulp
為什么用?Vite
Vite?將模塊區(qū)分為依賴和源碼兩類，提升開發(fā)服務(wù)啟動(dòng)時(shí)間
依賴：?在開發(fā)時(shí)不會(huì)變動(dòng)的純?JavaScript，?Vite?會(huì)使用 esbuild?預(yù)構(gòu)建依賴
源碼：通常為?JSX、CSS?或者?Vue?SFC?等，時(shí)常會(huì)被編輯，需要轉(zhuǎn)換，基于路由拆分
????? ?Vite?以原生?ESM?方式提供源碼，讓瀏覽器接管打包工作
Vite?和 Create-React-App?對(duì)比
查看全部 -
10:43?/node_modules/.vite/lodash-es.js
.vite 是vite工具幫忙建立的一個(gè)隱藏式目錄
lodash.js vite工具幫忙做了改造，不會(huì)發(fā)散請(qǐng)求，按需
查看全部 -
傳統(tǒng)打包工具的缺點(diǎn)：
緩慢的服務(wù)啟動(dòng)
緩慢的更新
按需加載，動(dòng)態(tài)引入
vite的做法
講模塊區(qū)分為依賴和源碼兩類，提升開發(fā)服務(wù)啟動(dòng)時(shí)間
依賴是指開發(fā)是不會(huì)變動(dòng)純的javascript，類似于上百個(gè)模塊的組件庫(kù)，處理這些依賴的代價(jià)比較高，依賴可能存在多種模塊化的格式，例如esm 或者common.js，vite 使用esbuild來(lái)預(yù)構(gòu)建依賴，esbuild 使用go語(yǔ)言來(lái)編寫的，比使用javascript語(yǔ)言編寫的打包器預(yù)構(gòu)建依賴速度快10-100倍
vite 以原生esm方式提供源碼，讓瀏覽器直接接管打包工作，動(dòng)態(tài)導(dǎo)入
源碼一般是非原生的javascript的代碼，需要轉(zhuǎn)換的
查看全部 -
vite是一個(gè)開發(fā)服務(wù)器，基于原生的es模塊，提供了豐富的內(nèi)置功能，服務(wù)于開發(fā)環(huán)境，類似于webpack 中的dev server，使用esm和hmr來(lái)實(shí)現(xiàn)模塊的熱更新
是一套構(gòu)建指令，使用rollup來(lái)打包和構(gòu)建代碼，預(yù)配置，可輸出用于生產(chǎn)環(huán)境高度優(yōu)化的一些靜態(tài)資源。
vite 一部分可以服務(wù)于開發(fā)環(huán)境，一部分用于生產(chǎn)環(huán)境
查看全部 -
查看全部
-
重點(diǎn)關(guān)注一下這個(gè)問(wèn)題
查看全部 -
【Vite】概念?、?設(shè)計(jì)思想
------------------------------------------
--------------
-----------------------
查看全部 -
【1】課程大綱
? ? ??
【1.1】?課程介紹 +?安排
? ? ? ?
↓↓↓↓↓↓↓↓↓↓↓↓
? ? ? ?
查看全部 -
uuid
查看全部 -
lodash-es
查看全部 -
搜索
復(fù)制
查看全部 -
vite概念介紹：
vite就是一個(gè)前端構(gòu)建工具，可以提高開發(fā)體驗(yàn)
主要由2部分組成
1、是開發(fā)服務(wù)? ESM+HMR
2、構(gòu)建指令? ?用Rollup打包
打包：抓取處理源碼串聯(lián)成瀏覽器可讀文件
常見打包工具：（存在問(wèn)題：服務(wù)啟動(dòng)緩慢，重建包更新緩慢）
webpack
rollup
parcel
gulp
傳統(tǒng)打包
先編譯成一大堆html在請(qǐng)求
ESM打包
先請(qǐng)求，就編譯請(qǐng)求當(dāng)前頁(yè)面
vite優(yōu)點(diǎn)
將模塊區(qū)分依賴和源碼，以原生ESM方式提供源碼，讓瀏覽器接管打包
查看全部 -
ESM + HMR
Rollup
查看全部 -
K：一點(diǎn)React的基礎(chǔ)知識(shí)
W：Vite 是什么東西，有什么作用
L：?
查看全部 -
asdasd
查看全部 -
$--hover-bg-color
查看全部 -
1111
查看全部 -
fasfasdf
查看全部 -
fasdfadsfadf
查看全部 -
dasd
查看全部 -
dasdadasdaddas
查看全部 -
從零開始手敲代碼，帶你一步步了解Vite，Vite 初識(shí)，了解基本概念以及和其他常用打包工具相比，具有哪些優(yōu)劣勢(shì)；通過(guò) Vite 帶你了解整個(gè)前端打包構(gòu)建體系，讓你能夠使用 Vite 搭建生產(chǎn)可用項(xiàng)目，完成開發(fā)、打包、部署、上線全流程。查看全部
舉報(bào)