鍦ㄥ紑鍙戠粍浠跺簱鎴栨彃浠舵椂锛屽線寰€闇€瑕佸尯鍒嗗涓幆澧冩惌寤猴紝浠庤€屽疄鐜帮細鎻愪緵鍚勭鍗风増鏈細瀹屾暣鐗堛€佺畝鍖栫増銆佸熀纭€鐗堛€丒TC銆?鎻愪緵澶氱鐜鐗堟湰锛歸eb鐗堛€乶odejs鐗堢瓑锛涙彁渚涘悇绉嶈鑼冪増鏈細esm瑙勮寖鐗堟湰銆乧js瑙勮寖鐗堟湰銆乁MD瑙勮寖鐗堟湰绛夈€傞偅涔堝浣曟柟渚跨殑瀹炵幇浠ヤ笂鍔熻兘鍛紵杩欑鍦烘櫙閫傚悎浣跨敤FeatureFlags銆傚湪鏋勫缓杩囩▼涓紝閫氳繃鍚敤鍜岀鐢ㄥ紑鍏虫潵鍔ㄦ€佽缃瀯寤轰唬鐮佺殑杩囩▼锛屼粠鑰屾洿濂藉湴瀹炵幇TreeShaking銆俆reeShaking鏄竴绉嶉€氳繃娑堥櫎鏈€缁堟枃浠朵腑鏈娇鐢ㄧ殑浠ｇ爜鏉ヤ紭鍖栧ぇ灏忕殑鏂规硶銆傛湰鏂囧皢浠庢瀯寤篤ue婧愮爜锛堢増鏈彿锛?.0.11锛変腑浣跨敤鐨凢eatureFlags鐨勮繃绋嬪紑濮嬶紝鐒跺悗閫氳繃绠€鍗曠殑渚嬪瓙杩涜瀛︿範锛屾渶鍚庝粙缁嶅湪rollup銆亀ebpack鍜孷ite涓殑瀹炵幇銆傛湰鏂囦唬鐮佸湴鍧€锛歨ttps://github.com/pingan8787...1.浠€涔堟槸FeatureFlagsFeatureFlag锛堜篃绉颁负FeatureToggle銆丗lip绛夛級鏄竴绉嶈鍦ㄧ嚎鍔熻兘鐨勬帶鍒舵柟寮忓紑鍚垨鍏抽棴锛岄€氬父鐢遍厤缃枃浠舵帶鍒躲€俬ttp://fex.baidu.com/blog/201...鍙互鐞嗚В涓哄湪浠ｇ爜涓姞浜嗕竴涓紑鍏炽€傚綋寮€鍏虫墦寮€鏃讹紝閫昏緫灏变細鎵ц锛屽惁鍒欎笉鎵ц銆傞€氬父浠ｇ爜琛ㄧず涓篿f璇彞銆備妇涓畝鍗曠殑渚嬪瓙锛歝onstflags=true;consttest=()=>flags&&console.log('HelloFeatureFlags');褰撴爣蹇椾负鐪熸椂锛屽皢鎵ц杈撳嚭锛屽惁鍒欎笉浼氥€傜幇鍦ㄦ垜浠鎺у埗鏄惁杈撳嚭鏃ュ織锛屽彧闇€瑕佹敼鍙榝lags鐨勫€煎嵆鍙紝娴嬭瘯鏂规硶鐨勯€昏緫涓嶉渶瑕佷慨鏀广€傪煒哄彲浠ュ皢FeatureFlag缈昏瘧鎴恌eatureflag銆?.Vue3婧愮爜瀹炵幇FeatureFlags2.1浣跨敤绀轰緥缁忚繃涓婁竴鑺俧eatureflags鐨勪粙缁嶏紝澶у搴旇瀵瑰畠鏈変簡涓€鐐逛簡瑙ｃ€傛帴涓嬫潵锛岀湅涓€涓猇ue3婧愪唬鐮佷腑鐨勭敤娉曠ず渚嬶細//packages/compiler-core/src/errors.tsexportfunctiondefaultOnWarn(msg:CompilerError){__DEV__&&console.warn(`[Vuewarn]${msg.message}`)}杩欓噷__DEV__鏄竴涓狥eatureFlag锛屽綋__DEV__涓簍rue鏃讹紝浼氳緭鍑轰笅闈㈢殑鏃ュ織锛屽惁鍒欎笉杈撳嚭銆俈ue3婧愮爜涓繕鏈夊緢澶氬叾浠栫殑鐗规€ф爣蹇楋紝姣斿锛歘_COMMIT____TEST____GLOBAL__...杩樻湁寰堝锛屾湁鍏磋叮鐨勬湅鍙嬪彲浠ュ幓Vue3婧愮爜涓壘鎵俱€?.2濡備綍瀹氫箟featureflags涓婇潰鍙槸灞曠ず浜嗗浣曞湪婧愪唬鐮佷腑浣跨敤瀹冿紝閭ｄ箞璁╂垜浠湅鐪媉_DEV__featureflags鏄浣曞畾涔夌殑銆侤rollup/replace渚濊禆鍦╒ue3涓敤浜庡湪鏋勫缓鏃舵浛鎹㈡枃浠朵腑鐩爣瀛楃涓茬殑鍐呭銆備緥濡傚湪鏋勫缓寮€鍙戠幆澧冨寘鐨勮繃绋嬩腑锛屽皢__DEV__鏇挎崲涓簍rue銆傛垜浠互涓婇潰鐨勭ず渚嬩唬鐮佷负渚嬶細//鏈湴寮€鍙戠幆澧僟_DEV__涓虹湡锛孈rollup/replace渚濊禆鎵撳寘鍚庡涓嬶細exportfunctiondefaultOnWarn(msg:CompilerError){true&&console.warn(`[Vuewarn]${msg.message}`)}//鐢熶骇鐜涓璤_DEV__涓篺alse锛孈rollup/replace渚濊禆鎵撳寘鍚庡涓嬶細exportfunctiondefaultOnWarn(msg:CompilerError){}鏋勯€犲畬鎴愬悗锛宑onsole.warn璇彞defaultOnWarn鏂规硶鏄疶reeShaking琚Щ闄ゃ€?.FeatureFlags鍏ラ棬鏈妭灏嗕娇鐢╮ollup銆亀ebpack鍜孷ite瀹炵幇涓変釜FeatureFlagsdemo銆傛牳蹇冨師鐞嗘槸鍦ㄦ瀯寤洪樁娈碉紝灏嗘寚瀹氱殑FeatureFlags鍊肩殑鍐呭鏇挎崲涓虹壒瀹氱殑鍊硷紝鐒跺悗杩涜TreeShaking銆備笁涓緥瀛愮殑鎵€鏈変唬鐮侀兘鍙互鍦ㄤ笅闈㈢殑浠撳簱涓煡鐪嬶細棣栧厛鎴戜滑鏂板缓涓€涓猧ndex.js鏂囦欢锛岃緭鍏ュ涓嬫祴璇曞唴瀹癸細//index.jsconstname='pingan8787';甯搁噺骞撮緞=18锛沜onstfeatureFlags=()=>{console.warn(name)__DEV__&&console.log(name)}featureFlags();鎴戜滑闇€瑕佸疄鐜扮殑鏄細褰揰_DEV__鍙橀噺鐨勫€间负true鏃讹紝鎵撳寘鍚庣殑index.js涓嶄細鍖呭惈__DEV__&&console.log(name)杩欒浠ｇ爜銆傞偅涔堜笅闈㈠紑濮嬬湅濡備綍瀹炵幇锛?.1Rollup瀹炵幇鍦╮ollup涓紝鏋勫缓鏃堕渶瑕佷娇鐢ˊrollup/replace鍖呮潵鏇挎崲鏂囨湰銆傛垜浠厛瀹夎瀹冿細npminstall@rollup/plugin-replace--save-dev鐒跺悗鍦╮ollup.config.js涓娇鐢細importreplacefrom'@rollup/plugin-replace';瀵煎嚭榛樿{杈撳叆锛?index.js'锛岃緭鍑猴細{鏂囦欢锛?./dist/index.js'锛屾牸寮忥細'cjs'}锛屾彃浠讹細[鏇挎崲锛坽__DEV__锛歵rue}锛塢};鎺ヤ笅鏉ラ€氳繃rollup鎵撳寘鍛戒护鍙互鐪嬪埌杈撳嚭濡備笅锛歝onstname='pingan8787';甯搁噺骞撮緞=18锛沜onstfeatureFlags=()=>{鎺у埗鍙般€傝鍛婏紙鍚嶇О锛塤_DEV__&&console.log锛堝悕绉帮級}featureFlags锛堬級锛涘彲浠ョ湅鍒癬_DEV__涓簍rue鏃朵唬鐮佹病鏈塗reeShaking锛屽啀娆″皾璇曟敼鎴恌alse锛岃緭鍑哄涓嬶細'usestrict';constname='骞冲畨8787';constfeatureFlags=()=>{console.warn(name);};featureFlags();杩欓噷__DEV__&&console.log(name)琚垹闄わ紝瀹炵幇浜員reeShaking銆傛寜鐓у悓鏍风殑鍘熺悊锛屾垜浠潵鐪嬩笅webpack鍜孷ite鐨勫疄鐜帮細3.2webpack鐨勫疄鐜皐ebpack涓殑DefinePlugin鍙互瀹炵幇杩欎釜鍔熻兘銆傚叿浣撹鍙傝€僁efinePlugin鏂囨。銆傛垜浠湅涓€涓媤ebpack.config.js閰嶇疆锛?/webpack.config銆俲sconstpath=require('path')constwebpack=require('webpack')module.exports={entry:'./index.js',output:{path:path.resolve(__dirname,'dist'),鏂囦欢鍚?'index.js',},妯″紡:'production',鎻掍欢:[newwebpack.DefinePlugin({__DEV__:JSON.stringify(true),})],};鍥犱负杩欓噷鏄娇鐢ㄦā寮忥細'production'妯″紡锛屾墍浠ユ墦鍖呭悗鐨勪唬鐮佷細琚帇缂╋細(()=>{constn="pingan8787";console.warn(n),console.log(n)})();鍙互鐪嬪埌__DEV__宸茬粡涓嶅瓨鍦ㄤ簡锛屼絾鏄痗onsole.log(n)浠嶇劧瀛樺湪锛屾鏃跺皢__DEV__鏀逛负false锛屾煡鐪嬫墦鍖呯粨鏋滐細console.warn("pingan8787");鍙墿涓嬭繖鍙ヨ瘽锛屽叾浠栫殑閮借TreeShaking鎺変簡銆?.3Vite瀹炵幇Vite榛樿涔熸敮鎸佽嚜瀹氫箟鍏ㄥ眬鍙橀噺銆傝瀹炵幇杩欎釜鍔熻兘锛屽彲浠ョ湅鏂囨。瀹氫箟閫夐」銆傞€氳繃pnpmcreatevite鍒涘缓涓€涓畝鍗曠殑Vite椤圭洰锛屽垹闄ゅ浣欑殑鍐呭锛屽湪main.js涓姞鍏ユ垜浠殑娴嬭瘯浠ｇ爜锛歩mport{createApp}from'vue'importAppfrom'./App.vue'constname='pingan8787';constage=18;constfeatureFlags=()=>{console.warn(name)__DEV__&&console.log(name)}featureFlags();createApp(App).mount('#app')骞跺湪閭€璇蜂腑銆傚湪config.js涓缃甠_DEV__://vite.config.jsexportdefaultdefineConfig({plugins:[vue()],define:{__DEV__:true}})鐒跺悗鎵цpnpmbuild鏋勫缓宸ョ▼锛屽彲浠ョ湅鍒板帇缂╀唬鐮佽繕鏈塤_DEV__&&console.log(name)銆傛帴涓嬫潵淇敼__DEV__鐨勫€间负false锛岀劧鍚庨噸鏂版墦鍖咃紝鍙互鐪嬪埌浠ｇ爜宸茬粡缁忚繃TreeShaking锛?.4娉ㄦ剰锛屽鏋滅紪杈戝櫒鎻愮ず__DEV__鍙橀噺涓嶅瓨鍦紝鍙互鏂板缓涓€涓被鍨嬪０鏄庢枃浠舵潵瑙ｅ喅瀹冦€備緥濡傛柊寤轰竴涓猤lobal.d.ts鏂囦欢杩涜瀹氫箟锛屽唴瀹瑰涓嬶細//Globalcompile-timeconstantsdeclarevar__DEV__:boolean杩欓噷鎴戜滑鍒嗗埆浣跨敤rollup銆亀ebpack鍜孷ite鏉ュ疄鐜癋eatureFlags銆?.鎬荤粨鏈枃閫氳繃绠€鍗曠殑渚嬪瓙鍜屸€嬧€媀ue3婧愮爜浠嬬粛浜咶eatureFlags鐨勬蹇靛拰绠€鍗曞疄鐜帮紝鏈€鍚庡垎鍒娇鐢╮ollup銆亀ebpack鍜孷ite瀹炵幇浜咶eatureFlags銆傚湪瀹為檯涓氬姟寮€鍙戜腑锛屾垜浠彲浠ヨ璁″悇绉岶eatureFlags锛岃浠ｇ爜鏇村ソ鐨勮繘琛孴reeShaking銆傚弬鑰冩枃绔燜eatureFlag鐗规€у彂甯冩帶鍒?/p>
