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內部實現機制的同學來說，弄明白各種版本的差異是一個快速得到效能優化最佳實踐的途徑。