娴呰皥 ES 妯″潡鍜?Webpack Tree-shaking

Posted 2021-04-29 鍓嶇澶栧垔璇勮

杩欐槸鎴戝湪鍙傚姞 GSoC(Google Summer of Code) 2018 閲岀殑椤圭洰锛氫负 webpack 鏀硅繘 tree-shaking銆傛湰浜烘槸 19 灞婂簲灞婄敓锛岀洰鍓嶅湪浠婃棩澶存潯鏁堢巼宸ョ▼閮紙娣卞湷鐮斿彂锛夊疄涔犮€?/p>

Tree-shaking 馃尣 鏄墠绔瘮杈冮噸瑕佺殑鎶€鏈箣涓€锛屽洜涓哄噺灏戜唬鐮佸寘鐨勪綋绉剰鍛崇潃鍑忓皯姣忎竴娆＄綉缁滀紶杈撶殑鑰楁椂锛屽鐢ㄦ埛浣撻獙鏈夋瘮杈冨ぇ鐨勬彁鍗囥€傚浜庝竴涓寘绠＄悊宸ュ叿鏉ヨ锛孌CE 鏄繀涓嶅彲灏戠殑 feature 涔嬩竴浜嗐€?/p>

Tree-shaking 鏈€鏃╃敱鎵撳寘宸ュ叿 Rollup 鎻愬嚭锛岃€屼綔鑰呬篃鍦ㄤ竴绡?Medium 鏂囩珷瑙ｉ噴浜?Tree-shaking 鍜?DCE 鐨勫尯鍒細

Rather than excluding dead code, we鈥檙e including live code.

Webpack 鐨?maintainer 涔嬩竴 Tobias 馃懆涔熻窡鎴戣В閲婁簡浠栫殑鐪嬫硶锛孌CE 浣滅敤浜庢ā鍧楀唴锛坵ebpack 鐨?DCE 閫氳繃 UglifyJS 瀹屾垚锛夛紝鑰?Tree-shaking 鍒欐槸鍦ㄦ墦鍖呯殑鏃跺€欓€氳繃妯″潡涔嬮棿鐨勪俊鎭墦鍖呭繀椤荤殑浠ｇ爜銆?/p>

Webpack 涓?Tree-shaking

Webpack 浠?2 寮€濮嬩篃鏀寔 Tree-shaking锛屽浜庝竴涓ā鍧楋紝娌℃湁琚娇鐢ㄨ繃鐨勫紩鍏ヤ唬鐮佸苟涓嶄細琚墦鍖?馃摝锛?/p>

涓婂浘浠ｇ爜涓紝鍙橀噺 isString 骞舵病鏈夎浣跨敤锛屾墍浠?webpack 鐨?tree-shaking 鍔熻兘涓嶄細鎶?isString 鎵撳寘杩涙潵銆備絾鏄繖鏍峰仛鐨勪綔鐢ㄤ笉澶э紝馃憜 涓婂浘涓?VSCode 宸茬粡鐢ㄩ€忔槑搴︽彁閱掍簡鍐欎唬鐮佺殑浜鸿繖涓彉閲忔病鏈夌敤鍒帮紝鍔犱笂 eslint 绛夊伐鍏风殑鎻愮ず锛屼竴鑸汉涓嶄細鍦ㄤ唬鐮侀噷闈㈠紩鍏ョ敤涓嶅埌鐨勫彉閲忋€傛墍浠?webpack 闇€瑕佹洿鍔犲己澶х殑 tree-shaking 鏈哄埗銆?/p>

鎴戜滑鐪嬪涓嬩唬鐮侊紝VSCode 瀵瑰紩鍏ュ彉閲忔槸涓嶄細鏈夐€忔槑搴︽彁绀虹殑锛屽洜涓哄浜庤繖涓ā鍧楁墍鏈夊紩鍏ラ兘琚敤鍒颁簡锛?/p>

file1.js:

index.js:

file1 涓鍑轰袱涓彉閲忥紝鍒嗗埆浣跨敤浜嗕袱涓鍏ュ彉閲忥紝浣嗘槸鍦?entry( index.js) 涓垜浠彧浣跨敤浜?one 锛岄偅涔堬紝webpack 鏄惁浼氭妸 two 鍜?isString 鎵撳寘杩涙潵鍛紵绛旀鏄槸鐨?鈽戯笍锛屽洜涓虹洰鍓嶆潵璇?webpack 骞朵笉鏀寔杩欑绾у埆鐨?tree-shaking銆傝繖涔熸槸浠婂勾骞村垵 webpack 涓€涓?issue锛坔ttps://github.com/webpack/webpack/issues/6264锛?鎸囧嚭鐨勯棶棰樸€?/p>

瑙ｅ喅鍔炴硶

瀵逛簬涓婃枃涓彁鍒扮殑浠ｇ爜锛屼娇鐢ㄦ彃浠朵娇鐢ㄥ墠锛?/p>

浣跨敤鍚?馃巻锛?/p>

浣跨敤鏂规硶锛?/p>

杩欓噷鐪嬪埌鍑忓皯鐨勪綋绉笉澶氾紝鏄洜涓哄紩鍏ョ殑浠ｇ爜鏈潵灏变笉澶氾紝鎵€浠ユ晥鏋滀笉鏄庢樉锛屼絾鏄彃浠舵秷鍘荤殑浠ｇ爜灏辨槸閭ｄ釜娌℃湁鐢ㄥ埌鐨?馃憠 isString 馃憟銆?/p>

鎻掍欢鐨勫師鐞?/h3>

杩欎釜涔嬫墍浠ヨ兘澶熷疄鐜帮紝闈犵殑鏄?ES6 浼樼鐨勬ā鍧楄璁?馃憤銆侰ommonJS 鐨勮璁¤繃浜庣伒娲伙紝瀵归潤鎬佸垎鏋愪笉鍙嬪ソ銆侲S6 module 鍒欐湁璇稿闄愬埗锛氭瘮濡傝鍙兘鍦ㄦ枃浠剁殑椤堕儴 import锛圕ommonJS 鐨?require 璇硶鍏佽鍦ㄦ枃浠剁殑浠绘剰浣嶇疆璋冪敤锛夛紝export { ... } 璇硶淇濊瘉浜嗗鍑虹殑鍙橀噺涓嶄細鏄?getter/setter 涔嬬被濂囨€殑涓滆タ锛堣繖涓?block 涓嶆槸涓€涓?Object锛夛紝鍙橀噺涔熶笉鑳借閲嶆柊缁戝畾銆備互涓婄绉嶈璁″彲浠ヨ鍒嗘瀽鍣ㄤ竴瀹氱▼搴︿笂鍒ゆ柇鍑哄鍏ュ拰瀵煎嚭鍙橀噺鐨勫叧绯伙紝璁╄繖涓彃浠剁殑瀹炵幇鎴愪负浜嗗彲鑳姐€?/p>

鑰屾彃浠舵湰韬殑鍘熺悊鍒欐槸浣滅敤鍩熷垎鏋愩€傚湪缂栬瘧鍣ㄩ鍩燂紝杩樻湁瓒呯骇澶氬悇绉嶉珮澶т笂鐨勯潤鎬佸垎鏋愭柟娉曪紙姣斿璇存暟鎹祦鍒嗘瀽锛夛紝浣嗘槸瀵逛簬 ES 鏉ヨ锛屼粬浠疄鐜扮殑闅惧害澶ぇ銆傛嵁鎴戞墍鐭ワ紝鐜板湪杩樻病鏈夐拡瀵?JS 鐨勶紝鑳藉湪鐢熶骇鐜鑳界敤鐨勶紝鍩轰簬鏁版嵁娴佸垎鏋愮殑浼樺寲鍣ㄣ€傝繖涔熸槸涓哄暐鐜板湪杩欎簺鎵撳寘鍣ㄨ繕涓嶈兘鍘婚櫎娌℃湁鐢ㄥ埌鐨勭被鎴愬憳鏂规硶锛坈lass method锛夈€?/p>

鎵€璋撲綔鐢ㄥ煙鍒嗘瀽锛屽氨鏄彲浠ュ垎鏋愬嚭浠ｇ爜閲岄潰鍙橀噺鎵€灞炵殑浣滅敤鍩熶互鍙婁粬浠箣闂寸殑寮曠敤鍏崇郴銆傛湁浜嗚繖浜涗俊鎭紝灏卞彲浠ユ帹瀵煎嚭瀵煎嚭鍙橀噺鍜屽鍏ュ彉閲忎箣闂寸殑寮曠敤鍏崇郴銆傛垜鍦?Medium 閲岄潰璐寸殑涓€寮犳垜鑷繁鐢荤殑鍥剧墖鍙兘鑳借鏄庢彃浠剁殑鍘熺悊锛?/p>

鑰屽浜?webpack 鏉ヨ锛寃ebpack 鍙互閫氳繃 entry 鍜?module 涔嬮棿鐨勮皟鐢ㄥ緱鐭ュ浜庝竴涓?module 鏉ヨ锛屽摢涓彉閲忔槸浼氳浣跨敤鍒扮殑銆傚氨濡傚悓涓婃枃鐨勪緥瀛?馃尠锛氭垜鐨勬彃浠跺彲浠ヤ粠 webpack 寰楃煡 file1.js 鐨勫鍑哄彉閲?one 琚娇鐢ㄤ簡銆傛垜鐨勬彃浠堕€氳繃鍒嗘瀽鍑烘ā鍧椾腑鐨勪綔鐢ㄥ煙锛岄亶鍘嗗紩鐢ㄥ埌鐨勪綔鐢ㄥ煙锛屾壘鍒扮湡姝ｉ渶瑕?import 鐨勫彉閲忥紝姣斿璇?isNumber锛岀劧鍚庡啀鎶婄粨鏋滆繑鍥?webpack銆?/p>

褰撶劧杩欎竴鍒囦篃寰楃泭浜?webpack 浼樼鐨勬彃浠舵満鍒讹紝璁╄繖涓€涓?feature 鍙互閫氳繃鎻掍欢鏉ヨВ鍐炽€?/p>

鍚堢悊妯″潡璁捐鎵嶆槸鍑忓皯浠ｇ爜浣撶Н鐨勫叧閿?/h3>

Tree-shaing 鍏跺疄鍙槸涓€涓墦鍖呭櫒鐨勭壒鎬э紝浣嗘槸宸ュ叿濮嬬粓鍙槸宸ュ叿锛岃壇濂界殑妯″潡鎷嗗垎鎵嶆槸鍑忓皯浠ｇ爜浣撶Н鐨勫叧閿?馃懇鈥嶐煆€?/p>

瀵逛簬 ES6 妯″潡鏉ヨ锛屼細鏈?defaut export 鍜?named export 鐨勫尯鍒€傛湁浜涘紑鍙戣€呭枩娆㈡妸鎵€鏈変笢瑗块兘寮勬垚涓€涓璞″鍒?default 閲岄潰銆侱efault export 鍦ㄦ蹇典笂鏉ヨ骞朵笉浠呬粎涓€涓悕瀛楀彨鍋?default 鐨?export锛岃櫧鐒跺畠浼氳杩欐牱杞瘧銆傛妸涓€鍒囦笢瑗块兘濉炲埌 default 閲岄潰鏄竴涓敊璇殑閫夋嫨锛屼細璁?tree-shaking 鏃犳晥銆備粠璇剰涓婃潵璇达紝default export 鐢ㄦ潵璇存槑杩欎釜妯″潡鏄粈涔堬紝named export 鐢ㄦ潵璇存槑杩欎釜妯″潡鏈変粈涔堛€傚悎鐞嗙殑妯″潡鎷嗗垎鏄竴瀹氬彲浠ヨ缂栬瘧鍣ㄥ彧鎵撳寘鍒版墍闇€鐨勪唬鐮佺殑銆?/p>

鍙︿竴鏂归潰 馃崪锛屾彃浠舵湰韬篃鏈夎澶氭敞鎰忎簨椤癸細

• 浣跨敤 ES6 Module锛氫笉浠呮槸椤圭洰鏈韩锛屽紩鍏ョ殑搴撴渶濂戒篃鏄?es 鐗堟湰锛屾瘮濡傜敤 lodash-es 浠ｆ浛 lodash銆傚彟澶栨敞鎰?TypeScript 鍜?Babel 鐨勯厤缃槸鍚︿細鎶婁唬鐮佺紪璇戞垚闈?es module 鐗堟湰銆?/span>

• 鏈€绾嚱鏁拌皟鐢ㄤ娇鐢?PURE 娉ㄩ噴锛氱敱浜庢棤娉曞垽鏂壇浣滅敤锛屾墍浠ュ浜庡鍑虹殑鍑芥暟璋冪敤鏈€濂戒娇鐢?PURE 娉ㄩ噴锛屼笉杩囦竴鑸潵璇存湁鐩稿叧鐨?babel 鎻掍欢鑷姩娣诲姞銆?/span>

鎬荤粨

鎻掍欢鍙戝竷涔嬪悗锛屾湁浜鸿窡鎴戝弽棣堣杩欎釜鎻掍欢甯姪浠栦滑椤圭洰鎵撳寘鍑忓皯浜?1m 澶氱殑浣撶Н 馃槃锛屼篃鏈変汉璺熸垜鍙嶉璇翠竴鐐逛綋绉兘娌℃湁鍑忓皯 馃槚銆傚浜庡悗鑰咃紝涓€鏂归潰鏄彲鑳芥槸鏈変簺椤圭洰鏈韩璁捐寰楀緢濂斤紝寮曞叆鐨勪唬鐮侀兘鏄湁鐢ㄧ殑锛岃繖涓彃浠跺凡缁忔病鍟ュソ浼樺寲浜嗭紝涔熸湁鍙兘鏄唬鐮佹湰韬缂栬瘧鎴愬叾浠?module 瀵艰嚧鍒嗘瀽涓嶇敓鏁堛€傚彟涓€鏂归潰锛屽浜?webpack 鏉ヨ锛岃繖鍙互绠楁槸涓€涓湪 production mode 涓嬪緢閲嶈鐨?feature 浜嗐€傛垜鍜?webpack 鐨?maintainer 娌熼€氳繃锛屾湁鏈涘湪涓嶄箙涔嬪悗浼氬湪 webpack 鐨?production mode 榛樿寮€鍚繖涓彃浠?馃拹馃拹馃拹銆?/p>

PS锛氬府鎴戜滑鍥㈤槦鎷涗汉鍟︼紝浠婃棩澶存潯鏁堢巼宸ョ▼鍥㈤槦锛圗fficiency Engineering锛夋嫑浜哄暒锛屾姇閫掗摼鎺ワ細https://job.bytedance.com/锛屾垜鐨勫唴鎺ㄧ爜锛欱59SSE7銆?/p>