# Vite vs webpack(以vue-cli為主)
###### tags: `Vite`, `webpack`
- `webpack` 會`先打包`，然後啟動開發伺服器，請求伺服器時直接給予打包結果。
- 而 `Vite` 是`直接啟動`開發伺服器，請求哪個模組再對該模組進行`實時編譯`。
- 在 HMR（熱更新）方面，`Vite`當改動了一個模組後，**僅需讓瀏覽器重新請求該模組即可**，==不像`webpack`那樣需要把該模組的相關依賴模組全部編譯一次==，**效率更高**。

## [webpack](https://webpack.js.org/concepts/)

- 優點
- 生態龐大，遇到問題90% 網路上都有辦法解決。
- 支持`vue-class-component`
- 缺點
- 構建耗時、**專案越大編譯速度越慢**。
- 做出來的網站[google網站評分較低](https://pagespeed.web.dev/)
## [Vite](https://cn.vitejs.dev/)

- 優點
- 啟動快，做出來的網站[google網站評分較高](https://pagespeed.web.dev/)
- **按需動態編譯**的方式，極大的縮減了編譯時間，==專案越複雜、模組越多，`Vite` 的優勢越明顯。==
- 內置支持 `TypeScript` / `less` / `sass` / `stylus` / `postcss`（需要單獨安裝所對應的編譯器）
- 缺點
- 沒有`webpack`成熟，無法做到太細部的調整。
- 生態沒有`webpack`龐大，遇到問題90%需要自己解決（但現在有越來越好）。
- vite不支持`vue-class-component`

## 環境變數方面
### Vite
> .env文檔的自定義環境變數以`VITE_`為前綴詞命名

1. ==`Vite`預設沒有`process.env`==，必須另外設定。

//in vite.config.js
import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';


export default ({ mode }) => {
    process.env = {...process.env, ...loadEnv(mode, process.cwd())};

    // import.meta.env.VITE_NAME available here with: process.env.VITE_NAME
    // import.meta.env.VITE_PORT available here with: process.env.VITE_PORT

    return defineConfig({
        plugins: [vue()],

        server: {
            port: process.env.VITE_PORT,
        },
    });
}

2. 它有專門的屬性`import.meta`
除了我們自行定義的環境變數，Vite 還有內建四個它設定的環境變數讓我們運用：
- `import.meta.env.MODE`：應用運行的模式。
- `import.meta.env.BASE_URL`：部署應用時的基本 URL。它由 base 配置項決定。
- `import.meta.env.PROD`：應用是否運行在生產環境。
- `import.meta.env.DEV`：應用是否運行在開發環境（永遠與 `import.meta.env.PROD` 相反）。

3. 圖片在js引入方法
>`import.meta.url` 是一個 ESM 的原生功能，會暴露當前模塊的 URL。將它與原生的 URL 構造器 組合使用，在一個 JavaScript 模塊中，通過相對路徑我們就能得到一個被完整解析的靜態資源 URL
>
>---節錄於[vite官網](https://vitejs.cn/guide/assets.html#new-url-url-import-meta-url)

images: new URL(`/src/assets/images/yourImgName`, import.meta.url).href

### webpack
> .env文檔的自定義環境變數以`VUE_APP`為前綴詞命名
>
1.拿取環境變數的方法為`process.env.VUE_APP_YOUR_NAME`
2. 圖片在js引入方法

images: require('/src/assets/images/yourImgName')

## TypeScript引入type方面
### Vite
引入`interface`、`type`型別時，需要前面加個`type`做引入，`enum`則要分開引入

import type { interface, type } from '@/common/types'
import { enum } from '@/common/types'

否則會噴這個錯誤
Does not provide an export named vue

### webpack
不管是`interface`、`type`或`enum`都可以一起引入。

import { interface, type, enum } from '@/common/types'

## webpack vs rollup
#### [rollup](https://rollupjs.org/guide/en/)
> 官方解析：Rollup 是一個 JavaScript 模塊打包器，可以將小塊代碼編譯成大塊複雜的代碼，例如 library 或應用程序。

#### [webpack](https://webpack.js.org/concepts/)
> 官方解析：webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序需要的每個模塊，然後將所有這些模塊打包成一個或多個 bundle。

### 結論
**`rollup`偏向應用於js庫，`webpack`偏向應用於前端工程，UI庫**；
如果你的應用場景中只是js代碼，希望做ES轉換，模塊解析，可以使用`Rollup`。
如果你的場景中涉及到`css`、`html`，涉及到復雜的代碼拆分合併，建議使用`webpack`。

### 總體來說
==`Vite`在一些細部調整上（像是打包時指定資料夾不要加hash）還是無法完全取代`webpack`==，生態還不夠完整。
根據[Vite 实践：Vue 旧项目迁移](https://juejin.cn/post/7038883564422692901)內文敘述，`chunkFileNames`，`assetFileNames` 拿不到具體路徑，目前沒有解決方法。
官網類可以直上`Vite`(如果不須太細部的調整)。
後台建議保留`webpack` dev & build 的能力， **`Vite` 僅作為開發的輔助**，等相關工具再完善一些， 再考慮完全遷移過來。

### 參考文章
- [[專案實戰] Webpack to Vite， 為開發提速！](https://www.gushiciku.cn/pl/gHc5/zh-tw)
- [Vite当前可用于生产吗，对比webpack有什么不足吗?](https://www.zhihu.com/question/447025978)
- [rollup和webpack使用场景分析](https://baolei.blog.csdn.net/article/details/99841458?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-99841458-blog-109353622.pc_relevant_paycolumn_v3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-99841458-blog-109353622.pc_relevant_paycolumn_v3&utm_relevant_index=2)
- [前端新工具：Vite](https://w3ctim.com/post/77cd4175.html#%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B)
- [2021年了，vite能投入生产了吗？vite.config.js配置踩坑](https://juejin.cn/post/6989475484551610381)
- [Vite 实践：Vue 旧项目迁移](https://juejin.cn/post/7038883564422692901)
- [Rollup 使用教程](https://github.com/JohnApache/rollup-usage-doc)
- [Vite - change ouput directory of assets](https://stackoverflow.com/questions/71180561/vite-change-ouput-directory-of-assets)
- [Vite 與環境變數](https://editor.leonh.space/2021/vite/)
- [Vite官網](https://vitejs.cn/)
- [Vue-Cli官網](https://cli.vuejs.org/zh/)
- [How can I use Vite env variables in vite.config.js?](https://stackoverflow.com/questions/66389043/how-can-i-use-vite-env-variables-in-vite-config-js)