Vue獨立構建與運行時構建

看了Vue 2.1.7版本的源碼, 發如今打包Vue文件的時候, 能夠經過不一樣的配置項打包不一樣的版本.

根據package.json裏面的命令能夠看到不一樣的運行方式.
其中最主要的區別就是在入口文件

是web-runtime-with-compiler.js 仍是 web-runtime.js.
這裏就是運行時構建與 獨立 構建的區別所在

查看裏面的源碼能夠發現

Web-runtime-with-compiler.js 中重載了 web-runtime.js 的$mount()方法, 主要區別在與

對options.template 選項進行了解析 => 成爲render 函數, 這個步驟能夠理解爲編譯過程
而運行時構建 對於用webpack + vue-loader 生成的項目來講, 是在預編譯階段就進行了編譯, 因此對於vue-cli生成的項目默認是使用運行時構建

因爲 Vue.js 1.0 的編譯過程須要依賴瀏覽器的 DOM，因此沒法（或者說沒有意義）將編譯器和運行時分開。所以在 Vue.js 1.0 分發包中，編譯器和運行時是打包在一塊兒，都在瀏覽器端執行。
然而到了 Vue.js 2.0，爲了支持服務端渲染（server-side rendering），編譯器不能依賴於 DOM，因此必須將編譯器和運行時分開。這就造成了獨立構建（編譯器 + 運行時）和運行時構建（僅運行時）。顯而易見，運行時構建要小於獨立構建。

http://hcysun.me/2017/03/03/V...
http://blog.csdn.net/zengyong...