一篇文章看懂NextJS，做出性能优化最佳实践

Introduction浠庤繖绡囨枃绔犲紑濮嬶紝鎴戝皢浠巜hat,why,howtodo鏉ヨВ閲奛extJS浠ュ強濡備綍浼樺寲NextJS鐨勫簲鐢ㄤ綋楠屻€?.浠€涔堟槸NextJS锛烴extJS鏄竴涓熀浜嶳eact鐨刉eb搴旂敤绋嬪簭寮€鍙戞鏋躲€傚畠浠ユ瀬閫熺殑搴旂敤浣撻獙鑰岃憲绉般€傚畠鍐呯疆浜哠ass銆丩ess鍜孍S绛夊姛鑳斤紝寮€绠卞嵆鐢ㄣ€係SR鍙槸NextJS鐨勪竴涓満鏅€傚畠鏈?绉嶆覆鏌撴ā寮忋€傛垜浠渶瑕佷负鎴戜滑鐨勫簲鐢ㄩ€夋嫨姝ｇ‘鐨勬覆鏌撴ā寮忥細ClientSideRendering(CSR)瀹㈡埛绔覆鏌擄紝閫氬父鏄竴涓猄PA锛圫inglePageApplication锛夛紝HTML鏂囦欢锛屽畠鍙寘鍚獼S\CSS璧勬簮锛屼笉娑夊強椤甸潰鍐呭銆傞〉闈㈠唴瀹瑰湪娴忚鍣ㄨВ鏋怞S鍚庨渶瑕佹覆鏌撲袱娆°€係taticSiteGeneration(SSG)Staticpagegeneration閫傜敤浜庝笉闇€瑕侀绻佹洿鏂般€佷笉渚濊禆浜庢湇鍔″櫒鐨勯潤鎬侀〉闈㈠唴瀹圭殑SSR銆係erverSideRendering(SSR)鏈嶅姟鍣ㄧ娓叉煋锛屽浜庨渶瑕佺粡甯告洿鏂扮殑闈欐€侀〉闈㈠唴瀹癸紝姣旇緝閫傚悎浣跨敤SSR锛屼緷璧栨湇鍔″櫒绔€侷ncreIncrementalSiteRendering(ISR)澧為噺闈欐€佺敓鎴愶紝鍩轰簬椤甸潰鍐呭鐨勭紦瀛樻満鍒讹紝鍙敓鎴愭湭缂撳瓨鐨勯潤鎬侀〉闈紝渚濊禆鏈嶅姟鍣ㄣ€係SG/ISR閮介潪甯搁€傚悎鍗氬搴旂敤銆備笉鍚屼箣澶勫湪浜嶴SG鏄湪鏋勫缓鏃剁敓鎴愮殑锛屾晥鐜囪緝浣庛€侷SR鍩轰簬鐜版湁缂撳瓨鎸夐渶鐢熸垚锛屾晥鐜囨洿楂樸€?銆佷负浠€涔堥€夋嫨NextJS浼樼偣锛氶灞忓姞杞介€熷害蹇€傛垜浠殑宓屽叆寮忓満鏅瘮杈冧赴瀵岋紝鎵€浠ユ垜浠洿杩芥眰椤甸潰鐨勯灞忎綋楠屻€侼extJS鐨勪骇鐗╃被浼间簬MPA锛堝椤靛簲鐢級銆傛寜闇€鍔犺浇璧勬簮锛岃€屼笉鏄姞杞芥暣涓簲鐢紝鍙互瀹炵幇姣擲PA鏇存瀬鑷寸殑鐢ㄦ埛浣撻獙銆係EO浼樺寲SSR\SSG\ISR鏀寔椤甸潰鍐呭棰勫姞杞斤紝鎻愰珮鎼滅储寮曟搸鍙嬪ソ搴︺€傚唴缃壒鎬т娇鐢ㄦ柟渚匡紝鏋佸叾NextJS鍐呯疆浜唃etStaticProps銆乬etServerSideProps銆乶ext/image銆乶ext/link銆乶ext/script绛夌壒鎬э紝鍏呭垎鍒╃敤妗嗘灦鐨勮繖浜涚壒鎬т负鎮ㄧ殑鐢ㄦ埛鎻愪緵鍏锋湁鏇撮珮灞傛鐨勭粡楠岋紝杩欏皢鍦ㄥ悗闈㈣缁嗚璁恒€傜己鐐癸細椤甸潰鍝嶅簲姣擲PA鎱€傜敱浜庨〉闈㈣祫婧愭槸鎸夐〉闈㈡寜闇€鍔犺浇鐨勶紝姣忔璺敱鍙樺寲閮介渶瑕佸姞杞芥柊鐨勮祫婧愩€傚鏋滀紭鍖栦笉澶熷ソ锛岄〉闈細鍗￠】銆傚紑鍙戜綋楠屼笉澶熷弸濂姐€傚湪寮€鍙戠幆澧冧腑锛孨extJS浼氭牴鎹綋鍓嶉〉闈㈡寜闇€瀹炴椂鏋勫缓璧勬簮锛屽奖鍝嶅紑鍙戣皟璇曚綋楠屻€?銆佸浣曞皢NextJS鐨勫簲鐢ㄤ綋楠屾彁鍗囧埌鏋佽嚧锛屼絾鏄ソ鐢紝閭ｄ箞濡備綍璇勪环鎴戜滑鐨勫簲鐢ㄦ槸鍚﹀ソ鐢ㄥ憿锛熸渶鐩存帴鐨勮В鍐冲姙娉曞綋鐒舵槸閫氳繃鏀堕泦鐢ㄦ埛鍙嶉鏉ュ垽鏂€備粠寮€鍙戝眰闈㈡潵鐪嬶紝鏈€鐩磋鐨勬柟寮忓氨鏄€氳繃鎬ц兘鍜岀伅濉旀潵鍒ゆ柇銆?.1浼樺寲鍓嶅浣犳墍瑙侊紝鐢变簬搴旂敤妯″潡鐨勫鏉傛€э紝鎴戜滑鐨凬extJS搴旂敤鐨勫垵濮嬫€ц兘涓嶆槸寰堝ソ锛岀敋鑷冲緢宸瓼CP锛氱涓€娆″唴瀹圭粯鍒舵椂闂翠负1.8s鐏锛氭€ц兘璇勫垎鎶ュ憡涓?5鍒?TimetoInteractive(TTI)浜や簰鏃堕棿涓?.3s锛屼竴鑸彂鐢熷湪椤甸潰渚濊禆鐨勮祫婧愬凡缁忓姞杞藉畬鎴愮殑鏃跺€欍€俷etwork锛氭垜浠渶瑕佸湪姣忔璺敱璺宠浆鐨勬椂鍊欐寜闇€鍔犺浇璧勬簮锛屾墍浠ラ渶瑕佸崟涓〉闈㈢殑DomContentLoaded灏藉彲鑳界殑蹇紝浠ヤ繚璇侀〉闈om缁撴瀯鐨勬覆鏌撴晥鐜囥€傞〉闈㈠缓璁炬椂闂达紒[image.png](https://img12.360buyimg.com/img/s754x284_jfs/t1/101480/17/34324/94579/635a1b57E31984e57/bfc7eb30cd6bd34d.png)杩欎簺鎸囨爣闂存帴鍙嶉缁欏簲鐢ㄤ綋楠岄棶棰樹簾寰呰В鍐炽€?.2浼樺寲鐢ㄦ埛浣撻獙鐨勪紭鍖栨帾鏂?.鍚敤gzip鍘嬬缉閫氳繃缃戠粶鍙互鐪嬪埌璧勬簮鐨勫疄闄呭ぇ灏忓拰http璇锋眰鐨勫ぇ灏忋€傚鏋滀笉寮€鍚帇缂╋紝涓よ€呭熀鏈病鏈夊尯鍒€俫zip浼樺寲鍚庯紝鍙互鐪嬪埌鍘嬬缉鏁堟灉杩樻槸寰堟槑鏄剧殑銆傚紑鍚痭ginxgzip鍘嬬缉gzipon;gzip_min_length100;gzip_buffers416k;#gzip_http_version1.0;gzip_comp_level9;gzip_typesgzip_typestext/plainapplication/x-javascripttext/cssapplication/xmltext/javascriptapplication/x-httpd-phpimage/jpegimage/gifimage/pngapplication/javascript;gzip_varyon;gzip_proxiedany;閫氳繃鍝嶅簲澶村垽鏂帇缂╂槸鍚︽湁鏁堬紒[image.png](https://img12.buyimg.com/img/s356x278_jfs/t1/123411/6/32476/40551/635a1e58E1bef9e2f/8e931332a588fc1e.png)2.鍩轰簬鍔ㄦ€佸姩鎬佸姞杞界殑闈為灞忕粍浠跺湪椤甸潰鍔犺浇杩囩▼涓紝瀵逛簬涓€浜涗笉鍙鐨勭粍浠讹紝鎴戜滑搴旇鍔ㄦ€佸鍏ワ紝鑰屼笉鏄甯稿鍏ワ紝淇濊瘉鍙湁鍦ㄩ渶瑕佺粍浠剁殑鏃跺€欙紝鎵嶅幓鍙栧搴旂殑璧勬簮锛屽苟涓旈€氳繃next/dynamic锛屾鏋跺眰闈細鍦ㄦ瀯寤烘椂甯垜浠垎鍖卛mportdynamicfrom'next/dynamic'constModal=dynamic(()=>import('../components/mModal'));瀵煎嚭榛樿鍊紅functionIndex(){return({showModal&&})}鎵撳紑缃戠粶work褰撴弧瓒虫潯浠舵椂锛屾偍浼氱湅鍒颁竴涓柊鐨勭綉缁滆姹傛鍦ㄥ彂鍑轰互鑾峰彇鍔ㄦ€佺粍浠讹紙鍗曞嚮鎸夐挳鎵撳紑妯″紡锛夈€?.next/script浼樺寲鑴氭湰鍔犺浇next/script鍙互甯姪鎴戜滑鍐冲畾js鑴氭湰鍔犺浇绛栫暐鐨勬椂鏈簗璇存槑----|---浜掑姩鍓峾浜や簰鍓嶅姞杞借剼鏈琣fterInteractive|浜や簰鍚庡姞杞借剼鏈琹azyOnload|娴忚鍦ㄦ湇鍔″櫒绌洪棽鏃跺姞杞借剼鏈琡``html```4.next/image浼樺寲鍥剧墖璧勬簮next/image鍙互甯姪鎴戜滑鍘嬬缉鍥剧墖锛堝ぇ灏忔垨璐ㄩ噺锛夛紝骞朵笖鏀寔鍥剧墖鐨勫欢杩熷姞杞姐€傞粯璁ゅ姞杞藉櫒渚濊禆浜巒extjs鐨勫唴缃湇鍔°€傛偍杩樺彲浠ラ€氳繃{loader:custom}鑷畾涔塴oaderimportImagefrom"next/image";constmyLoader=({src,width,quality})=>{杩斿洖`https://example.com/${src}?w=${width}&q=${quality||75}`;};constMyImage=(props)=>{return();};5.next/linkpreload鍩轰簬hover璇嗗埆鐢ㄦ埛鎰忓浘锛屽綋鐢ㄦ埛hover鍒癓ink鏍囩鏃讹紝棰勫姞杞藉嵆灏嗚烦杞殑椤甸潰璧勬簮锛岃繘涓€姝ラ槻姝㈤〉闈㈠崱椤縤mportLinkfrom"next/link";鐩爣椤甸潰;6.闈欐€佸唴瀹归鍔犺浇鍩轰簬getStaticProps棰勫姞杞戒笉闇€瑕佹潈闄愮殑鍐呭锛屽湪鏋勫缓NextJS鏃朵細缂栬瘧鍒伴〉闈腑锛屽噺灏慼ttp璇锋眰娆℃暟functionBlog({posts}){return(

{posts.map((post)=>(
• {post.title}
))}

);}瀵煎嚭寮傛鍑芥暟getStaticProps(){constres=awaitfetch("https://.../posts");constposts=awaitres.json();return{props:{posts,},};}exportdefaultBlog;7.绗笁鏂瑰簱杩囧ぇ鏃讹紝鍩轰簬umd鎸夐渶鍔犺浇绗笁鏂瑰簱杩囧ぇ鏃讹紝浣跨敤umd瀵煎叆锛屽湪闇€瑕佺殑鍦烘櫙閫氳繃鑴氭湰鍔犺浇//灏佽鍔犺浇umd妯″潡鐨刪ocfunctionloadUmdHoc(Comp:(props)=>JSX.Element,src:string){returnfunctionHoc(props){const[isLoaded,setLoaded]=useState(!!Array.from(鏂囨。.body.getElementsByTagName('script')).filter((item)=>item.src.match(src),.length,);useEffect(()=>{if(isLoaded)return;constscript=document.createElement('script');script.src=src;script.onload=()=>{setLoaded(true);};document.body.append(鑴氭湰);},[]);if(isLoaded){return;}杩斿洖<>/>锛泒;}functionUpload(){//todo浣跨敤umd妯″潡return<>/>;}//浣跨敤璇ョ粍浠舵椂锛屽姞杞絟ocexportdefaultloadUmdHoc(Upload,'xxx.umd.js');浼樺寲鐢ㄦ埛浣撻獙1銆佸熀浜巙rlimport鐦﹁韩锛屾彁楂樼紪璇戞晥鐜噓rlImport鏄疦extJS鎻愪緵鐨勪竴涓疄楠屾€х壒鎬э紝鏀寔鍔犺浇杩滅▼esmoduleNextJS浼氬皢鍔犺浇杩滅▼esmodule鐨勬ā鍧楃紦瀛樺湪鏈湴锛屽噺灏戞垜浠渶瑕佹瀯寤虹殑妯″潡鏁伴噺.缂虹偣鏄細褰卞搷涓€涓猼reeShaking鐨勬晥鏋溿€傛墍浠ュ湪鐢熶骇鐜涓紝鎺ㄨ崘浣跨敤NormalModuleReplacementPlugin鏉ユ浛鎹㈠urlimport鐨勪緷璧栥€傛墽琛屾湰鍦版浛鎹?**2銆倃ebpack閰嶇疆閫夋嫨鎬у拷鐣?*瀵逛簬涓€浜涚敓浜х幆澧冪殑閰嶇疆锛屾垜浠彲浠ラ€氳繃鍖哄垎鐜鏉閫夋嫨鎬у湴蹇界暐涓€浜涢厤缃甡锛屾瘮濡傚紑鍙戠幆澧冧腑鏆撮湶鐨刴odulefederation锛屾垜浠彲浠ュ拷鐣?**pro.conf.js**锛乕鍥剧墖.png](https://img12.360buyimg.com/img/s1548x1638_jfs/t1/189426/33/28456/234417/635a1fa7E31d64d4f/29311f6b5d73342d.png)-**3.鍚敤SWC**SWC鏄紪璇戝熀浜嶳ust鐨勫紑鍙戝伐鍏凤紝鍙敤浜庣紪璇戝拰鎵撳寘銆傛寜鐓у畼鏂硅娉曪紝姣擝abel蹇?0~70鍊嶃€侼extJS12鐗堟湰榛樿鎵撳紑SWC銆傛敮鎸併€傚惎鐢⊿WC鍚庯紝搴旂敤绋嬪簭鐨勭紪璇戦€熷害姣擝abel蹇?7鍊嶏紝鍒锋柊閫熷害蹇?鍊嶃€傞渶瑕佹敞鎰忕殑鏄紝濡傛灉閫氳繃.babelrc鑷畾涔塨abel閰嶇疆锛孲WC鐨勯儴鍒嗗姛鑳戒細琚叧闂€?.3浼樺寲鍚庯紝浠庝互涓嬪嚑涓寚鏍囧彲浠ョ湅鍑猴紝鎴戜滑搴旂敤鐨勪綋楠屾湁浜嗗緢澶х殑鎻愬崌锛屽疄闄呯殑浜や簰浣撻獙涔熸彁鍗囦簡寰堝銆傚湪璺敱璺宠浆涓婂疄鐜颁簡绫讳技SPA鐨勪綋楠岋紝鍗充娇姣忎釜椤甸潰鐨勮祫婧愰兘鏄寜闇€鍔犺浇鐨勶紝涔熶笉浼氬啀鍑虹幇椤甸潰鍗￠】鐨勬儏鍐点€侳CP锛氶娆″唴瀹圭粯鍒舵椂闂翠粠1.8s浼樺寲鍒?.35s锛屾彁鍗囪繎80%lighthouse锛氬垎鏁颁粠55鎻愬崌鍒?0锛孴TI浠?.3s浼樺寲鍒?.4s锛屽垎鍒彁鍗囦簡30%/64%锛宑hrome涓渶濂界殑瀹炶返鍒嗘暟杈惧埌浜嗘弧鍒嗮煉痭etwork锛欴omContentLoaded浠?.42s浼樺寲鍒?.67s锛屾彁鍗囦簡77%椤甸潰鏋勫缓鏃堕棿锛氬熀鏈弧瓒虫绉掔骇椤甸潰缂栬瘧闇€姹傦紝骞朵笖鏈夊闀胯秴杩?0%4.鍚庣画璁″垝瀹炵幇鏇存瀬鑷存湭鏉ヨ鍒掑皢璧勬簮涓婁紶鍒癈DN锛屽噺灏戠瓑寰呮湇鍔″櫒鍝嶅簲鐨勬€ц兘鎹熷け锛屽苟鍔犲叆PWA鐨勭绾跨紦瀛樼壒鎬с€傚弬鑰冩枃绔燨ptimizeNext.jsAppBundleandImproveItsPerformance鎴戠湅鍒扮殑Next.js锛氭洿鐜颁唬鐨凬eptune