说说Vite2.0的原理，依赖预编译，插件机制如何兼容Rollup？

Vite浼氬府浣犲湪鏈湴鍚姩涓€涓湇鍔″櫒锛屽綋娴忚鍣ㄨ鍙栧埌杩欎釜html鏂囦欢鍚庢墽琛岋紝鎵ц瀵煎叆鏃讹紝瀹冨皢鍚戞湇鍔″櫒鍙戦€佸Main.vue妯″潡鐨勮姹傘€傝繖鏃跺€欙紝Vite姝ｅ湪浣跨敤涓€绯诲垪鍐呴儴榛戦瓟娉曪紝鍖呮嫭Vue鐨勬ā鏉胯В鏋愩€佷唬鐮佺紪璇戠瓑锛岃В鏋愭垚娴忚鍣ㄥ彲浠ユ墽琛岀殑js鏂囦欢杩斿洖缁欐祻瑙堝櫒绔€傝繖鏍峰彲浠ヤ繚璇佹祻瑙堝櫒鍙湁鍦ㄥ疄闄呬娇鐢ㄦā鍧楁椂鎵嶄細鍘昏姹傚拰瑙ｆ瀽妯″潡锛屾渶澶ч檺搴﹀湴鍋氬埌鎸夐渶鍔犺浇銆傜敤Vite瀹樼綉鐨勫浘鏉ヨВ閲婏紝浼犵粺鐨刡undle妯″紡鏄繖鏍风殑锛氳€屽熀浜嶦SM鐨勬瀯寤烘ā寮忔槸杩欐牱鐨勶細鐏拌壊閮ㄥ垎鏄殏鏃朵笉鐢ㄧ殑璺敱锛岀敋鑷充笉浼氬弬涓庡湪鏋勫缓杩囩▼涓€傝矾鐢辫秺鏉ヨ秺澶氾紝鏋勫缓閫熷害涓嶄細鍑忔參銆侱ependencyprecompilationDependencyprecompilation锛屽叾瀹濾ite2.0鍦ㄤ负鐢ㄦ埛鍚姩寮€鍙戞湇鍔″櫒涔嬪墠浣跨敤esbuild鏉ラ鏋勫缓妫€娴嬪埌鐨勪緷璧栥€傚彲鑳戒綘浼氱枒鎯戯紝涓嶆槸涓€鐩村湪璇寸殑no-bundle鍚楋紝鎬庝箞杩樿蛋鍚姩鏃剁紪璇戠殑璺嚎鍛紵褰撶劧锛屽挨鑰佸笀杩欐牱鍋氭槸鏈夊師鍥犵殑銆傛垜浠互瀵煎叆lodash-es鍖呬负渚嬨€傚綋浣犱娇鐢╥mport{debounce}from'lodash'瀵煎叆涓€涓懡鍚嶅嚱鏁版椂锛屼篃璁镐綘鐞嗘兂鐨勫満鏅槸娴忚鍣ㄤ笅杞藉彧鍖呭惈杩欎釜鍑芥暟鐨勬枃浠躲€備絾瀹為檯涓婏紝骞朵笉鏄偅涔堢悊鎯炽€俤ebounce鍑芥暟鐨勬ā鍧椾緷璧栦簬璁稿鍏朵粬鍑芥暟锛屽舰鎴愪竴涓緷璧栧浘銆傚綋娴忚鍣ㄨ姹俤ebounce妯″潡鏃讹紝浼氬彂鐜伴噷闈㈡湁2涓猧mport銆備竴鐩磋繖鏍蜂笅鍘伙紝杩欎釜鍑芥暟閲岄潰鍏跺疄甯︿簡600涓姹傦紝鑰楁椂1s宸﹀彸銆傝繖褰撶劧鏄笉鑳芥帴鍙楃殑锛屾墍浠ュ挨鍏堢敓鎯充簡涓€涓姌涓殑鍔炴硶锛屽氨鏄埄鐢‥sbuild杩戜箮鏃犳晫鐨勬瀯寤洪€熷害锛岃浣犲湪鍚姩鏃堕瑁卍ebounce浣跨敤鐨勬墍鏈夊唴閮ㄦā鍧楋紝鏃犻渶鎰熺煡锛屽叏閮ㄦ墦鍖呮垚涓€涓紶缁熺殑jsbundle.Esbuild鏄敤Go缂栧啓鐨勶紝姣旂敤JavaScript缂栧啓鐨勬崋缁戝櫒棰勬瀯寤轰緷璧栭」蹇?0-100鍊嶃€傚湪httpServer.listen鍚姩寮€鍙戞湇鍔″櫒涔嬪墠锛岃繖涓嚱鏁颁細鍏堣鍔寔閲嶅啓锛屾斁鍒颁緷璧栦簬棰勬瀯寤虹殑棰勬瀯寤烘楠わ紝Vite浼氬惎鍔ㄦ湇鍔″櫒鐩稿叧鐨勪唬鐮併€?/server/index.tsconstlisten=httpServer.listen.bind(httpServer)httpServer.listen=(async(port:number,...args:any[])=>{try{awaitcontainer.buildStart({})//杩欓噷浼氶鍏堟瀯寤轰緷璧朼waitrunOptimize()}catch(e){httpServer.emit('error',e)return}returnlisten(port,...args)})asany鍜宺unOptimize鐩稿叧鐨勪唬鐮乀hen鍦℅ithub浼樺寲鍣ㄤ腑銆傞鍏堬紝浼氭牴鎹湰娆¤繍琛岀殑鍏ュ彛鎵弿渚濊禆椤癸細config))}scanImports鍏跺疄灏辨槸鍒╃敤浜咵sbuild鎻愪緵鐨刪ook鏉ユ壂鎻忔枃浠朵腑鐨勪緷璧栵紝鏀堕泦鍒癲eps鍙橀噺涓紝鎵弿鍏ュ彛鏂囦欢锛堝index.html锛変腑鐨勪緷璧栨ā鍧楀悗褰㈡垚杩欐牱鐨勪緷璧栬矾寰勬暟鎹粨鏋勶細{"lodash-es":"node_modules/lodash-es"}鐒跺悗鏍规嵁鍒嗘瀽鍑虹殑渚濊禆鍏崇郴锛屼娇鐢‥sbuild棰勫厛鎵撳寘鎴愬崟鏂囦欢bundle銆俢onstesbuildService=awaitensureService()awaitesbuildService.build({entryPoints:Object.keys(flatIdDeps),bundle:true,format:'esm',external:config.optimizeDeps?.exclude,logLevel:'error',鍒嗚锛歵rue,sourcemap:true,outdir:cacheDir,treeShaking:'ignore-annotations',metafile:esbuildMetaPath,define,plugins:[esbuildDepPlugin(flatIdDeps,flatIdToExports,config)]})褰撴祻瑙堝櫒璇锋眰鐩稿叧妯″潡鏃讹紝杩斿洖杩欎釜棰勫缓妯″潡.杩欐牱褰撴祻瑙堝櫒璇锋眰lodash-es涓殑debounce妯″潡鏃讹紝鍙互淇濊瘉鍙彂鐢熶竴娆℃帴鍙ｈ姹傘€備綘鍙互鐞嗚В涓鸿繖涓€姝ュ拰Webpack鍋氱殑build鏄竴鏍风殑锛屼絾鏄€熷害蹇簡鍑犲崄鍊嶃€傚湪pre-build姝ラ涓紝涔熶細瀵笴ommonJS妯″潡杩涜鍒嗘瀽锛屼互渚垮悗鏈熷鐞嗘垚娴忚鍣ㄥ彲浠ユ墽琛岀殑ESModule銆傛彃浠舵満鍒跺緢澶氬悓瀛︽彁鍒癡ite锛岀涓€鍙嶅簲灏辨槸鐢熸€佽繕涓嶅鎴愮啛銆傚叾浠栨瀯寤哄伐鍏蜂腑鏈夎繖涔堝鐨勭涓夋柟鎻掍欢锛屾彁渚涗簡鍚勭寮€绠卞嵆鐢ㄧ殑渚挎嵎鍔熻兘銆俈ite瑕佸涔呮墠鑳借刀涓婃潵锛熷彈Preact鐨刉MR鐨勫惎鍙戯紝Vite灏嗘彃浠舵満鍒跺仛鎴愪簡Rollup鍏煎鐨勬牸寮忋€備簬鏄氨鏈変簡杩欎釜浜掔埍LOGO锛氱洰鍓嶅吋瀹箆ite鎴栬€呭唴缃彃浠讹紝鍙互鏌ョ湅vite-rollup-plugins銆傜畝鍗曚粙缁嶄竴涓婻ollup鎻掍欢銆傛彃浠跺叾瀹炲氨鏄疪ollup瀵瑰鎻愪緵鐨勪竴浜涙椂搴忕殑hook锛屼互鍙婁竴浜涘伐鍏峰拰鏂规硶锛岃鐢ㄦ埛鍙互缂栧啓涓€浜涢厤缃唬鐮佹潵骞查Rollup杩愯鐨勫悇绉嶆椂搴忋€傛瘮濡傚湪鍖呰鍓嶆敞鍏ヤ竴浜涗笢瑗匡紝鎴栬€呮敼鍙樹竴浜涗骇鍝佺粨鏋勶紝浠呮鑰屽凡銆俈ite瑕佸仛鐨勫氨鏄熀浜嶳ollup璁捐鐨勬帴鍙ｈ繘琛屾墿灞曘€傚湪淇濊瘉Rollup鎻掍欢鍏煎鎬х殑鍚屾椂锛屾坊鍔犱竴浜沄ite鐗规湁鐨刪ooks鍜宲roperties杩涜鎵╁睍銆備妇涓畝鍗曠殑渚嬪瓙锛孈rollup/plugin-image鍙互灏唅mage妯″潡瑙ｆ瀽鎴恇ase64鏍煎紡銆傚畠鐨勬簮鐮佸叾瀹炲緢绠€鍗曪細'image',load(id){if(!filter(id)){returnnull}constmime=mimeTypes[extname(id)]if(!mime){//涓嶆槸鍥惧儚returnnull}constisSvg=mime===mimeTypes['.svg']constformat=isSvg?'utf-8':'base64'constsource=readFileSync(id,format).replace(/[\r\n]+/gm,'')constdataUri=getDataUri({format,isSvg,mime,source})const浠ｇ爜=options.dom锛焏omTemplate({dataUri}):constTemplate({dataUri})returncode.trim()}}}鍏跺疄灏辨槸loadhook锛屽湪璇诲彇妯″潡鐨勬椂鍊欙紝灏嗗浘鐗囪浆鎹㈡垚瀵瑰簲鏍煎紡鐨刣ata-uri锛屾墍浠iteonly璇诲彇妯″潡鏃堕渶瑕佸吋瀹规墽琛岀浉鍏崇殑閽╁瓙銆傝櫧鐒禫ite鐨勫緢澶氳涓轰笌Rollup涓嶅悓锛屼絾瀹冧滑鏈夊緢澶氱浉浼肩殑琛屼负鍜屾椂鏈恒€傚彧瑕丷ollup鎻掍欢鍙娇鐢ㄨ繖浜涘父鐢ㄧ殑hooks锛屽氨寰堝鏄撹鎻掍欢閫氱敤銆傚彲浠ュ弬鑰僔ite瀹樼綉鏂囨。-鎻掍欢閮ㄥ垎涓€鑸潵璇达紝Rollup鎻掍欢鍙婊¤冻浠ヤ笅鏉′欢锛屽氨鍙兘浣滀负Vite鎻掍欢浣跨敤锛氫笉浣跨敤moduleParsedhook銆傚畠鍦ㄦ墦鍖呴挬瀛愬拰杈撳嚭閽╁瓙涔嬮棿娌℃湁寮鸿€﹀悎銆傚鏋淩ollup鎻掍欢浠呭湪鏋勫缓闃舵鏈夋剰涔夛紝璇峰湪build.rollupOptions.plugins涓嬫寚瀹氬畠銆俈ite鑳屽悗鐨勭洰鏍囦篃搴旇鏄敖鍙兘鎺ヨ繎Rollup鐩稿叧鐨勬彃浠剁敓鎬侊紝绀惧尯涔熶細涓€璧疯础鐚紝甯屾湜Vite鐨勭敓鎬佽秺鏉ヨ秺濂姐€備笌涓嶸ite鍚屾椂鍑虹幇鐨勭幇浠ｆ瀯寤哄伐鍏风浉姣旓細Snowpack-鏇村揩鐨勫墠绔瀯寤哄伐鍏穚reactjs/wmr锛氿煈┾€嶐煔€Thetinyall-in-onedevelopmenttoolformodernwebapps.WebDevServer:ModernWebSnowpackSnowpackissimilar鍒癡ite锛屼篃鏄熀浜嶦SM瀹炵幇寮€鍙戠幆澧冩ā鍧楀姞杞斤紝浣嗗叾鏋勫缓鐣欑粰鐢ㄦ埛閫夋嫨锛屾暣浣撳皝瑁呬綋楠屾湁鐐圭鐗囧寲銆俈ite鐩存帴闆嗘垚浜哛ollup锛屼负鐢ㄦ埛鎻愪緵浜嗕竴涓畬鏁寸殑銆佸紑绠卞嵆鐢ㄧ殑瑙ｅ喅鏂规锛屽苟涓斿洜涓鸿繖浜涢泦鎴愶紝涔熸柟渚挎墿灞曟洿澶氶珮绾у姛鑳姐€俉MRWMR涓篜react鑰岀敓銆傚鏋滀綘姝ｅ湪浣跨敤Preact锛屼綘鍙互浼樺厛浣跨敤杩欎釜宸ュ叿銆侤web/dev-server宸ュ叿涓嶆彁渚涘紑绠卞嵆鐢ㄧ殑妗嗘灦鏀寔锛岄渶瑕佹墜鍔ㄨ缃甊ollup鏋勫缓閰嶇疆锛屼絾璇ラ」鐩腑鍖呭惈鐨勮澶氬伐鍏蜂篃鍙互浣縑ite鐢ㄦ埛鍙楃泭銆傛洿鍏蜂綋鐨勫姣斿彲浠ュ弬鑰僔ite鏂囨。鈥斺€斿姣旀€荤粨Vite鏄竴涓厖婊￠瓟鍔涚殑鐜颁唬鏋勫缓宸ュ叿锛屾父鑰佸笀涔熷湪鍚勪釜骞冲彴涓婃斁鐙犺瘽锛岃瑕佸彇浠ebpack銆傚叾瀹濿ebpack鍦ㄤ笂涓€浠ｄ篃鏄竴涓础鐚緢澶х殑鏋勫缓宸ュ叿锛屼絾鏄敱浜庢柊鐗规€х殑鍑虹幇锛屾湁涓€涓В鍐虫柟妗堝彲浠ヨВ鍐冲畠鐨勯潪璁€傜洰鍓嶄釜浜鸿涓轰竴浜涜交閲忕骇鐨勯」鐩紙涓嶉渶瑕佷竴浜涚壒鍒鎬殑渚濊禆鏉ユ惌寤猴級鍙互寮€濮嬪皾璇昖ite锛屾瘮濡傦細鍚勭妗嗘灦锛屽簱涓殑demo椤圭洰銆備竴浜涗紒涓氶」鐩殑杞婚噺绾с€備篃琛峰績绁濇効Vite鐨勭敓鎬佽秺鏉ヨ秺濂斤紝鎴戜滑涓€璧疯繋鎺ヨ繖涓€浠ｇ殑寤鸿銆備絾閭ｄ釜鏃跺€欙紝鎴戝彲鑳借繕鎬€蹇礧ebpack閿欒繃鏋勫缓鐨勯偅娈垫椂鍏夛紝閭ｅ嚑鍒嗛挓璁ょ湡閽撻奔鐨勬椂鍒火煒嗐€傝阿璋紝涔熸杩庡悇鐣屽墠绔ぇ渚犲姞鎴憇shsunlight浜ゅ弸锛屼篃娆㈣繋闅忔椂缁欐垜鍙戠畝鍘嗐€?/p>