vue源碼學習——源碼構建

Rollup

vue.js源碼是基於Rollup構建的

Rollup 和 Webpack

rollup和webpack都是構建工具，但是webapck更強大一些，會將圖片，字體等靜態資源編譯成JavaScript，但是rollup更適合JavaScript庫的編譯，只處理js的部分，其他資源部分是不會管的。

vue.js 源碼構建相關的配置在scripts目錄下

構建過程

scripts/build.js

構建的入口文件：這個文件的代碼是先從配置文件讀取配置，再通過命令行參數對構建配置進行過濾，這樣可以構建出不同的用途的vue.js（用在web端端vue.js，運行在weex端的vue.js等等不同的版本）。

scripts/config.js

這個文件是有關vue.js 構建的配置

Runtime Only 版本和 Runtime+compiler版本比較

1. Runtime Only版的vue.js運行時，需要藉助webpack的vue-loader工具把.vue文件編譯成JavaScript，因爲這是在編譯階段做的，所以它只包含運行時的vue.js代碼，因此代碼體積比較輕量

2. Runtime + Compiler，我們如果沒有對代碼做編譯，但是又使用了Vue的template屬性並傳入一個字符串，需要在客戶端編譯模版

// 需要編譯器的版本
new Vue({
  template: '<div>{{ hi }}</div>'
})

// 這種情況不需要
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

因爲在 Vue.js 2.0 中，最終渲染都是通過 render 函數，如果寫 template 屬性，則需要編譯成 render 函數，那麼這個編譯過程會發生運行時，所以需要帶有編譯器的版本。

很顯然，這個編譯過程對性能會有一定損耗，所以通常我們更推薦使用 Runtime-Only 的 Vue.js。