淺析兩種構建版本Vue的區別

本文主要介紹Vue兩個不一樣構建版本的區別，以及編寫代碼的最佳實踐。

做者：王二狗
座右銘：告誡本身，即便再累也不要忘記學習，成功沒有捷徑可走，只有一步接着一步走下去。

完整版和運行時版

打開Vue的官網，你會發現有Vue有兩種不一樣的構建版本，Vue官方對兩種不一樣構建版本的解釋是這樣子的：

• 完整版：同時包含編譯器和運行時的版本（編譯器：用來將模板字符串編譯爲JS渲染函數的代碼）
• 運行時：用來建立Vue實例，渲染並處理虛擬DOM等的代碼，基本上就是出去編譯器的其它一切。

兩種版本	UMD	CommonJS	基於構建工具使用	直接用於瀏覽器
完整版	vue.js	vue.common.js	vue.esm.js	vue.esm.browser.js
運行時版	vue.runtime.js	vue.runtime.common.js	vue.runtime.esm.js

兩種版本的區別

比較列	完整版	運行時版	評價
特色	有compiler	沒有 compiler	完整版體積較大，其中僅compiler就佔整個文件40%大小
視圖	寫在HTML中或者寫在template選項中	寫在 render 函數裏，用 h 來建立標籤	h 是尤雨溪寫好傳給 render 的
CDN引入	vue.js	vue.runtime.js	文件名不一樣，生成環境後綴爲 .min.js
webpack 引入	須要配置 alias	默認使用此版本	尤雨溪所配置
@vue/cli 引入	須要額外配置	默認使用此版本	尤雨溪蔣豪羣所配置

最佳實踐：老是使用非完整版，而後配合vue-loader 和 vue 來進行使用。

思路：

• 保證用戶體驗，用戶下載的 JS 文件體積更小，但只支持 h 函數。
• 保證開發體驗，開發者可直接在 vue 文件裏面寫 html 標籤，而不寫 h 函數
• 髒活累活讓 loader 作，vue-loader 把 vue 文件裏面的 html 轉爲 h 函數。

你的點贊是我持續分享好東西的動力，歡迎點贊！