react配置webpack-bundle-analyzer項(xiàng)目優(yōu)化踩坑記錄

更新時(shí)間：2023年06月08日 09:21:26 作者：sleeppingfrog

這篇文章主要介紹了react配置webpack-bundle-analyzer項(xiàng)目優(yōu)化踩坑記錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

react配置webpack-bundle-analyzer項(xiàng)目優(yōu)化踩坑

webpack-bundle-analyzer是一款神奇。能分析項(xiàng)目中依賴包的大小，從而讓開發(fā)者能有針對(duì)性的進(jìn)行優(yōu)化的webpack插件

步驟：

（1）安裝 cnpm i webpack-bundle-analyzer --save-dev

(2) 在config文件夾中找到webpack.config.js，進(jìn)行如下操作

特別注意這里new BundleAnalyzerPlugin的時(shí)候要找準(zhǔn)位置；和module參數(shù)同級(jí)的plugins;[]才是配置plugin的地方

這樣我們?cè)趎pm run build的時(shí)候?yàn)g覽器會(huì)自動(dòng)打開9090端口的一個(gè)頁面顯示當(dāng)前依賴包的各種大小拼圖

ps：

vue中配置改插件步驟：（以vuecli3為例。）

（1）安裝 cnpm install webpack-bundle-analyzer -D

（2）在vue.config.js文件配置選項(xiàng)：

const?BundleAnalyzerPlugin?=?require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports={
????chainWebpack:config=>{
????????if?(process.env.use_analyzer)?{?????//?分析
????????????config.plugin("BundleAnalyzerPlugin").use(BundleAnalyzerPlugin)
????????}
????},
????pluginOptions:{
????}
}

（3）安裝npm安裝cross-env，（windows不支持xxx=xxx寫法）

（4）配置package.json

"scripts":?{
????"serve":?"vue-cli-service?serve",
????"build":?"cross-env?use_analyzer=true?vue-cli-service?build",
????"lint":?"vue-cli-service?lint",
????"analyzer":?"cross-env?use_analyzer=true?npm?run?build"
??},

如果希望在打包的時(shí)候顯示。則在build命令里配置cross-env use_analyzer=true即可。

如果希望單獨(dú)設(shè)置一個(gè)命令用來顯示模塊大小，可以重新配置，如上 "analyzer": "cross-env use_analyzer=true npm run build"。

key值可以隨便取。

webpack-bundle-analyzer的使用

安裝

npm install --save-dev webpack-bundle-analyzer

代碼：（在umi項(xiàng)目中config.ts的配置)

import {BundleAnalyzerPlugin} from 'webpack-bundle-analyzer';
const chainWebpack = (config: any) => {
? config.plugin(BundleAnalyzerPlugin).use(BundleAnalyzerPlugin);
};

使用

npm run build

運(yùn)行打包命令（運(yùn)行dev或者start也可以），webpack會(huì)自動(dòng)在瀏覽器中打開一個(gè)可視化分析工具。

可以在這個(gè)工具中查看模塊及其大小，識(shí)別哪些模塊占用了較多的空間。

可視化工具欄詳解

1. Treemap sizes：

是指webpack-bundle-analyzer生成的包大小分析圖中，用于展示不同模塊、chunk或者資源在打包后的大小占比情況的矩形圖（treemap）。

在這個(gè)圖中，每個(gè)矩形的大小代表了對(duì)應(yīng)模塊、chunk或者資源的大小，而顏色則表示該模塊、chunk或者資源的類型。

其中，Stat代表源代碼的大小，即未壓縮的大??；Parsed代表解析后的代碼大小，即應(yīng)用了webpack的優(yōu)化后的大小，也就是我們常說的“打包后的大小”；Gzipped則代表經(jīng)過gzip壓縮后的大小，也就是實(shí)際傳輸?shù)娇蛻舳说拇笮　?/p>

因此，通常情況下，我們更關(guān)注Parsed和Gzipped的大小，因?yàn)樗鼈冎苯佑绊懥藢?shí)際使用的流量和加載時(shí)間。而Stat的大小則可以用來衡量源代碼的復(fù)雜程度和可維護(hù)性等因素。

2. Filter to initial chunks

它的作用是將分析圖中的模塊、chunk或者資源，篩選出與初始頁面加載有關(guān)的模塊和chunk，并將其他模塊和chunk過濾掉。這樣可以讓你更加清晰地了解初始頁面加載所需的代碼和資源，以幫助你進(jìn)行性能優(yōu)化。

需要注意的是，"Filter to initial chunks"選項(xiàng)可能會(huì)過濾掉一些與初始頁面加載無直接關(guān)系的代碼，比如異步加載的代碼或者按需加載的組件等。如果你需要查看全部的代碼和資源，可以將這個(gè)選項(xiàng)禁用。

3. Search modules

它的作用是在分析圖中快速查找模塊或者資源，并高亮顯示匹配的矩形。

使用"Search modules"功能進(jìn)行查找時(shí)，你需要在搜索框中輸入要查找的模塊或者資源的名稱，然后點(diǎn)擊搜索按鈕。如果搜索框中的關(guān)鍵字匹配了分析圖中的某個(gè)模塊或者資源的名稱，那么匹配的矩形將被高亮顯示出來。如果搜索框中的關(guān)鍵字沒有匹配到任何模塊或者資源，分析圖不會(huì)發(fā)生變化。

需要注意的是，"Search modules"功能只能查找模塊或者資源的名稱，無法查找模塊或者資源的其他屬性，如大小、依賴關(guān)系等。此外，在大型的分析圖中，"Search modules"功能可能會(huì)比較慢，因?yàn)樾枰闅v所有的模塊或者資源名稱進(jìn)行匹配。因此，建議在使用"Search modules"功能時(shí)，盡量輸入準(zhǔn)確的關(guān)鍵字，以提高搜索速度和準(zhǔn)確性。