vue獨立構建和運行構建

概念：有兩種構建方式，獨立構建和運行構建。它們的區別在於前者包含模板編譯器然後者不包含。

模板編譯器：模板編譯器的職責是將模板字符串編譯爲純 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 選項實時編譯模板，那麼仍是須要使用獨立構建將編譯器發送到瀏覽器。