浣滆€咃細绁濹瓒呬汉璇戣€咃細鍓嶇灏忔櫤鏉ユ簮锛歮edium鏈夋ⅵ鎯筹紝鏈夊共璐э紝寰俊鎼滅储銆愬ぇ鍗冧笘鐣屻€戝叧娉ㄨ繖浣嶅噷鏅ㄨ繕鍦ㄦ礂纰楃殑娲楃鏅烘収銆傛湰鏂囧凡鏀跺綍鍒癎itHubhttps://github.com/qq449245884/xiaozhi锛岄噷闈㈡湁瀹屾暣鐨勬祴璇曠珯鐐广€佽祫鏂欏拰鎴戠殑涓€绾垮巶鍟嗚璋堢郴鍒楁枃绔犮€傚墠娈垫椂闂村拰鏈嬪弸鑱奧ebpack鐨勬椂鍊欑獊鐒舵彁鍒颁簡TreeShaking锛屼絾鏄緢鎯劎娌℃湁鍔炴硶瑙ｉ噴Webpack鏄浣曞疄鐜癟reeShaking鐨勶紝鎵€浠ョ涓€鏃堕棿灏辨娊绌虹湅浜嗕笅Webpack鐨勬枃妗ｈ繖涓勾鍋囩殑鏃ュ瓙銆傜劧鍚庢妸浣犵悊瑙ｇ殑鍐欎笅鏉ワ紝濡傛灉浣犱篃鏈夊叴瓒ｏ紝涓€璧锋潵璇讳竴璇诲惂馃檶銆備粈涔堟槸TreeShakingTreeShaking鏄竴绉嶄紭鍖栨柟娉曪紝JavaScript涓父鐢ㄧ殑涓€涓湳璇紝琛ㄧず鍘婚櫎鏃犵敤鐨勪唬鐮侊紝涔嬫墍浠ュ彨TreeShaking浼间箮鏄鈥滃綋浣犱娇鍔叉憞鍔ㄤ竴妫垫爲鏃讹紝鍙細鏈夌豢鍙跺湪鏍戜笂锛屽叾浠栨灟鍙朵細鎺夊埌鍦颁笂鈥濓紝閭ｄ簺缁垮彾鎵嶆槸鎵撳寘鏂囦欢涓湡姝ｆ湁鐢ㄧ殑浠ｇ爜銆備娇鐢ㄦ椂闇€瑕佹敞鎰忕殑鏄紝TreeShaking鍙兘鐢ㄥ湪闈欐€佺粨鏋勪笂锛堜緥濡傦細import鍜宔xport锛夛紝鍔ㄦ€佺粨鏋勭瓑require鏄娴嬩笉鍒扮殑銆備緥濡傦紝濡傛灉瑕佸姞杞藉埌妯″潡涓紝import蹇呴』浣嶄簬鏂囦欢鐨勯《閮紝浣唕equire鍙互鍦ㄤ换浣曞湴鏂逛娇鐢ㄣ€備緥濡傦紝涓嬮潰鐨勫満鏅繀椤荤瓑鍒拌繍琛屾椂鎵嶈兘鐭ラ亾妯″潡鏄粈涔堬細letmodule=null;if(Math.random()*10>5){module=require('module1');}else{module=require('moudle2');}鍦ㄥ紑濮嬩簡瑙reeShaking鐨勫伐浣滀箣鍓嶏紝鏈変簺浜哄簲璇ュ緢濂藉锛屽嵆浣夸綘浠庢湭鍦╓ebpack涓笓闂ㄨ缃甌reeShaking锛屾棤鐢ㄧ殑浠ｇ爜涔熶細琚垹闄わ紒閭ｆ槸鍥犱负TreeShaking鐨勬墽琛岄渶瑕丮oduleConcatenationPlugin锛堝浘1锛夛紝鑰學ebpack涓繕鏈夊彟澶栦竴绉嶆ā寮忋€傚鏋滄病鏈夌壒鍒缃甿ode鐨勫€硷紝閭ｄ箞榛樿鐨刴ode浼氭槸production锛堝浘2锛夛紝鐒跺悗棰勮鍊间负production鐨勮缃€夐」涓細鍚敤ModuleConcatenationPlugin锛堜篃鏄浘2锛夛紝鎵€浠ュ畠鎮ㄩ€氬父涓嶄細娉ㄦ剰鍒板畠骞朵笉濂囨€紝鍥犱负Webpack宸茬粡涓烘偍瀹屾垚浜嗐€俆reeShaking鐨勬搷浣滄槸鍥犱负Production浼氬府浣犲紑鍚疢oduleConcatenationPlugin锛屾墍浠ユ垜浠悗闈㈠疄楠岀殑鏃跺€欓渶瑕佹妸mode鏀规垚none锛坵ebpack鏂囦欢璇磏one鏄叧闂墍鏈変紭鍖栬缃殑mode锛夈€傝繖閲屽皢闄勪笂涓€涓畝鍗曠殑鍒濆鍖栫ず渚嬮厤缃€傚鏋滄偍鏈夊叴瓒ｏ紝鍙互鍏嬮殕瀹冨苟浣跨敤瀹冦€傚厛鍦╯rc涓嬪垱寤轰竴涓猰ath.js鍜宻tring.js锛岀劧鍚庤涓嬩竴涓猠xport鐨勬柟娉曪紝鍒嗗埆鏄痑dd鍜宑omposeString锛歝onstadd=(a,b)=>a+b;瀵煎嚭榛樿{娣诲姞}锛沜onstcomposeString=(a,b)=>`${a}${b}`;瀵煎嚭榛樿鍊納composeString};鎵撳紑src涓嬬殑index.js锛屽悓鏃跺鍏dd鍜宑omposeString锛屼絾鍙娇鐢╝dd鏂规硶锛歩mport{add}from'./math';import{addString}from'./string';console.log(add(1,2))鏈€鍚庡湪缁堢鎵цnpmrunbuild鎴杦ebpack杩涜鎵撳寘銆傛墦鍖呭畬鎴愬悗锛屼綘浼氬彂鐜拌櫧鐒舵垜浠彧浣跨敤浜唅mportadd锛屼絾鏄墦鍖呭悗鐨勬枃浠跺唴瀹硅繕鏄細鏈塩omposeString:鐨勶紝涓嶈繃杩欐槸姝ｅ父鐨勶紝姣曠珶鎴戜滑娌℃湁鍋氫换浣曞鐞嗭紝Webpack涓嶇煡閬撲綘鐨勪唬鐮佹槸鍚︽墦鍖呮椂鏄惁浣跨敤锛屾墍浠ヤ笉鏄府浣犲幓鎺塩omposeString鐨勬柟娉曘€傞偅涔堜粈涔堟牱鐨勪唬鐮佹湁鐢紝鎬庝箞娌＄敤鍛紵锛熸渶鏄庢樉鐨勫畾涔夊簲璇ユ槸锛屽鏋滃疄鐜颁簡锛屽氨鎰忓懗鐫€浣跨敤浜嗐€傚氨鍍忓湪涓婇潰鐨勪緥瀛愪腑娣诲姞銆備篃浣跨敤鏈夊壇浣滅敤鐨勪唬鐮併€傚儚涓婇潰鐨刬ndex.js锛岃矊浼兼病鏈夋彁渚涙柟娉曪紝浣嗘槸鎵ц鐨勬椂鍊欎細鍦ㄦ帶鍒跺彴鐣欎笅鏃ュ織銆傚彟澶栵紝浼氭敼鍙樻墽琛岀幆澧冪殑polyfill涔熸槸涓€涓湁鍓綔鐢ㄧ殑搴撱€傜涓€绉嶆儏鍐垫瘮杈冨鏄撳尯鍒嗭紝浣嗘槸濡傛灉鏄浜岀鎯呭喌锛屽彲浠ラ€夋嫨浣跨敤Webpack涓殑sideEffects灞炴€ф潵璁剧疆銆俿ideEffectssideEffects鍙互璁剧疆涓哄竷灏斿€兼垨鏁扮粍銆傚綋浣犺缃负false鏃讹紝琛ㄧず璇ラ」鐩笉浼氭湁sideEffects锛屽嵆涓€鐩翠娇鐢╡xport鏉ュ垽鏂槸鍚︿娇鐢ㄣ€傚彟澶栵紝sideEffects浼氫緷璧杙rovidedExports鎵惧嚭椤圭洰涓墍鏈夊鍑虹殑妯″潡锛氫笅闈㈡槸sideEffects鐨勪娇鐢ㄦ柟娉曪細{"name":"tree-shaking","sideEffects":false,"version":"1.0.0",...}鍙鍦╬ackage.json涓姞鍏ideEffects骞跺皢鍊艰缃负flase锛屽氨鎰忓懗鐫€椤圭洰涓殑鎵€鏈変唬鐮侀兘娌℃湁鍓綔鐢紝杩欐牱Webpack灏卞彲浠ュ皢涓嶇敤鐨勫鍑轰唬鐮佹墦鍖呭幓鎺夈€傛坊鍔爏ideEffects骞舵墦鍖呭悗锛岀粨鏋滀腑涓嶄細鐪嬪埌composeString锛氱幇鍦ㄦ垜浠幓src鍐嶅垱寤轰竴涓猵olyfill.js锛屽湪polyfill.js涓负Array鍒涘缓涓€涓嚜瀹氫箟鏂规硶锛岀劧鍚庡鍏ュ埌index.js涓細index銆俲simport'./polyfill';import{add}from'./math';import{addString}from'./string';console.log([].customMethod());polyfill.jsArray.prototype.customMethod=()=>{console.log('customMethods');};濡傛灉鎴戜滑鍘绘墦鍖呬笂闈㈢殑浠ｇ爜锛宲olyfill.js涓嶄細琚玴rovidedExports鎶撳埌锛屽洜涓烘病鏈塭xport锛屾墍浠ュ畠涓嶄細琚墦鍖呭埌Production涓紝濡傛灉椤圭洰涓湁customMethod浣跨敤锛屼細瀵艰嚧鎵ц鏃跺嚭閿欏ぇ鎵广€傞潰瀵硅繖绉嶆儏鍐碉紝蹇呴』鍦╯ideEffects灞炴€т腑鍛婄煡polyfill.js鏈夊壇浣滅敤銆傝缃柟娉曞涓嬶細{"name":"tree-shaking","sideEffects":["./src/polyfill.js"],"version":"1.0.0",...}鍦ㄨ繖涓獁ay锛宲olyfill.js浼氱洿鎺ユ墦鍖咃細鏈€鍚庯紝闇€瑕佹敞鎰忎袱鐐癸細濡傛灉浣犵殑椤圭洰涓篃鏈塱mport.css鏍峰紡锛岃寰楁妸.css缁撳熬鐨勬枃浠跺悕鏀惧埌sideEffects閲岄潰锛屾瘮濡俿ideEffects:["*.css鈥漖銆倃ebpack.config.js涓殑浼樺寲涔熸湁sideEffects锛屼笉杩囪繖閲岃缃殑鍊兼槸閽堝node_modules鐨勩€倁seExporteduseExported鍜宻ideEffects鐨勫姛鑳介兘鏄敤鏉ュ垽鏂唬鐮佹槸鍚﹀簲璇ヨ绉婚櫎锛屼絾鏄牴鎹甒ebpack鏂囦欢涓殑鎻忚堪锛寀seExported鎵嶆槸鐪熸鐨凾reeShaking锛歶sedExports浼氫娇鐢╰erser鏉ュ垽鏂唬鐮佹槸鍚︽湁鍓綔鐢ㄣ€傚鏋滀笉浣跨敤锛屽垯涓嶆槸銆俿ideeffect锛屾墦鍖呮椂浼氭爣璁颁负unusedharmony锛屽湪minify锛堜娇鐢║glifyjs鎴栧叾浠栧伐鍏凤級鏃剁Щ闄ゃ€傚湪娴嬭瘯usedExports涔嬪墠锛屽皢square娣诲姞鍒癿ath.js骞跺鍑猴細constadd=(a,b)=>a+b;constsquare=(a,b)=>a*b;export{add,square};鎺ヤ笅鏉ワ紝灏唎ptimization.usedExports娣诲姞鍒皐ebpack.config.js涓細module.exports={...optimization:{usedExports:true,}};鐒跺悗鎵撳寘椤圭洰锛屼綘浼氬彂鐜板畠鍙鍑轰簡锛屾病鏈変娇鐢ㄦ柟鍧椾細琚爣璁颁负鏈娇鐢ㄥ拰璋愬鍑猴細鐒跺悗鎴戜滑浣跨敤uglifyjs-webpack-plugin灏嗘湭浣跨敤鐨勬柟鍧椾粠鏍戜笂鎽囦笅鏉ワ細npminstall-duglifyjs-webpack-pluginwebpack.config.js璁剧疆濡備笅锛歝onstUglifyJsPlugin=require('uglifyjs-webpack-plugin');module.exports={...optimization:{usedExports:true,minimize:true,minimizer:[newUglifyJsPlugin({uglifyOptions:{compress:{unused:true},mangle:false,output:{beautify:true}},})],}};璁剧疆濂絤inimizer鍚庯紝鍐嶆鎵撳寘锛屽彲浠ョ湅鍒板幓鎺変簡鏂瑰潡锛歶sedExports鍜宻ideEffects鐨勫尯鍒湪浜庯紝usedExports鍙互浠tatements涓哄崟浣嶆潵鍒ゆ柇鏄惁鏈夊壇浣滅敤锛岃€宻ideEffects浣犲彲浠ヨWebpack鍦ㄦ墦鍖呯殑鏃跺€欑洿鎺ヨ烦杩囨暣涓枃浠躲€傚彧瑕佹枃浠跺嚭鐜板湪sideEffect涓紝灏变細鐩存帴鎵撳寘锛屼笉闇€瑕侀€氳繃terser璇勪及鍓綔鐢ㄣ€傛€荤粨TreeShaking鍙兘鐢ㄥ湪闈欐€佺粨鏋勪腑銆傚鏋滈」鐩腑鐨刡abel灏嗛潤鎬佺粨鏋勭紪璇戞垚鍔ㄦ€佺粨鏋勭殑璇濓紝杩橀渶瑕佸彟澶栬缃€備娇鐢╯ideEffects鏃讹紝搴旇鍐欏湪package.json涓€傚鏋滄槸浼樺寲绗笁鏂瑰簱锛屽簲璇ュ啓鍦╳ebpack.config.js涓殑optimization涓€倁sedExports鏄疶reeShacking銆備娇鐢ㄦ椂浼氳嚜鍔ㄥ垽鏂湭浣跨敤鐨勪唬鐮侊紝骞舵爣娉ㄦ湭浣跨敤鍜屽０鐨勬敞瑙ｃ€傚鏋滀綘鎯冲垹闄ゅ畠锛屼綘闇€瑕佷娇鐢╩inify銆備唬鐮侀儴缃插悗鍙兘瀛樺湪鐨刡ug锛屾棤娉曞疄鏃惰幏鐭ャ€備簨鍚庝负浜嗚В鍐宠繖浜沚ug锛岃姳璐逛簡澶ч噺鐨勬椂闂村湪鏃ュ織璋冭瘯涓娿€傞『渚挎帹鑽愪竴涓ソ鐢ㄧ殑bug鐩戞帶宸ュ叿Fundebug銆傚師鏂囷細https://medium.com/starbugs/%...浜ゆ祦鏈夋ⅵ鎯筹紝鏈夊共璐э紝寰俊鎼滅储銆愬ぇ鎷涘ぉ涓嬨€戝叧娉ㄨ繖浣嶅ぇ娓呮棭杩樺湪娲楃鐨勬礂纰楁櫤鎱с€傛湰鏂嘒itHubhttps://github.com/qq44924588...宸叉敹褰曪紝鏈夊畬鏁寸殑娴嬭瘯绔欑偣銆佽祫鏂欏拰鎴戠殑涓€绾垮巶鍟嗚璋堢郴鍒楁枃绔犮€?/p>
