概念：有兩種構建方式，獨立構建和運行構建。它們的區別在於前者包含模板編譯器而后者不包含。
模板編譯器：模板編譯器的職責是將模板字符串編譯為純 JavaScript 的渲染函數。如果你想要在組件中使用 template 選項，你就需要編譯器。
模板字符串：template
el:提供一個在頁面上已存在的 DOM 元素作為 Vue 實例的掛載目標。可以是 CSS 選擇器，也可以是一個 HTMLElement 實例。
template:一個字符串模板作為 Vue 實例的標識使用。模板將會 替換 掛載的元素。掛載元素的內容都將被忽略，除非模板的內容有分發 slot。
render:字符串模板的代替方案，允許你發揮 JavaScript 最大的編程能力。render 函數接收一個 createElement 方法作為第一個參數用來創建 VNode。
-
獨立構建包含模板編譯器並支持
template選項。 它也依賴於瀏覽器的接口的存在，所以你不能使用它來為服務器端渲染。 -
運行時構建不包含模板編譯器，因此不支持
template選項，只能用render選項，但即使使用運行時構建，在單文件組件中也依然可以寫模板，因為單文件組件的模板會在構建時預編譯為render函數。運行時構建比獨立構建要輕量30%，只有 17.14 Kb min+gzip大小。
為什么要使用獨立構建和運行時構建？
Vue.js 的運行過程實際上包含兩步。第一步，編譯器將字符串模板（template）編譯為渲染函數（render），稱之為編譯過程；第二步，運行時實際調用編譯的渲染函數，稱之為運行過程
由於 Vue.js 1.0 的編譯過程需要依賴瀏覽器的 DOM，所以無法（或者說沒有意義）將編譯器和運行時分開。因此在 Vue.js 1.0 分發包中，編譯器和運行時是打包在一起，都在瀏覽器端執行。
然而到了 Vue.js 2.0，為了支持服務端渲染（server-side rendering），編譯器不能依賴於 DOM，所以必須將編譯器和運行時分開。這就形成了獨立構建（編譯器 + 運行時）和運行時構建（僅運行時）。顯而易見，運行時構建要小於獨立構建。
在現代前端工程構建中，通常會使用 vue-loader 和 vueify 預編譯模板。在這種情況下，只需要打包運行時，而不需要打包編譯器，運行時構建即可滿足所需。當然，如果你需要在前端使用 template 選項實時編譯模板，那么還是需要使用獨立構建將編譯器發送到瀏覽器。
總結：
兩種編譯模式是為了服務器端渲染和瀏覽器執行兩種不同環境產生的
一般來講獨立構建適用於服務器端渲染
瀏覽器 實際運行時為 運行時構建 但是如果需要在前端使用 template 選項實時編譯模板，那么還是需要使用獨立構建將編譯器發送到瀏覽器。