建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
很多兄弟都在使用 Vite 了，但如果你是前端 leader 或者是團(tuán)隊(duì)核心的話，不得不可考慮的一個(gè)問(wèn)題就是性能優(yōu)化。Vite 在開(kāi)發(fā)環(huán)境性能已經(jīng)非常不錯(cuò)了，今天我們主要聊聊生產(chǎn)環(huán)境的優(yōu)化，其實(shí)方式和 Webpack 大同小異，只不過(guò) Vite 構(gòu)建時(shí)使用的是 Rollup 而已。
學(xué)習(xí) Vite 最好是拋開(kāi)腳手架工具，單獨(dú)使用它。方法我在入門(mén)篇已經(jīng)講過(guò)，這里就不再贅述了。那么還等什么，開(kāi)整！
分包策略
默認(rèn)情況下，瀏覽器重復(fù)請(qǐng)求相同名稱(chēng)的靜態(tài)資源時(shí)，會(huì)直接使用緩存的資源。利用這個(gè)機(jī)制我們可以將不會(huì)經(jīng)常更新的代碼單獨(dú)打包成一個(gè) JS 文件，這樣就可以減少 HTTP 請(qǐng)求，同時(shí)降低服務(wù)器壓力。以 lodash 為例：
npm i lodash
安裝 lodash ，然后在 main.js 中寫(xiě)入以下代碼：
// src/main.js
import { cloneDeep } from 'lodash'
const obj = cloneDeep({})
打包結(jié)果：
項(xiàng)目代碼和依賴(lài)模塊打包成了一個(gè) JS 文件。接著我們來(lái)配置分包，修改底層的 Rollup 配置：
// vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
build: {
rollupOptions: {
output: {
manualChunks: id {
// 將 node_modules 中的代碼單獨(dú)打包成一個(gè) JS 文件
if(id.includes('node_modules')) {
return 'vendor'
}
}
}
}
}
})
打包結(jié)果如下：
可以看到依賴(lài)模塊已經(jīng)單獨(dú)生成一個(gè) JS 文件了。這樣我們即使修改了 main.js 中的代碼重新打包，依賴(lài)文件 vendor.528a7280.js 也不會(huì)發(fā)生變化的，對(duì)于這個(gè)文件，瀏覽器也不會(huì)再次發(fā)起請(qǐng)求。如果依賴(lài)模塊很多的話，性能是不是有很大的提升呢？
treeshaking
treeshaking 也被稱(chēng)為 “搖樹(shù)優(yōu)化”。簡(jiǎn)單來(lái)講，就是在保證代碼運(yùn)行結(jié)果不變的前提下，去除無(wú)用的代碼。Vue3中，許多 ApI 的引入都支持 treeshaking 優(yōu)化。也就是說(shuō)只打包你用到的 API，忽略那些沒(méi)有用到的。
Vue3 會(huì)默認(rèn)使用 Rollup 進(jìn)行 treeshaking ，不需要額外進(jìn)行配置。但有一個(gè)條件，必須是 ES6 module 模塊才行。還是上面那個(gè)例子：
// src/main.js
import { cloneDeep } from 'lodash'
const obj = cloneDeep({})
由于 lodash 是使用 CommonJS 規(guī)范的模塊，所以無(wú)法進(jìn)行 treeshaking ，Vue 會(huì)把整個(gè) lodash 依賴(lài)打包進(jìn)來(lái)。整個(gè)依賴(lài)文件的大小是 78.64 KB 。
然后我們使用 ESM 版的 loadsh 對(duì)比一下：
npm i lodash-es
// src/main.js
import { cloneDeep } from 'lodash-es'
const obj = cloneDeep({})
打包結(jié)果如下：
可以看到依賴(lài)體積瞬間變成了 13.23 KB ，是不是一下小了很多。所以我們?cè)谶x擇第三方庫(kù)時(shí)，要盡可能使用 ESM 版本，可以提升不少性能！
gzip 壓縮
gzip 是一種使用非常普遍的壓縮格式。使用 gzip 壓縮可以大幅減小代碼體積，提升網(wǎng)絡(luò)性能。開(kāi)啟 gzip 也比較簡(jiǎn)單，使用一個(gè)插件就可以了：
npm i vite-plugin-compression
// vite.config.js
import { defineConfig } from 'vite'
import viteCompression from 'vite-plugin-compression'
export default defineConfig({
plugins: [viteCompression()]
})
打包結(jié)果如下：
可以看到經(jīng)過(guò) gzip 壓縮后，vendor.6fd516d3.js 文件從 13.23 KB 降到了 4.62KB，文件體積縮小了近 2/3 ，是不是很 nice。接下來(lái)就是后端同學(xué)的工作了：當(dāng)請(qǐng)求靜態(tài)資源時(shí)，如果發(fā)現(xiàn)有對(duì)應(yīng)的 gzip 的文件，直接把 gzip 內(nèi)容返給前端，并且設(shè)置一個(gè)響應(yīng)頭 content-encoding: gzip 。
完整邏輯是，我們需要把瀏覽器支持的壓縮類(lèi)型傳給服務(wù)端，在請(qǐng)求頭中設(shè)置 accept-encoding: gzip, deflate, br，只不過(guò)這一步瀏覽器通常幫我們都做了。然后服務(wù)端根據(jù)瀏覽器支持的類(lèi)型，設(shè)置響應(yīng)頭 content-encoding: gzip ，告訴瀏覽器以何種方式進(jìn)行解壓。
注意：因?yàn)闉g覽器解壓也需要時(shí)間，所以代碼體積不是很大的話不建議使用 gzip 壓縮。
cdn 加速
內(nèi)容分發(fā)網(wǎng)絡(luò)（Content Delivery Network，簡(jiǎn)稱(chēng) CDN）就是讓用戶(hù)從最近的服務(wù)器請(qǐng)求資源，提升網(wǎng)絡(luò)請(qǐng)求的響應(yīng)速度。通常我們請(qǐng)求依賴(lài)模塊使用 CDN ，而請(qǐng)求項(xiàng)目代碼依然使用自己的服務(wù)器。還是以 lodash 為例：
// src/main.js
import _ from 'lodash'
const obj = _.cloneDeep({})
使用 CDN 也比較簡(jiǎn)單，一個(gè)插件就可以搞定：
npm i vite-plugin-cdn-import -D
// vite.config.js
import { defineConfig } from 'vite'
import viteCDNPlugin from 'vite-plugin-cdn-import'
export default defineConfig({
plugins: [
viteCDNPlugin({
// 需要 CDN 加速的模塊
modules: [
{
name: 'lodash',
var: '_',
path: `https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js`
}
]
})
]
})
構(gòu)建成功后，Vite 會(huì)自動(dòng)幫我們將 cdn 資源通過(guò) script 標(biāo)簽插入到 html 中：
這樣請(qǐng)求 lodash 資源就會(huì)產(chǎn)生加速 buff ，而且項(xiàng)目體積也會(huì)大大減?。?/p>
圖片壓縮
根據(jù)項(xiàng)目對(duì)清晰度的要求，我們可以使用 vite-plugin-imagemin 插件，對(duì)圖片進(jìn)行適當(dāng)壓縮：
npm i vite-plugin-imagemin -D
// vite.config.js
import { defineConfig } from 'vite'
import viteImagemin from 'vite-plugin-imagemin'
export default defineConfig({
plugins: [
viteImagemin({
gifsicle: {
optimizationLevel: 7,
interlaced: false
},
optipng: {
optimizationLevel: 7
},
mozjpeg: {
quality: 20
},
pngquant: {
quality: [0.8, 0.9],
speed: 4
},
svgo: {
plugins: [
{
name: 'removeViewBox'
},
{
name: 'removeEmptyAttrs',
active: false
}
]
}
})
]
})
不同格式的文件配置也不一樣，具體可以參考 github ：vite-plugin-imagemin 。
構(gòu)建分析
分析依賴(lài)模塊的大小占比，可以讓我們更有針對(duì)性的進(jìn)行體積優(yōu)化。我們通常使用 rollup-plugin-visualizer 插件進(jìn)行構(gòu)建分析，方法也比較簡(jiǎn)單：
npm install rollup-plugin-visualizer -D
// vite.config.js
import { defineConfig } from 'vite'
import { visualizer } from 'rollup-plugin-visualizer';
export default defineConfig({
plugins: [
// 將 visualizer 插件放到最后
visualizer()
]
})
npm run build ，構(gòu)建成功之后會(huì)在根目錄下生成一個(gè) stats.html ，打開(kāi)頁(yè)面即可以看到分析結(jié)果。我們還可以通過(guò)左上角的 排除、包含 輸入框?qū)σ蕾?lài)模塊進(jìn)行篩選。同時(shí)鼠標(biāo)移入各模塊，可以看到詳細(xì)的分析數(shù)據(jù)：
小結(jié)
ok，今天的分享就是這些。如果你的項(xiàng)目已經(jīng)在用 Vite ，不妨試驗(yàn)一下以上方案，看看項(xiàng)目會(huì)不會(huì)變得更加絲滑。
當(dāng)前名稱(chēng)：Vite性能篇：掌握這些優(yōu)化策略，一起縱享絲滑！
分享URL：http://m.5511xx.com/article/djppses.html
