鍓嶈█鏈€杩戝湪甯悓缁勭殑涓€涓厔寮熼」鐩仛闇€姹傦紝杩欏嚑澶╀笟鍔′唬鐮佸啓鐨勫樊涓嶅浜嗐€傛湰鐫€鍋氫簨鐨勫師鍒欙紝缁忚繃绠€鍗曠殑鍒嗘瀽锛屽喅瀹氬仛涓€娉紭鍖栥€傛垜浠厛绠€鍗曠湅涓€涓嬩紭鍖栫粨鏋溿€傚厛鐫逛负蹇紭鍖栧墠锛氫紭鍖栧悗锛氿煇娥煇?0%猬嗭笍馃惗馃惗Before锛欰fter锛氭晥鏋滆繕鏄湁閭ｄ箞涓€鐐圭偣锛屼笅闈㈠氨鏉ョ湅鐪嬪叿浣撴楠ゅ惂銆俉hathaveyoudonestep1-鍒嗘瀽鐡堕鐨勭涓€姝ュ綋鐒舵槸鎵惧埌瀵圭數褰卞奖鍝嶆渶澶х殑鍥犵礌銆傝繖娆′富瑕佹槸澶勭悊鎵撳寘鍜屽姞杞界殑涓€浜涢棶棰橈紝鎵€浠ュ厛鏁翠綋鍒嗘瀽涓€涓嬩竴浜涢」鐩殑缁勬垚銆傚叿浣撶殑娓叉煋闂鏈枃涓嶅仛浠嬬粛銆傝寖鍥淬€傞鍏堟彁渚涗竴涓寘鍒嗘瀽宸ュ叿锛歸ebpack-bundle-analyzer銆傚叿浣撶敤娉曪細//webpack.config.jsconstBundleAnalyzerPlugin=require('webpack-bundle-analyzer').BundleAnalyzerPlugin;//...pluginsnewBundleAnalyzerPlugin({analyzerMode:'server',generateStatsFile:true,statsOptions:{source:false}})杩涜瀹夎锛岀劧鍚庨噸鍚湇鍔″櫒锛屽嵆鍙湪http://127.0.0.1:8888/鐪嬪埌瑙ｆ瀽銆傜畝鍗曞垎鏋愪簡涓€涓嬶紝鍙戠幇浜嗗嚑涓棶棰橈細node-modules閮芥墦鍖呭湪涓€涓寘閲岋紝浣撶Н宸茬粡杈惧埌浜?.52M銆傛湁浜涘寘娌℃湁鐢ㄥ濮垮娍锛屾病鏈夊仛tree-shaking锛屾瘮濡傚ぇ浣琹odash锛寁ue-awesome銆備簡瑙ｄ簡浠ヤ笂淇℃伅鍚庯紝灏卞彲浠ュ紑濮嬩竴涓€鐮磋В浜嗐€俿tep2:瀵圭棁涓嬭嵂1.BundleSplit淇敼鍓嶏細optimization:{splitChunks:{cacheGroups:{commons:{test:/[\\/]node_modules[\\/]/,name:'vendors',chunks:'all'}}}}锛屼慨鏀瑰悗锛氫紭鍖栵細{runtimeChunk:'single',splitChunks:{chunks:'all',maxInitialRequests:Infinity,minSize:0,minChunks:1,cacheGroups:{commons:{test:/[\\/]node_modules[\\/]/,name(module){constpackageName=module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];杩斿洖`modules.${packageName.replace('@','')}`;}}}}},https://webpack.js.org/plugin...2锛氭寜闇€瀵煎叆vue-awesome:lodash:eg:3锛氬皢鍏叡璧勬簮鏀惧埌CDN銆傚洖澶寸湅css鏂囦欢锛屽師鏉ユ槸涓€涓富棰樺寘锛屽叾浠栭」鐩篃鐢ㄥ埌浜嗐€傛棤闇€灏嗗叾瑁呭叆琚嬩腑銆俿tep3锛氭寜闇€鍔犺浇妯″潡銆俁eact鏈変竴涓被浼糒oadable鐨勫伐鍏凤紝鍏跺疄鍘熺悊鏄竴鏍风殑銆俬ttps://github.com/jamiebuild...鍙互鍦ㄥ悎閫傜殑鑺傜偣寮傛鍔犺浇闇€瑕佺殑妯″潡锛岄伩鍏嶅叏閮ㄤ竴璧峰姞杞姐€傛瘮濡傚彲浠ュ崟鐙姞杞芥煇涓〉闈紝濡傦細constHello=()=>import('./components/Hello.vue');Vue.component('xxx',浣犲ソ);杩欐牱姣忎釜妯″潡閮戒細鍗曠嫭鎵撳寘锛氬悓鏃朵綘杩橀渶瑕佸彟澶栦竴涓伐鍏锋潵鍚堝苟杩欎簺灏忓寘浜х敓鐨凥TTP璇锋眰锛歨ttps://webpack.js.org/plugin...澶ф灏辨槸杩欐牱鍚э紝褰撶劧鍙兘澶勭悊鐨勭粏鑺傝繕鏈夊緢澶氾紝杩欓噷灏变笉璧樿堪浜嗐€傜粨璇紭鍖栨槸涓€涓惊搴忔笎杩涚殑杩囩▼锛屾湁鏃跺彲鑳介渶瑕佸Ε鍗忥紝浣嗘瘡涓€姝ヤ紭鍖栭兘浼氱粰浣犲甫鏉ユ剦蹇殑蹇冩儏鍜屾垚灏辨劅銆傚畠鐢氳嚦鍙互鑺傜渷鎮ㄧ殑KPI锛屽搱鍝堛€傚笇鏈涗互涓婄殑涓€浜涙枃瀛楄兘缁欎綘甯︽潵涓€浜涘惎鍙戙€傞毦鍏嶆湁鐤忔紡涔嬪锛屾暚璇锋寚姝ｏ紝璋㈣阿銆傛渶鍚庯紝濡傛灉瑙夊緱鍐呭鏈夊府鍔╋紝鍙互鍏虫敞鎴戠殑鍏紬鍙枫€婂墠绔痚杩涢樁銆嬶紝鎺屾彙鏈€鏂板姩鎬侊紝鍏卞悓瀛︿範鎴愰暱锛佹帹鑽愰槄璇伙細https://segmentfault.com/a/11...
