嘗試運行vue-vben-admin項目出現(xiàn)以下問題
我注意到倉庫新代碼都沒有以下的問題了哦贡羔，作者更新還是很快的。
1.執(zhí)行pnpm install的時候報錯：ERR_PNPM_INVALID_OVERRIDE_SELECTOR? Cannot parse the "http://" selector in the overrides
翻譯：在overrides里面無法解析"http://"
這個問題在issue中能找到忧饭，作者也有回答. 解決辦法如下：
- 刪除無法解析的"http://",
- pnpm降級到6.23.6（沒試运悲，不想降級）
這是pnpm在讀package.json中的配置時出現(xiàn)的問題,pnpm.overrides或者resolutions存在"http://"，我選擇刪掉书斜，因為依賴源選擇好了神妹，在國內應該都有鏡像
pnpm.overrides 和 yarn 提供的resolutions 作用類似：指定依賴版本覆蓋所有依賴及子依賴鞋仍。 (npm可以直接安裝指定版本）
resolutions在遇到某些子依賴高版本有bug的時候造寝，固定所有子依賴的版本有用
package.json
"resolutions": {
"http://": "Used to install imagemin dependencies, because imagemin may not be installed in China. If it is abroad, you can delete it",
"bin-wrapper": "npm:bin-wrapper-china",
"rollup": "^2.56.3",
"gifsicle": "5.2.0"
},
pnpm好處：
- 全局安裝磕洪，公用依賴，同名包同版本只會下載一次诫龙，提升速度
- 項目中只會展示一級依賴析显，不會引入你不知道的子級依賴（npm將依賴拍平以減少重復包的下載）
2.關于npm下載依賴esbuild報錯的問題throw new Error(`esbuild: Failed to install correctly
網(wǎng)上有很多文章解決esbuild安裝問題，就是執(zhí)行node node_modules/esbuild/install.js安裝后签赃，再跑就可以了谷异。
這里我提一點，不要無腦復制粘貼锦聊，要看你的esbuild的報錯路徑
以下我的報錯路徑就是另外一個依賴里面的報錯歹嘹，尷尬了
at Object.<anonymous> (/Users/ruios/web/vue-vben-admin-main/node_modules/vite-plugin-mock/node_modules/esbuild/bin/esbuild:2:7)
根據(jù)目錄找到文件夾，確實里面里面也有一個esbuild
所以執(zhí)行以下
node node_modules/vite-plugin-mock/node_modules/esbuild/install.js
再次運行就ok了
3. 提示build.terserOptions is specified but build.minify is not set to use Terser. Note Vite now defaults to use esbuild for minification. If you still prefer Terser, set build.minify to "terser".
在vite.config.js中有打包配置terserOptions為了去掉console孔庭，從提示可以看出來尺上，現(xiàn)在Vite默認使用esbuild去作為代碼壓縮器，如果想要使用terserOptions這些配置圆到，要增加minify：terser怎抛。
看文檔默認esbuild壓縮有優(yōu)勢，那也可以刪掉terserOptions
minify: 編譯優(yōu)化手段芽淡，指在不影響代碼語義的情況下马绝，盡可能的減小程序的體積，常見的minify工具如terser挣菲、uglify富稻，swc和esbuid也自帶minify功能。
vite.config.js
build: {
target: 'es2015',
outDir: OUTPUT_DIR,
terserOptions: {
compress: {
keep_infinity: true,
// Used to delete console in production environment
drop_console: VITE_DROP_CONSOLE,
},
},
// Turning off brotliSize display can slightly reduce packaging time
brotliSize: false,
chunkSizeWarningLimit: 2000,
},
4. vite.config.js中有一個配置optimizeDeps引起了我的興趣
optimizeDeps: {
// @iconify/iconify: The dependency is dynamically and virtually loaded by @purge-icons/generated, so it needs to be specified explicitly
include: [
'@iconify/iconify',
'ant-design-vue/es/locale/zh_CN',
'ant-design-vue/es/locale/en_US',
],
},
該配置的目的：
- 兼容 CommonJS 和 AMD 模塊的依賴（下圖中needsInterop標志為true就是要重寫CommonJS的導出）
因為 Vite 的 DevServer 是基于瀏覽器的 Natvie ES Module 實現(xiàn)的己单，所以對于使用的依賴如果是 CommonJS 或 AMD 的模塊唉窃，則需要進行模塊類型的轉化（ES Module） - 減少模塊間依賴引用導致過多的請求次數(shù),加快啟動速度
預編譯后會將dependencies的依賴和optimizeDeps.include中的依賴進行預編譯緩存，并生成存儲的路徑文件node_moduels/.vite/_metadata.json
預編譯緩存.png
為了加快二次及后續(xù)編譯速度纹笼，自己寫optimizeDeps比較麻煩纹份，這里到npm上看看用起來吧：
vite-plugin-optimize-persist吧
老實講：vite項目頁面稍微多一丟丟東西，開發(fā)體驗時首次加載頁面真的慢廷痘。不過有了第一次蔓涧，后面還是舒服
5. vite（esbuild + rollup）
關于esbuild的優(yōu)秀，網(wǎng)上有很多構建優(yōu)勢對比圖笋额，甩webpack一條街元暴。
Vite 用 esbuild 替代 Rollup 進行預打包，速度也非承中桑快茉盏，上面的第三點可以看到生產(chǎn)可以用 esbuild 作為壓縮器鉴未。生產(chǎn)打包還是用的Rollup， esbuild 目前對生產(chǎn)包支持不夠健壯鸠姨，很多配置無法通過 esbuild 實現(xiàn)
