璁╂垜浠湅鐪?Vue js 鏄浣曞伐浣滅殑锛?浠ュ強 Vue js 鎬ц兘涓嶄匠鑳屽悗鐨勯噸瑕佸師鍥犮€?/p>

闄嶄綆 Vue 鎬ц兘鐨勫師鍥犲彇鍐充簬鎮ㄧ殑 Vue js 搴旂敤缁撴瀯銆備緥濡傦紝Vue jS 鍗曢〉搴旂敤绋嬪簭 锛圫AS锛?涓€ц兘涓嶄匠鐨勯噸瑕佸師鍥犱箣涓€鍙兘涓庡鐞嗘湇鍔″櫒渚ф覆鏌擄紙SSR锛?鐨?VueJS 椤圭洰涓嶅悓銆?/p>

浠讳綍寮€鍙戜汉鍛橀兘鑳借€冭檻搴旂敤绋嬪簭鏄?SPA 杩樻槸鍏锋湁 SSR 鐨勪富瑕佸師鍥犳槸鎹嗙粦澶у皬銆?strong>鎹嗙粦灏哄瓒婂ぇ锛孷ue js 鎬ц兘瓒婃參銆傚洜姝わ紝鎴戜滑鍙互寰楀嚭缁撹锛屾崋缁戝ぇ灏忎笌搴旂敤绋嬪簭鎬ц兘鎴愬弽姣斻€?/p>

Vue js 澶у簲鐢ㄧ▼搴忚儗鍚庣殑涓€浜涘父瑙佸師鍥?-

• 涓嶆槑鏅哄湴浣跨敤绗笁鏂瑰簱
• 蹇界暐浠ｇ爜鍒嗗壊鍜屾儼鎬у姞杞?/li>
• 瀵?API 璇锋眰鐨勪笉蹇呰鐨勭偣鍑?/li>
• 鏈纭瀯寤?JS 鍜?CSS 鏂囦欢

鍦ㄨ璁哄浣曞噺灏戞崋缁戝ぇ灏忎箣鍓嶏紝璁╂垜浠湅鐪嬪浣曟鏌?Vue js 鍜?Vue js 浼佷笟搴旂敤绋嬪簭鐨勬崋缁戝ぇ灏忕殑澶у皬銆?/p>

濡備綍妫€鏌ユ偍鐨?VueJS 搴旂敤鐨勫ぇ灏忥紵

鎴戝皢鍚戞偍灞曠ず涓ょ鏂规硶鏉ユ鏌?Vue js 搴旂敤绋嬪簭鐨勫ぇ灏忋€?/p>

1. 鐢熸垚鎶ュ憡

鐢熸垚鎶ュ憡鍙洿瑙傚湴鎻忚堪鎵€浣跨敤鐨勫悇绉嶅寘鐨勫ぇ灏忋€傛澶栵紝鎮ㄥ彲浠ユ壘鍑哄浣曟浛鎹换浣曟瘮棰勬湡绌洪棿鏇村ぇ鐨勫寘銆傛偍鍙互浣跨敤鍛戒护鐢熸垚鎶ュ憡鐢熸垚搴旂敤绋嬪簭鎶ュ憡銆傝璁颁綇锛屾鍛戒护灏嗘瀯寤轰竴涓簲鐢ㄧ▼搴忕殑鎶ュ憡锛屽叾涓畨瑁呬簡webpack-bundle-analyzer銆?/p>

杩愯涓婅堪鍛戒护鍚庯紝鎵撳紑鍖?json 鏂囦欢骞舵坊鍔犳鍐呭

"build-report": "vue-cli-service build --report"

鐒跺悗鎵ц姝?銆?/p>

npm run build-report

鎵ц鎵€鏈夎繖浜涗箣鍚庯紝灏嗗湪dist鏂囦欢澶逛腑鍒涘缓涓€涓悕涓?"鎶ュ憡.html鐨勬枃浠躲€?鎵撳紑璇ユ枃浠舵椂锛屾偍灏嗚瀵熸

涓嬮潰鏄竴浜?VueJS 鎬ц兘鎻愮ず锛屾偍鍙互瀹炵幇浠ヤ紭鍖?Vue .js搴旂敤绋嬪簭鐨勬€ц兘銆?/p>

1. 鍦?Vue js 涓噿鍔犺浇

鏍规嵁鍚嶇О锛孷ue js 涓殑鎳掑姞杞芥槸鎳掑姞杞藉簲鐢ㄧ▼搴忎腑鐨勬ā鍧楃殑鏂规硶锛屽嵆褰撶敤鎴峰疄闄呴渶瑕佽妯″潡鏃躲€傚ぇ澶氭暟鏃跺€欙紝姣忓綋鐢ㄦ埛璁块棶缃戠珯鏃讹紝鏃犻渶鍔犺浇 JavaScript 鎹嗙粦鍖呬腑鐨勬墍鏈夋ā鍧椼€?/p>

鏈変竴浜涚粍浠跺叿鏈夋ā寮忓拰宸ュ叿灏栵紝鍙湪闇€瑕佹椂鍔犺浇銆傚鏋滄偍姝ｅ湪澶勭悊涓や釜鎴栦笁涓ā鎬佹垨宸ュ叿灏栵紝鍒欑湅涓嶅埌缁撴灉锛屼絾鏄紝鍋囪鎮ㄦ湁涓€涓叿鏈夎繖涔堝妯″紡鍜屽伐鍏峰皷鐨勫箍娉?Vue 搴旂敤绋嬪簭;涓€娆″姞杞藉畠浠細闄嶄綆鎮ㄧ殑鎬ц兘銆?/p>

瀹冩牴鏈笉鍊煎緱姣忔椤甸潰鍔犺浇鏃跺姞杞芥暣涓崋缁戝寘銆傚洜姝わ紝瀹冨姞杞芥湁鍔╀簬鎮ㄥ垝鍒嗘崋缁戝寘骞跺湪浣跨敤鏃跺姞杞藉畠浠€傝繖鏍凤紝瀹冮€氳繃涓嶄笅杞藉拰瑙ｆ瀽涓嶅繀瑕佺殑浠ｇ爜鏉ヨ妭鐪佹椂闂淬€?/p>

瑕佹鏌ョ綉绔欎腑浣跨敤鐨勫疄闄?JavaScript 浠ｇ爜

1. Click devtools
2. cmd + shift + p
3. Type coverage
4. Click record

甯︽湁绾㈣壊楂樺厜鐨勭綉鏍间笉浣跨敤锛屽彲浠ユ噿鍔犺浇銆傞€氳繃鍒╃敤鎳掑姞杞斤紝鎮ㄥ彲浠ュ皢鎹嗙粦澶у皬鍑忓皯 60%銆?/p>

杩欐槸鍏充簬浠€涔堝拰涓轰粈涔堟垜浠簲璇ヨ缁勪欢鍜屾ā鍧楁噿鍔犺浇鍦板ぇ瑙勬ā搴旂敤锛氳鎴戜滑鏉ユ帰璁ㄥ浣曟墽琛屽畠銆?/p>

鎴戜滑鍙互浣跨敤 Webpack 鍔ㄦ€佸鍏ヨ€屼笉鏄父瑙勫鍏ユ潵鍒嗙蹇呴』鎳掑姞杞界殑妯″潡銆?/p>

杩欏氨鏄偍瀵煎叆 JavaScript 鏂囦欢鏃剁殑杈撳叆鏂瑰紡锛屽鍚楋紵

// demo.js
const Demo = {
  testDemo: function () {
    console.log("This is just a demo!")
  }
}
export default Demo

// app.js
import Demo from './demo.js'
Demo.testDemo()

瀹冨皢娣诲姞鏂囦欢婕旂ず.js浣滀负搴旂敤绋嬪簭鐨?/em>鑺傜偣.js鍦ㄥ叾渚濊禆鍥句腑锛屽苟閫氳繃浠ヨ繖绉嶆柟寮忓鍏ュ畠灏嗗叾鎹嗙粦鍦ㄤ竴璧枫€傚洜姝わ紝姣忓綋鎹嗙粦鍖呰鍔犺浇鏃讹紝婕旂ず.js灏嗗姞杞斤紝鏃犺鍏堕渶瑕佸浣曘€?/p>

浣嗘槸锛屽鏋滄垜浠鍔犺浇婕旂ず.js浠呬綔涓烘煇浜涚敤鎴锋搷浣滃搷搴斻€傚湪杩欑鎯呭喌涓嬶紝鎴戜滑灏嗗疄鏂藉姩鎬佸鍏ワ紝鍛婅瘔搴旂敤绋嬪簭涓嬭浇姝ゆā鍧椾粎鍦ㄩ渶瑕佹椂銆?/p>

浠ヤ笅鏄涓婅堪浠ｇ爜鐨勪慨鏀癸紝鐢ㄤ簬鎵ц鐢ㄤ簬娴嬭瘯 Vue .js 搴旂敤绋嬪簭鐨勫姩鎬佸鍏?/strong>

// app.js
const getDemo = () => import('./demo.js')

// later when some user action tasks place as hitting the route
getDemo()
  .then({ testDemo } => testDemo())