浣滆€咃細Marc璇戣€咃細FrontendXiaozhi鏉ユ簮锛歞ev宸叉巿鏉冨師浣滆€呯炕璇戙€傜偣璧炲啀鐪嬶紝寰俊鎼滅储銆愬ぇ鎷涘ぉ涓嬨€戯紝鍏虫敞B绔欍€愬墠绔皬鏅恒€戯紝姝や汉娌℃湁澶у巶鑳屾櫙锛屼絾鎬佸害绉瀬銆傛湰鏂囧凡鏀跺綍鍒癎itHubhttps://github.com/qq44924588...锛屾枃绔犲凡鍒嗙被锛屼篃鏁寸悊浜嗗緢澶氭垜鐨勬枃妗ｅ拰鏁欑▼璧勬枡銆傛渶杩戝紑婧愪簡涓€涓猇ue缁勪欢锛屼絾鏄繕涓嶅瀹屽杽銆傛杩庡ぇ瀹朵竴璧峰畬鍠勶紝涔熷笇鏈涘ぇ瀹惰兘缁欎釜star鏀寔涓€涓嬨€傝阿璋€俫ithub鍦板潃锛歨ttps://github.com/qq44924588...杩欑瘒鏂囩珷涓昏浠嬬粛10绉嶅揩閫熸彁鍗囩綉绔欐€ц兘鐨勬柟娉曪紝5鍒嗛挓灏卞彲浠ュ簲鐢ㄥ埌浣犵殑缃戠珯锛屽簾璇濅笉澶氳锛屼笅闈㈠紑濮嬪惂閲嶇偣馃拵銆?.鏂囦欢鍘嬬缉鏂囦欢鍘嬬缉鍙互鍑忓皯閫氳繃缃戠粶浼犺緭鐨勫瓧鑺傛暟銆傛湁鍑犵鍘嬬缉绠楁硶銆侴zip鏄渶娴佽鐨勶紝浣嗘槸閫氳繃Brotli锛屾偍鍙互浣跨敤鏇存柊鐢氳嚦鏇村ソ鐨勫帇缂╃畻娉曘€傚鏋滀綘鎯虫鏌ヤ綘鐨勬湇鍔″櫒鏄惁鏀寔Brotli锛屼綘鍙互浣跨敤Brotli.pro銆傚鏋滄偍鐨勬湇鍔″櫒涓嶆敮鎸丅rotli锛屾偍鍙互鎸夌収杩欎釜绠€鍗曠殑鎸囧崡瀹夎瀹凁煈嶏細NginxonLinuxApacheNodeJs-Express2銆傚浘鍍忓帇缂╂湭鍘嬬缉鐨勫浘鍍忔槸涓€涓法澶х殑娼滃湪鎬ц兘鐡堕銆傚鏋滃湪灏嗗浘鍍忔彁渚涚粰鐢ㄦ埛涔嬪墠鏈鍏惰繘琛屽帇缂╋紝鍒欎細浼犺緭涓嶅繀瑕佺殑瀛楄妭銆傛湁鍑犵鏈夌敤鐨勫伐鍏峰彲鐢ㄤ簬蹇€熷帇缂╁浘鍍忚€屼笉鎹熷け鍙璐ㄩ噺銆傛垜涓昏浣跨敤Imagemin銆傚畠鏀寔澶氱鍥惧儚鏍煎紡锛屾偍鍙互灏嗗叾鐢ㄤ綔鍛戒护琛岀晫闈㈡垨npm妯″潡銆俰mageminimg/*--out-dir=dist/images涔熷彲浠ュ湪椤圭洰涓紩鍏pm锛屼娇鐢╥magemin-mozjpeg锛屽彲浠ュ皢JPEG鍥剧墖鍘嬬缉鍒板師鏉ョ殑60%锛歝onstimagemin=require('imagemin');constimageminMozjpeg=require('imagemin-mozjpeg');(async()=>{constfiles=awaitimagemin(['img/*.jpg'],{鐩殑鍦帮細'dist/img',鎻掍欢锛歔imageminMozjpeg({璐ㄩ噺锛?0}),]});console.log(files);})();鍦ㄦ垜鐨勪緥瀛愪腑锛屽畠灏嗘枃浠跺ぇ灏忎粠4MB鍑忓皯鍒?00kB:3銆傚浘鍍忔牸寮忎娇鐢ㄧ幇浠ｅ浘鍍忔牸寮忕‘瀹炲彲浠ユ彁楂樻€ц兘銆俉ebP鍥惧儚姣擩PEG鍜孭NG灏忥紝閫氬父灏?5%-35%銆俉ebP涔熷緱鍒颁簡娴忚鍣ㄧ殑骞挎硾鏀寔銆傛垜浠娇鐢╥mageminnpm鍖呭苟鍚戝叾涓坊鍔燱ebP鎻掍欢銆備互涓嬩唬鐮佸皢鎴戠殑鍥惧儚鐨刉ebP鐗堟湰杈撳嚭鍒癲ist鏂囦欢澶逛腑銆俢onstimagemin=require('imagemin');constimageminWebp=require('imagemin-webp');(async()=>{constfiles=awaitimagemin(['img/*.jpg'],{鐩殑鍦帮細'dist/img',鎻掍欢:[imageminWebp({quality:50})]});console.log(files);})();鎴戜滑鍐嶆潵鐪嬫枃浠跺ぇ灏忥細鍘熸潵鏂囦欢澶у皬姣斿師鍥剧缉灏忎簡涓庡帇缂╁悗鐨凧PG鏂囦欢鐩告瘮锛學ebP瀵瑰浘鐗囩殑鍘嬬缉鏁堟灉鏇存槑鏄撅紝WebP鐗堟瘮鍘熷浘灏忎簡43%鍘嬬缉鐨凧PEG鐗堟湰銆?.鍥惧儚鐨勫欢杩熷姞杞藉浘鍍忕殑寤惰繜鍔犺浇鏄竴绉嶅欢杩熻€屼笉鏄彁鍓嶅姞杞藉睆骞曞鍥惧儚鐨勬妧鏈€傚綋瑙ｆ瀽鍣ㄩ亣鍒版纭姞杞界殑鍥惧儚鏃讹紝瀹冧細鍑忔參鍒濆椤甸潰鍔犺浇閫熷害銆備娇鐢ㄥ欢杩熷姞杞斤紝鎮ㄥ彲浠ュ姞蹇繘绋嬪苟鍦ㄤ互鍚庡姞杞藉浘鍍忋€備娇鐢╨azysize寰堝鏄撳仛鍒拌繖涓€鐐广€備娇鐢╨azysize鑴氭湰鍜屾祻瑙堝櫒瀵瑰姞杞藉睘鎬х殑鏀寔锛屾偍鍙互鍍忚繖鏍蜂紭鍖栵細鍒帮細搴撳皢澶勭悊鍏朵綑閮ㄥ垎锛屾鏃舵偍鍙互浣跨敤娴忚鍣ㄩ獙璇?杞埌鎮ㄧ殑缃戠珯骞舵壘鍒版偍鐨勫浘鐗囨爣绛俱€傚鏋滅被浠巐azyload鏇存敼涓簂azyloaded锛屽畠浼氳捣浣滅敤銆?.缂撳瓨HTTP鏍囧ご缂撳瓨鏄彁楂樼珯鐐归€熷害鐨勫揩閫熸柟娉曘€傚畠鍑忓皯浜嗚闂€呯殑椤甸潰鍔犺浇鏃堕棿銆傛垜浠彲浠ュ憡璇夋祻瑙堝櫒鍦ㄧ壒瀹氭椂闂寸紦瀛樻枃浠躲€傚鏋滀綘瀵瑰悗鍙版湁鎵€浜嗚В锛岄偅涔堥厤缃紦瀛樺氨涓嶉毦浜嗐€傛垜浠彲浠ヤ娇鐢ㄤ互涓婣PI杩涜缂撳瓨锛欳ache-ControlETagLast-Modified6銆傚唴鑱斿叧閿瓹SSCSS鏄覆鏌撻樆濉炵殑锛岃繖鎰忓懗鐫€娴忚鍣ㄥ繀椤诲湪缁樺埗鍍忕礌涔嬪墠涓嬭浇骞跺鐞嗘墍鏈塁SS鏂囦欢銆傞€氳繃鍐呰仈鍏抽敭CSS鍙互澶уぇ鍔犲揩杩欎釜杩囩▼銆傛垜浠彲浠ラ€氳繃浠ヤ笅姝ラ鍋氬埌杩欎竴鐐癸細璇嗗埆鍏抽敭CSS濡傛灉鎮ㄤ笉鐭ラ亾鎮ㄧ殑鍏抽敭CSS鏄粈涔堬紝鎮ㄥ彲浠ヤ娇鐢–ritcal銆丆riticalCSS鎴朠enthouse銆傛墍鏈夎繖浜涘簱閮戒粠缁欏畾瑙嗗彛鍙鐨凥TML鏂囦欢涓彁鍙朇SS銆俢riticalCSS妗堜緥濡備笅锛歳equire('fs');vartmpDir=require('os').tmpdir();varcssUrl='https://web.dev/app.css';varcssPath=path.join(tmpDir,'app.css');request(cssUrl).pipe(fs.createWriteStream(cssPath)).on('close',function(){criticalcss.getRules(cssPath,function(err,output){if(err){鎶涘嚭鏂伴敊璇?err);}else{criticalcss.findCritical("https://web.dev/",{rules:JSON.parse(output)},function(err,output){if(err){thrownewError(err);}else{console.log(output);//灏嗗叾淇濆瓨鍒版枃浠朵腑浠ヤ緵姝ラ2}});}});});鍐呰仈鍏抽敭CSSHTML瑙ｆ瀽鍣ㄩ亣鍒版牱寮忔爣绛惧苟绔嬪嵆澶勭悊鍏抽敭CSS銆?head>婊炲悗闈炲叧閿瓹SS闈炲叧閿瓹SS涓嶉渶瑕佺珛鍗冲鐞嗐€傛祻瑙堝櫒鍙互鍦╫nload浜嬩欢涔嬪悗鍔犺浇瀹冿紝鍥犳鐢ㄦ埛涓嶅繀绛夊緟銆?linkrel="preload"href="/assets/styles.css"as="style"onload="this.onload=null;this.rel='stylesheet'">7.JavaScriptasynchronous/lazyloading/lazyloadingHTML涔熸槸娓叉煋闃诲锛屾祻瑙堝櫒蹇呴』绛夊緟JS鎵ц瀹屾墠鑳藉畬鎴愬HTML鐨勮В鏋愩€備絾鏄垜浠彲浠ュ憡璇夋祻瑙堝櫒绛夊緟JavaScript鎵ц銆傚紓姝ュ姞杞絁avaScript浣跨敤寮傛灞炴€э紝鎮ㄥ彲浠ュ憡璇夋祻瑙堝櫒寮傛鍔犺浇鑴氭湰銆?scriptsrc="app.js"async>deferJavaScriptdefer灞炴€у憡璇夋祻瑙堝櫒鍦℉TML瑙ｆ瀽鍣ㄥ畬鎴愬鏂囨。鐨勮В鏋愪箣鍚庯紝浣嗗湪浜嬩欢DOMContentLoaded瑙﹀彂涔嬪墠杩愯鑴氭湰銆?scriptsrc="app.js"defer>閲嶅鎺掑簭鐨勫唴鑱旇剼鏈唴鑱旇剼鏈珛鍗虫墽琛岋紝娴忚鍣ㄨВ鏋愩€傛墍浠ヤ綘鍙互鎶婂畠浠斁鍦ㄤ綘鐨凥TML鐨勬湯灏撅紝灏卞湪body鏍囩涔嬪墠銆?銆佸埄鐢ㄨ祫婧愭彁绀轰紭鍖栨€ц兘HTML5璧勬簮鎻愮ず锛圧esourceHints锛夊彲浠ョ畝鍗曠悊瑙ｄ负棰勫姞杞斤紝娴忚鍣ㄦ牴鎹紑鍙戣€呮彁渚涚殑鍚庣画璧勬簮鐨勬彁绀鸿繘琛岄€夋嫨鎬у姞杞藉拰浼樺寲銆傗€滈€夋嫨鎬р€濇槸蹇呴』鐨勶紝涔熸槸鏋佸叾閲嶈鐨勶紝涔熸槸鏃╂湡涓嶅悓鏇夸唬鏂规鐨勯噸鐐癸紝鍥犱负鍦ㄥ緢澶氭儏鍐典笅锛岄鍔犺浇浼氬彈鍒板垎閰嶇殑璁＄畻璧勬簮鍜屽甫瀹借祫婧愮殑闄愬埗锛屾祻瑙堝櫒鏈夋潈鏀惧純閭ｄ簺浠ｄ环楂樻槀鐨勯檮鍔犵粍浠躲€傝祫婧愭彁绀哄府鍔╁紑鍙戜汉鍛樺憡璇夋祻瑙堝櫒鍝簺椤甸潰鍙兘绋嶅悗鍔犺浇銆傝瑙勮寖瀹氫箟浜嗗洓涓師璇璸reconnectdns-prefetchprefetchprerender姝ゅ锛屽浜庤祫婧愭彁绀猴紝鎴戜滑浣跨敤閾炬帴灞炴€х殑preload鍏抽敭瀛椼€俻reconnect鏂规硶濡備笅锛?linkrel="preconnect"href="https://example.com">褰撴垜浠闂竴涓珯鐐规椂锛岀畝鍗曟潵璇达紝鎴戜滑浼氱粡杩囦互涓嬪嚑涓楠わ細DNS瑙ｆ瀽TCP鎻℃墜濡傛灉鏄负Https鐨勭珯鐐瑰皢鎵цTLS鎻℃墜銆備娇鐢╬reconnect鍚庯紝娴忚鍣ㄤ細閽堝鐗瑰畾鍩熷悕鎻愬墠鍒濆鍖栭摼鎺ワ紙鎵ц浠ヤ笂涓夋锛夛紝鐪佸幓浜嗘垜浠闂涓夋柟璧勬簮鐨勮€楁椂銆傞渶瑕佹敞鎰忕殑鏄紝涓€瀹氳淇濊瘉缃戦〉闇€瑕乸reconnect绔欑偣锛屽惁鍒欎細娴垂娴忚鍣ㄥ拰缃戠粶璧勬簮銆侱NSPrefetchDNS棰勮В鏋愶紝杩欎釜澶ч儴鍒嗕汉閮界煡閬擄紝瀹冪殑鐢ㄦ硶涔熷緢绠€鍗曪細
