Vue源碼探究-構建版本的區別

Vue源碼探究-構建版本的區別

基於第三方性能評估工具Benchmark的測評結果能夠看出Vue 2.0版本在總體的性能上獲得了大幅優化，即便與React和Angular最新版相比也相差無幾。在提供給使用者的構建版本方面，也進行了針對性的細化，輸出了多種不一樣的版本，以便知足不一樣需求的開發者使用更精細更適合本身的版本。

構建版本的比較

官方文檔上展現的歸納圖表（如下譯自該文檔）：

	UMD	CommonJS	ES Module
Full	vue.js	vue.common.js	vue.esm.js
Runtime-only	vue.runtime.js	vue.runtime.common.js	vue.runtime.esm.js
Full (production)	vue.min.js
Runtime-only (production)	vue.runtime.min.js

解釋一下上表列出的全部版本的內容區別和使用場景，具體的術語就不一一解釋了，英語可得靠本身好好學習：

vue.js

• 內容：完整未壓縮版，包括編譯器和運行時兩部分代碼，支持通用模塊引入和閉包返回Vue構造函數。
• 建議使用場景：須要編譯模板的開發環境。
• 版本說明：因爲未壓縮，因此在生產環境下是不推薦使用的，這一版本比較適合學習源代碼時使用。另外在Unpkg CDN上默認使用此完整版構建文件。

vue.min.js

• 內容： 完整壓縮版，內容和輸出徹底同上。
• 建議使用場景：須要編譯模板的生產環境、瀏覽器script標籤直接引用。
• 版本說明：在不想增長使用構建工具的學習曲線和複雜度時，直接使用script標籤引入此版本能夠無門檻直接進入Vue的學習和使用，而且支持通用模塊加載。在生產環境建議使用壓縮版能夠減小30%的文件體積。

vue.common.js

• 內容： 完整未壓縮CommonJS版，內容同上，區別在於輸出的是CommonJS模塊。
• 建議使用場景：需編譯模板且使用老版本構建工具的開發環境。
• 版本說明：因爲此版本未壓縮是不建議直接使用在生產環境上的。若是在使用構建工具的狀況下能夠直接使用對應的運行時版本，因此該版本的使用場景應該比較有限。

vue.esm.js

• 內容： 完整未壓縮ES Module版，內容同上，區別在於輸出的是ES Module模塊。
• 建議使用場景：需編譯模板且使用新版構建工具的開發環境。
• 版本說明：同上。

vue.runtime.js

• 內容： 未壓縮運行時版，支持通用模塊引入和閉包返回Vue構造函數。
• 建議使用場景：不須要編譯模板的開發環境。
• 版本說明：這一版本也不建議在生產環境使用，須要模塊加載可用相應的壓縮版。

vue.runtime.min.js

• 內容： 壓縮運行時版，內容和輸出徹底同上。
• 建議使用場景：不須要編譯模板的生產環境。
• 版本說明：若是不須要編譯模板，可使用這個版本，支持通用模塊加載，也能夠用script標籤引入直接在瀏覽器中使用，是體積最小的版本。

vue.runtime.common.js

• 內容： 未壓縮版CommonJs構建版，內容同上，區別在於輸出CommonJS模塊。
• 建議使用場景：不需編譯模板且使用老版本構建工具時。
• 版本說明：使用browserify或webpack1時默認使用該版本。

vue.runtime.esm.js

• 內容： 未壓縮版ES module構建版，內容同上，區別在於輸出ES module模塊。
• 建議使用場景：不需編譯模板且使用新版構建工具時.
• 版本說明：使用webpack2和rollup時默認使用該版本，在使用最新的vue-cli搭建的webpack腳手架時就是使用了這個版本。

另外在倉庫裏發現的一個叫vue.esm.browser.js的文件，仔細看了一下與vue.esm.js相比用的全是ES6的語法，但圖表裏沒有提到此文件是什麼狀況下使用，並且是稍前幾回構建出的版本，我的猜測多是沒有什麼特別的用處，只是沒有刪掉而已，歡迎指正。

完整版 vs. 運行時版

完整版的使用場景是須要即時編譯模板的狀況，什麼是即時編譯模板？

在程序運行中進行模板編譯。這一過程如同動態加載，當把模板字符串做爲配置選項的template屬性傳入Vue構造函數後再執行渲染進程；或使用DOM已有元素做爲模板在運行時加載並編譯，這些都是在運行中進行模板編譯的實例。因而可知通常使用了type="text/x-template"的script標籤包含的模板就是在代碼運行中進行加載編譯的，因此此時須要完整版中的編譯器來執行把模板轉化成渲染函數的過程，不然經過vue進行構造的內容是沒法顯示的。在開發時若是使用了運行時版，Vue也會在Console中給出提示。

相反，若是使用構建工具開發，在程序運行以前就先執行了模板的編譯過程，.vue單文件組件會被編譯轉換成javascript代碼，在瀏覽器中能夠直接運行，因此此時只需使用運行時版本就能夠支持Vue的正常運行，這樣Vue的體積更小，有助於提高加載速度，因此在熟悉了Vue以後比較推薦配合使用構建工具來進行開發。

開發模式 vs. 生產模式

官方文檔表示在通用模塊版本中使用了開發和生產模式的硬編碼，未壓縮版的用於開發模式，壓縮版的用於生產模式。

在使用構建工具時，建議使用與構建工具版本相應的未壓縮版，這樣在開發時參考錯誤信息報告和定位調試是很是便利的，而在構建打包到生產環境時，配套插件會負責壓縮代碼。

基於網頁性能優化的原則，建議在生產環境中都要使用壓縮版。只有在開發時才須要未壓縮版中的錯誤提示信息方便定位錯誤及調整。

---

在2.0版本發佈之後，Vue開始提供不一樣構建版本，大體瞭解以後發如今不一樣開發場景下選擇適當的版本有助於減小開發時每次打包的速度，而且瞭解各類版本的不一樣後也能選擇適合的生產版本提高應用的總體性能。在網上找了好久才發現原來官方Github上有比較詳細的說明文檔解釋各類版本的區別，不過對於具體的使用場景沒有特別突出的說明，最後仍是本身花了些時間去比較和總結，算是又把心中的一塊小石頭給抹掉。我想對於目前跟我同樣還不太瞭解Vue內部實現機制的同窗來講，弄明白各類版本的差別是一個快速獲得性能優化最佳實踐的途徑。