原生里使用 ES6模塊化導入
- 目前google瀏覽器, 已經支持了 export 和 import導入和導出了
但是有一個缺點:
-
某些文件是不識別的 (.ts, .vue, .less, .jsx)
-
如果包之間依賴太多, 那么會發送過多的網絡請求;
這些缺點可以通過 vite來解決
vite
vite安裝
-
從0開始配置 ,不借助腳手架
-
npm install vite –g # 全局安裝
-
npm install vite –D # 局部安裝
-
局部安裝啟動命令:
-
npx vite
vite處理css , sass , postcss的轉換
vite可以直接支持css的處理
vite處理sass
- npm install sass -D
vite處理postcss;
-
只需要安裝postcss，並且配置 postcss.config.js 的配置文件即可；
-
npm install postcss postcss-preset-env -D
vite處理 TypeScript
vite對TypeScript是原生支持的，它會直接使用ESBuild來完成編譯：
- 只需要直接導入即可；
如果我們查看瀏覽器中的請求，會發現請求的依然是ts的代碼：
-
這是因為vite中的服務器Connect會對我們的請求進行轉發；
-
獲取ts編譯后的代碼，給瀏覽器返回，瀏覽器可以直接進行解析；
注意：在vite2中，已經不再使用Koa了，而是使用Connect來搭建的服務器
vite處理 vue
先安裝vue
- npm install vue@next
vite對vue提供第一優先級支持：
-
Vue 3 單文件組件支持：@vitejs/plugin-vue
-
Vue 3 JSX 支持：@vitejs/plugin-vue-jsx
-
Vue 2 支持：underfin/vite-plugin-vue2
安裝支持vue的插件：
- npm install @vitejs/plugin-vue -D
在vite.config.js中配置插件：
報錯缺少插件
因為 .vue文件 需要依賴這個插件來編譯template標簽
- npm install @vue/compiler-sfc -D
vite 打包 和 預覽
打包
由於vite是 局部安裝, 所以這里通過 npx 執行
npx vite build
預覽
npx vite preview
為什么vite打包這么快?
因為vite是基於ESBuild
ESBuild解析
什么是ESBuild?
ESbuild 是一個類似webpack構建工具。它的構建速度是 webpack 的幾十倍。
ESBuild為什么這么快?
-
使用GO語言編寫的, 可以直接轉換成機器代碼, 而無需經過字節碼;
-
ESBuild可以充分利用CPU的多內核，盡可能讓它們飽和運行；
-
ESBuild的所有內容都是從零開始編寫的，而不是使用第三方，所以從一開始就可以考慮各種性能問題;
ESBuild的特點
注釋:
在當前前端環境中，直接使用 esbuild 代理 webpack 是不現實的。在目前的主流方案是在 webpack 中使用 esbuild 去做一些代碼的 transform (代替 babel-loader)。
或者使用 vite
vite原理:
-
vite1: 使用的是 koa
-
vite2: 使用的是 Connext; Connext更加是個轉發
請求服務器 --> 獲取自己的代碼 --> Connext攔截 -->vite工具處理成 es6.js代碼---> Connext轉發--->發送給瀏覽器
Vite腳手架工具
在開發中，我們不可能所有的項目都使用vite從零去搭建，比如一個react項目、Vue項目；
- 這個時候vite還給我們提供了對應的腳手架工具；
所以Vite實際上是有兩個工具的：
-
pvite：相當於是一個構件工具，類似於webpack、rollup；
-
@vitejs/create-app：類似vue-cli、create-react-app
安裝腳手架
npm install @vitejs/create-app -g
創建項目
create-vite-app 2_vite_cli_demo
