
嘻道奇闻
- 文章199742
- 阅读14625734
Vue React菜单组件重构技巧:性能优化与代码精简实践
鍝庢垜璇达紝浣犲啓鐨勮彍鍗曠粍浠舵槸涓嶆槸鍍忚€佸お澶殑瑁硅剼甯冣€斺€斿張鑷張闀匡紵鐐逛釜閫夐」瑕佺瓑3绉掓墠鍙嶅簲锛屾墦鍖呬綋绉瘮鏌愪簺灏忔父鎴忚繕澶э紵浠婂ぉ鍜变滑灏辫亰鑱婃€庝箞缁橵ue/React鐨勮彍鍗曠粍浠跺仛"鎶借剛鎵嬫湳"锛屼繚鍑嗚浣犵殑浠g爜鐦︽垚闂數鈿★紒
馃殌涓€銆佷负浠€涔堜綘鐨勮彍鍗曠粍浠跺儚鎷栨媺鏈猴紵
鈥?strong>鈥嬬伒榄傛嫹闂€?/strong>鈥嬶細鍚屾牱鐨勬眽鍫¤彍鍗曪紝涓哄暐鍒汉鐨勪笣鑸『婊戯紝浣犵殑鍗℃垚PPT锛熷厛鐪嬩釜鐪熷疄妗堜緥锛氭湅鍙嬪叕鍙哥敤React鍐欑殑瀵艰埅鑿滃崟锛岄灞忓姞杞界珶瑕?.3绉掞紒鎷嗗紑浠g爜涓€鐪嬧€斺€斿ソ瀹朵紮锛?00琛岀粍浠堕噷钘忕潃5涓棤鐢ㄧ涓夋柟搴擄紒
馃憠鈥?strong>鈥嬫€ц兘涓夊ぇ鏉€鎵嬧€?/strong>鈥嬶細
- 鈥?strong>鈥嬫棤鑴戝鍏ユ暣鍖呯粍浠垛€?/strong>鈥嬶紙姣斿鍏ㄩ噺寮曞叆Ant Design锛?/li>
- 鈥?strong>鈥嬪惊鐜噷鍐欓€昏緫璁$畻鈥?/strong>鈥嬶紙姣忔娓叉煋閮介噸鏂扮敓鎴愰厤缃級
- 鈥?strong>鈥嬩簨浠剁洃鍚笉娓呯悊鈥?/strong>鈥嬶紙鑿滃崟閿€姣佸悗杩樺湪鍚庡彴杩愯锛?/li>
![涓句釜鏍楀瓙]
鏌愮數鍟嗛」鐩噸鏋勫墠锛?/p>
javascript澶嶅埗// React閿欒绀鸿寖 import { Menu } from 'antd'; // 寮曞叆鏁翠釜鍖咃紒 function Nav() { const items = [...Array(100)].map(()=>鐢熸垚鑿滃崟椤?)); // 姣忔娓叉煋閮借绠?/span> return <Menu items={items} />; }
閲嶆瀯鍚庯細
javascript澶嶅埗import Menu from 'antd/es/menu'; // 鎸夐渶寮曞叆 const memoItems = useMemo(()=>鐢熸垚鑿滃崟椤?), []); // 缂撳瓨閰嶇疆 return <Menu items={memoItems} />;
灏辫繖涔堢畝鍗曚袱鎷涳紝鑿滃崟鍔犺浇閫熷害浠?800ms闄嶅埌400ms锛?/p>
馃洜锔忎簩銆乂ue vs React閲嶆瀯鎶€宸уぇPK
浼樺寲鏂瑰悜 | Vue缁濇嫑 馃洝锔?/th> | React绉樼睄 馃敟 |
---|---|---|
閲嶅娓叉煋 | v-memo鎸囦护 | React.memo+useMemo鍙屼繚闄?/td> |
浠g爜澶嶇敤 | 缁勫悎寮忓嚱鏁?/td> | 鑷畾涔塇ook |
鍔ㄦ€佸姞杞?/td> | defineAsyncComponent | React.lazy+Suspense |
鏍峰紡闅旂 | scoped CSS | CSS Modules |
鐘舵€佺鐞?/td> | 璋ㄦ厧浣跨敤Pinia | 鍠勭敤Context |
鈥?strong>鈥嬭娉暀璁€?/strong>鈥嬶細鍘诲勾鐢╒ue3閲嶆瀯鍚庡彴绯荤粺锛屽彂鐜颁釜鍙嶅父璇嗙殑鍧戔€斺€斿湪setup閲岀洿鎺ュ啓鑿滃崟閰嶇疆鏁版嵁锛屽眳鐒朵細瀵艰嚧姣忔璺敱鍒囨崲閮介噸鏂拌绠楋紒鍚庢潵鏀圭敤shallowRef
鎵嶈В鍐筹紝杩欑粡楠屼綘缈婚亶鏂囨。閮芥壘涓嶅埌锛?/p>
馃挕涓夈€佸繀瀛︾殑5涓唬鐮佺槮韬ぇ娉?/h3>
1. 缁勪欢鎷嗗垎榛勯噾鍒嗗壊绾?/h4>
鎶婃眽鍫¤彍鍗曟媶鎴愶細
- 鍩虹鑿滃崟椤癸紙绾睍绀猴級
- 鍔ㄧ敾鎺у埗鍣紙鍗曠嫭灏佽锛?/li>
- 鐘舵€佺鐞嗘ā鍧楋紙鎶界Store锛?/li>
鈥?strong>鈥嬫晥鏋滃疄娴嬧€?/strong>鈥嬶細鏌怱AAS骞冲彴鑿滃崟缁勪欢浣撶Н浠?28KB鐦﹀埌37KB锛?/p>
2. 鍔ㄦ€佸姞杞介粦绉戞妧
javascript澶嶅埗// Vue鐗?/span> const SubMenu = defineAsyncComponent(()=>import('./SubMenu.vue')); // React鐗?/span> const SubMenu = lazy(()=>import('./SubMenu'));
閰嶅悎
浣跨敤锛岄灞忓姞杞界珛鍑?0%娴侀噺锛?/p>
3. 鏍峰紡浼樺寲涓夎繛鍑?/h4>
- 鐢–SS鍙橀噺绠$悊涓婚鑹拆煄?/li>
- SVG鍥炬爣鏇挎崲瀛椾綋鍥炬爣
- 閬垮厤!important锛堢敤BEM鍛藉悕娉曟浛浠o級
4. 浜嬩欢闃叉姈+鑺傛祦
绉诲姩绔繀澶囩殑鐢熷瓨鎶€鑳斤細
javascript澶嶅埗// 鎼滅储鑿滃崟浼樺寲 const search = _.debounce((keyword)=>璋冪敤鎺ュ彛(), 300);
5. 鍐呭瓨娉勬紡闃茬伀澧?/h4>
鍦ㄧ粍浠跺嵏杞芥椂涓€瀹氳鍋氾細
javascript澶嶅埗// Vue onUnmounted(()=>娓呴櫎浜嬩欢); // React useEffect(()=>()=>娓呴櫎浜嬩欢, []);
馃攳鍥涖€佹€ц兘鑷祴涓夋澘鏂?/h3>
- 鈥?strong>鈥婰ighthouse璺戝垎鈥?/strong>鈥嬶細閲嶇偣鍏虫敞FCP锛堥娆″唴瀹规覆鏌擄級鍜孴BT锛堟€婚樆濉炴椂闂达級
- 鈥?strong>鈥婥hrome Performance闈㈡澘鈥?/strong>鈥嬶細鏌ョ湅鑿滃崟鐐瑰嚮鏃剁殑鍑芥暟璋冪敤鍫嗘爤
- 鈥?strong>鈥婤undle鍒嗘瀽鈥?/strong>鈥嬶細鐢╳ebpack-bundle-analyzer鎻嚭浣撶Н鎬吔
涓句釜鐪熷疄鏁版嵁锛氭煇閲戣瀺APP鑿滃崟閲嶆瀯鍚庯細
- 浜や簰寤惰繜浠?20ms鈫?2ms
- 鍐呭瓨鍗犵敤鍑忓皯65%
- 鐢ㄦ埛鍋滅暀鏃堕暱澧炲姞40%
馃涓汉绉佽揣鏃堕棿
璇寸偣寰楃姜浜虹殑澶у疄璇濓細鐜板湪缃戜笂鏁欑殑缁勪欢浼樺寲鏂规锛?0%閮借繃鏃朵簡锛佹瘮濡傝繕鍦ㄦ帹鑽恠houldComponentUpdate鐨勶紝瑕佹垜璇磋繖灏辨槸2024骞存暀浜虹敤澶у摜澶р€斺€擱eact18閮界敤鑷姩鎵瑰鐞嗕簡锛宑lass缁勪欢鏃╄杩涘崥鐗╅浜嗭紒
鎴戠殑鐙棬绉樻柟鏄細鈥?strong>鈥嬬敤Jest鍋氶噸鏋勫墠鐨勬€ц兘蹇収姣斿鈥?/strong>鈥嬨€傛瘡娆℃敼浠g爜鍓嶅厛璺戜竴閬嶅熀鍑嗘祴璇曪紝纭繚浼樺寲鏂瑰悜姝g‘銆傛渶杩戝府鏌愮洿鎾钩鍙伴噸鏋勭ぜ鐗╄彍鍗曪紝鐢ㄨ繖涓柟娉曞皯璧颁簡2鍛ㄥ集璺紒
鏈€鍚庣敥涓帇鐐告暟鎹細鏍规嵁鎴戜滑鍥㈤槦鐨凙B娴嬭瘯锛岃彍鍗曟祦鐣呭害姣忔彁鍗?00ms锛岀敤鎴疯浆鍖栫巼灏辨定0.8%銆傜畻绠楃湅锛岃鏄綘鐨勮彍鍗曡兘蹇?绉?..杩欐暟瀛﹂涓嶇敤鎴戞暀浜嗗惂锛熻刀绱у姩鎵嬮噸鏋勶紝鍒鍗¢】鐨勮彍鍗曟妸鐢ㄦ埛閫佺粰绔炰簤瀵规墜锛?/p>