前言
? ? 最近一直在看vite的源碼（傳送）,恰逢公司的項目使用的是webpack，正好借此機(jī)會做下遷移，并將該過程記錄。當(dāng)前項目使用webpack+vue2
對比
? ? 這里挑選了一個比較復(fù)雜的路由頁面，分別使用vite和webpack啟動，記錄從npm run start到頁面加載的耗時
? ? vite
? ? webpack
基礎(chǔ)改造
? ? package.json中新建指令
? ? alias別名
? ? ? ? 和webpack一樣，配置resolve.alias
? ? 全局變量注入
? ? ? ? 使用vite內(nèi)置的define代替webpack的DefinePlugin
? ? proxy代理
? ? ? ? 定義server.proxy代替webpack的proxyTable，寫法上僅框紅的一處不太一樣
? ? 適配vue2
? ? ? ? yarn add vite-plugin-vue2，并在vite.config.js中引入并注冊使用
錯誤修復(fù)
? ? 白屏
? ? 報錯
? ? ? ? 運(yùn)行npm run dev:vite后打開瀏覽器，頁面空白，可以看到入口的index.html中并沒有引入script標(biāo)簽
? ? 修復(fù)
? ? ? ? yarn add vite-plugin-html，并在vite.config.js中引入并注冊使用，其entry配置項即可幫助我們自動注入script標(biāo)簽
? ? 默認(rèn)擴(kuò)展名稱
? ? ? ? 報錯
? ? ? ? ? ? 不指定.vue擴(kuò)展名稱，會報如下錯誤
? ? ? ? ? ? 點(diǎn)開該報錯，感覺app并不是一個正常的文件
? ? ? ? ? ? 故找到引用處，嘗試添加.vue擴(kuò)展名后重啟，報錯如下
? ? ? ? 修復(fù)
? ? ? ? ? ? 此時已經(jīng)基本可以確定是省略擴(kuò)展名稱導(dǎo)致的了，故在resolve中增加如下配置
? ? require語法報錯
? ? ? ? 報錯
? ? ? ? 修復(fù)
? ? ? ? ? ? 在webpack中能直接使用是因為其內(nèi)部幫我們做了處理，在vite中需要單獨(dú)引入插件（yarn add vite-plugin-require-transform）
? ? 替換global
? ? ? ? 報錯
? ? ? ? 修復(fù)
? ? ? ? ? ? 查看報錯語句
? ? ? ? ? ? 可以看到，其使用三元運(yùn)算做了“降級處理”，理論上來說使用false的結(jié)果也問題不大
? ? ? ? ? ? 故，使用window來代替global
? ? 修改vue引用版本
? ? ? ? 報錯
? ? ? ? 修復(fù)
? ? ? ? ? ? 這是由于vue包中默認(rèn)導(dǎo)出的是runtime版本，修改下之前定義的別名即可
? ? 依賴注入
? ? ? ? 報錯
? ? ? ? 修復(fù)
? ? ? ? ? ? 在webpack中通過ProvidePlugin提前注入相關(guān)依賴而不需要在頁面中顯示引入，在vite中可以使用@rollup/plugin-inject來代替
? ? 插件報錯
? ? ? ? 報錯
? ? ? ? 修復(fù)
? ? ? ? ? ? 由于本次目的僅僅是為開發(fā)環(huán)境做改造，故為了盡可能少的影響生產(chǎn)，這里隨便寫個插件過濾下
? ? vite-plugin
? ? ? ? 報錯
? ? ? ? 修復(fù)
? ? ? ? ? ? 這是之前我優(yōu)化面包屑時候?qū)懙膚ebpack的loader，需要按照vite插件的語法格式做下替換，將直接export的方式改為返回一個包含name和transform的對象的函數(shù)即可
? ? 內(nèi)置模塊
? ? ? ? 報錯
? ? ? ? 修復(fù)
? ? ? ? ? ? 項目中大量使用了node的timers模塊的setTimeout方法，這在vite中被視為內(nèi)置模塊是不允許被客戶端調(diào)用的，估計當(dāng)初是不小心自動引入的，同樣的，我們在插件中識別并替換掉
? ? mqtt
? ? ? ? 報錯如下
? ? ? ? 查看相關(guān)代碼，感覺是process相關(guān)的錯誤
? ? ? ? 故嘗試安裝process包，并通過inject進(jìn)行注入
? ? 樣式
? ? ? ? 錯誤
? ? ? ? ? ? 報錯如下
? ? ? ? 修復(fù)
? ? ? ? 這是因為‘～’符號不被vite識別，因為該符號是vue-cli中的用法，去掉即可
? ? icon失效
? ? ? ? 問題
? ? ? ? 修復(fù)
? ? ? ? ? ? 在index.html中以cdn的當(dāng)時引入，這雖然會對生產(chǎn)產(chǎn)生一定的影響，不過理論上其影響可以被忽略
? ? 默認(rèn)空格
? ? ? ? 問題
? ? ? ? ? ? 目前發(fā)現(xiàn)的，按鈕直接的默認(rèn)的空隙沒了
? ? ? ? 修復(fù)
? ? ? ? ? ? 修改默認(rèn)編譯方式為preserve就可以了
? ? 路由改造
? ? ? ? 由于vite本身就是按需加載的，則我們在路由中進(jìn)行的懶加載就顯得有點(diǎn)雞肋，而且還會影響vite的預(yù)構(gòu)建行為
? ? ? ? 故考慮將路由引用方式做調(diào)整，同樣出于僅作用于本地開發(fā)環(huán)境的考慮，需要在plugin階段做下轉(zhuǎn)換，即：
? ? ? ? ? ? 將如下引入方式
? ? ? ? ? ? 通過plugin替換為如下形式
? ? ? ? ? ? 則隨便寫點(diǎn)正則
? ? ? ? ? ? 替換結(jié)果如下
? ? ? ? ? ? 取舍
? ? ? ? ? ? ? ? 這確實(shí)能有效避免二次預(yù)構(gòu)建行為，也確實(shí)有效的提高了部分頁面首次加載的時間，但是卻導(dǎo)致首屏加載被拖到和webpack持平了，因此到底要不要改造路由方式就仁者見仁了.....
? ??????????????
