Vite vs webpack(以vue-cli為主)

tags: Vite, webpack

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

webpack

• 優點
  • 生態龐大，遇到問題90% 網路上都有辦法解決。
  • 支持vue-class-component
• 缺點
  • 構建耗時、專案越大編譯速度越慢。
  • 做出來的網站google網站評分較低

Vite

• 優點
  • 啟動快，做出來的網站google網站評分較高
  • 按需動態編譯的方式，極大的縮減了編譯時間，專案越複雜、模組越多，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官網

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

官方解析：Rollup 是一個 JavaScript 模塊打包器，可以將小塊代碼編譯成大塊複雜的代碼，例如 library 或應用程序。

webpack

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

結論

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

總體來說

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

參考文章

• [專案實戰] Webpack to Vite， 為開發提速！
• Vite当前可用于生产吗，对比webpack有什么不足吗?
• rollup和webpack使用场景分析
• 前端新工具：Vite
• 2021年了，vite能投入生产了吗？vite.config.js配置踩坑
• Vite 实践：Vue 旧项目迁移
• Rollup 使用教程
• Vite - change ouput directory of assets
• Vite 與環境變數
• Vite官網
• Vue-Cli官網
• How can I use Vite env variables in vite.config.js?