【NextJS】一文读懂NextJS，做出性能优化最佳实践

Introduction浠庤繖绡囨枃绔犲紑濮嬶紝鎴戝皢浠巜hat銆亀hy銆乭o鈥嬧€媤do鏉ヨВ閲奛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浼樺寲濂絊SR\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/Load灏藉彲鑳界殑蹇€傞〉闈㈡瀯寤烘椂闂寸瓑杩欎簺鎸囨爣闂存帴鍙嶉浜嗗簲鐢ㄤ簾寰呰В鍐崇殑浣撻獙闂銆?.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;閫氳繃鍝嶅簲澶村垽鏂帇缂╂槸鍚︽湁鏁?**2銆傞潪棣栧睆缁勪欢鍩轰簬鍔ㄦ€佸姞杞?*鍦ㄩ〉闈㈠姞杞借繃绋嬩腑锛屽浜庝竴浜涗笉鍙鐨勭粍浠讹紝鎴戜滑搴旇鍔ㄦ€佸鍏ワ紝鑰屼笉鏄甯稿鍏ャ€俙淇濊瘉鍙湪闇€瑕佺粍浠剁殑鏃跺€欐墠鍘诲彇瀵瑰簲鐨勮祫婧恅锛岄€氳繃`next/dynamic`锛屽湪鏋勫缓涓紝妗嗘灦灞備細甯垜浠垎鍖卄``javascriptimportdynamicfrom'next/dynamic'constModal=dynamic(()=>import('../components/mModal'));exportdefaultfunctionIndex(){return({showModal&&})}```鎵撳紑缃戠粶銆傚綋婊¤冻鏉′欢鏃讹紝鎮ㄥ皢鐪嬪埌涓€涓柊鐨勭綉缁滆姹傛鍦ㄥ彂鍑轰互鑾峰彇鍔ㄦ€佺粍浠讹紙鍗曞嚮鎸夐挳鎵撳紑涓€涓ā寮忥級銆?**3銆俷ext/script浼樺寲鑴氭湰鍔犺浇**`next/script`鍙互甯姪鎴戜滑`纭畾js鑴氭湰鍔犺浇鐨勬椂鏈篳绛栫暐|璇存槑----|---涔嬪墠浜掑姩|鍙互鍦ㄤ氦浜掍箣鍓嶅姞杞借剼鏈琣fterInteractive|浜や簰鍚庡姞杞借剼鏈琹azyOnload|娴忚鍣ㄧ┖闂叉椂鍔犺浇鑴氭湰```html```-**4.next/image浼樺寲鍥剧墖璧勬簮**`next/image`鍙互甯姪鎴戜滑`鍘嬬缉鍥剧墖锛堝ぇ灏忔垨璐ㄩ噺锛夛紝骞朵笖鏀寔寤惰繜鍔犺浇鍥剧墖銆傞粯璁ゅ姞杞藉櫒渚濊禆浜巒extjs鍐呯疆鐨勬湇鍔★紝涔熷彲浠ラ€氳繃`{loader:custom}`鑷畾涔夊姞杞藉櫒```jsimportImagefrom'next/image'constmyLoader=({src,width,璐ㄩ噺})=>{return`https://example.com/${src}?w=${width}&q=${quality||75}`}constMyImage=(props)=>{return()}```-**5銆俷ext/linkpreloading**鍩轰簬`hover`璇嗗埆鐢ㄦ埛鎰忓浘锛屽綋鐢ㄦ埛鎮仠鍒癓ink鏍囩鏃讹紝`涓哄嵆灏嗚烦杞殑椤甸潰棰勫姞杞借祫婧恅杩涗竴姝ラ槻姝toppagelag```jsimportLinkfrom'next/link'Targetpage```-**6.闈欐€佸唴瀹归鍔犺浇**鍩轰簬`getStaticProps`棰勫姞杞戒笉闇€瑕佹潈闄愮殑鍐呭锛屽湪鏋勫缓NextJS鏃朵細缂栬瘧鍒伴〉闈腑锛宍鍑忓皯http璇锋眰娆℃暟````jsfunctionBlog({posts}){return(

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

)}瀵煎嚭寮傛鍑芥暟getStaticProps(){constres=awaitfetch('https://.../posts')constposts=awaitres.json()return{props:{posts,},}}exportdefaultBlog```-**7.绗笁鏂瑰簱杩囧ぇ鏃讹紝鍩轰簬umd鎸夐渶鍔犺浇**`绗笁鏂瑰簱杩囧ぇ鏃讹紝鐢╱md瀵煎叆`锛屽湪闇€瑕佺殑鍦烘櫙閫氳繃鑴氭湰鍔犺浇```js//灏佽hoc鍑芥暟loadUmdHoc(Comp:(props)=>JSX.Element,src:string){returnfunctionHoc(props){const[isLoaded,setLoaded]=useState(!!Array.from(document.body.getElementsByTagName('script')).filter((item)=>item.src.match(src)).length)useEffect(()=>{if(isLoaded)returnconstscript=document.createElement('script')script.src=srcscript.onload=()=>{setLoaded(true)}document.body.append(script)},[])if(isLoaded){return}return<>/>}}functionUpload(){//todo浣跨敤umd妯″潡return<>/>}//浣跨敤璇ョ粍浠舵椂锛宭oadhocexportdefaultloadUmdHoc(Upload,'xxx.umd.js')```浼樺寲鐮斿彂浣撻獙1.鍩轰簬urlimport杩涜鐦﹁韩锛屾彁楂樼紪璇戞晥鐜噓rlImport鏄疦extJS鎻愪緵鐨勫疄楠屾€х壒鎬э紝鏀寔娣诲姞鍔犺浇杩滅▼esmoduleNextJS浼氬皢鍔犺浇鐨勮繙绋嬫ā鍧楃紦瀛樺湪鏈湴锛岃繖鏍峰彲浠ュ噺灏戞垜浠渶瑕佹瀯寤虹殑妯″潡鏁伴噺銆傜己鐐规槸浼氬奖鍝峵reeShaking鐨勬晥鏋溿€傚洜姝わ紝鍦ㄧ敓浜х幆澧冧腑锛屽缓璁娇鐢╜NormalModuleReplacementPlugin`鏉rlimport2.webpack閰嶇疆閫夋嫨鎬у拷鐣ヤ竴浜涚敓浜х幆澧冪殑閰嶇疆鎴戜滑鍙互閫氳繃鍖哄垎鐜鏉ラ€夋嫨鎬у拷鐣ヤ竴浜涢厤缃紝姣斿modulefederationexposes鍦ㄥ紑鍙戠幆澧冧腑锛屾垜浠彲浠gnoredev.conf.jspro.conf.js3.鍚敤SWC缂栬瘧SWC鏄熀浜嶳ust鐨勫紑鍙戝伐鍏凤紝鏃㈠彲浠ョ紪璇戜篃鍙互鎵撳寘銆傛寜鐓у畼鏂硅娉曪紝姣擝abel蹇?0~70鍊嶃€侼extJS鍦ㄧ増鏈?2涓粯璁ゅ惎鐢ㄣ€係WC鏀寔銆傚惎鐢⊿WC鍚庯紝搴旂敤绋嬪簭鐨勭紪璇戦€熷害姣擝abel蹇?7鍊嶏紝鍒锋柊閫熷害蹇?鍊嶃€傞渶瑕佹敞鎰忕殑鏄紝濡傛灉閫氳繃.babelrc鑷畾涔塨abel閰嶇疆锛孲WC鐨勯儴鍒嗗姛鑳戒細琚叧闂€?.3浼樺寲鍚庯紝浠庝互涓嬪嚑涓寚鏍囧彲浠ョ湅鍑猴紝鎴戜滑搴旂敤鐨勪綋楠屾湁浜嗗緢澶х殑鎻愬崌锛屽疄闄呯殑浜や簰浣撻獙涔熸彁鍗囦簡寰堝銆傚湪璺敱璺宠浆涓婂疄鐜颁簡绫讳技SPA鐨勪綋楠岋紝鍗充娇姣忎釜椤甸潰鐨勮祫婧愰兘鏄寜闇€鍔犺浇鐨勶紝涔熶笉浼氬啀鍑虹幇椤甸潰鍗￠】鐨勬儏鍐点€侳CP锛氶娆″唴瀹圭粯鍒舵椂闂翠粠1.8s浼樺寲鍒?.35s锛屾彁鍗囪繎80%Lighthouse锛氬緱鍒嗕粠55鎻愬崌鍒?0锛孴TI浠?.3s浼樺寲鍒?.6s锛屽垎鍒彁鍗囦簡30%/64%,chrome鏈€浣崇粌涔犳垚缁╄揪鍒版弧鍒嗮煉綉缁滐細DomContentLoaded浠?.42s浼樺寲鍒?.68s锛孡oad浠?.77s浼樺寲鍒?.47s锛屽垎鍒彁鍗囦簡77%/61%銆?.鍚庣画瑙勫垝涓轰簡瀹炵幇鏇存瀬鑷寸殑鐢ㄦ埛浣撻獙锛屾垜浠鍒掓湭鏉ュ皢璧勬簮涓婁紶鍒癈DN锛屽噺灏戠瓑寰呮湇鍔″櫒鍝嶅簲鐨勬€ц兘鎹熷け锛屽鍔燩WA鐨勭绾跨紦瀛樼壒鎬с€傚弬鑰冩枃绔燨ptimizeNext.jsAppBundleandImproveItsPerformance鎴戣寰桸ext.js:AmoremodernNeptune鏂囩珷姣旇緝闀匡紝鎰熻阿闃呰锛屽笇鏈涘悇浣嶇湅瀹樻湁鎵€鏀惰幏~~~濡傛灉杩欑瘒鏂囩珷瀵逛綘鏈夊府鍔╁ぇ瀹跺府甯繖锛屾杩庡叧娉ㄦ垜鐨勫崥瀹?/p>