Vue生產環境部署

前面的話

　　開發時，Vue 會提供很多警告來幫助解決常見的錯誤與陷阱。生產時，這些警告語句卻沒有用，反而會增加載荷量。再次，有些警告檢查有小的運行時開銷，生產環境模式下是可以避免的。本文將詳細介紹Vue生產環境部署

 

生產環境

　　如果用 Vue 完整獨立版本 (直接用 <script> 元素引入 Vue)，生產時應該用精簡版本 (vue.min.js)

　　如果用 Webpack 或 Browserify 類似的打包工具時，生產狀態會在 Vue 源碼中由 process.env.NODE_ENV 決定，默認在開發狀態。Webpack 與 Browserify 兩個打包工具都提供方法來覆蓋此變量並使用生產狀態，警告語句也會被精簡掉。每一個 vue-cli 模板有預先配置好的打包工具，但了解怎樣配置會更好

【webpack】

　　使用 Webpack 的 DefinePlugin 來指定生產環境，以便在壓縮時可以讓 UglifyJS 自動刪除代碼塊內的警告語句

var webpack = require('webpack')
module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
}

【Browserify】

　　運行打包命令，設置 NODE_ENV 為 "production"。等於告訴 vueify 避免引入熱重載和開發相關代碼

　　使用一個全局 envify 轉換 bundle 文件。這可以精簡掉包含在 Vue 源碼中所有環境變量條件相關代碼塊內的警告語句

NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js

【Rollup】

　　使用 rollup-plugin-replace：

const replace = require('rollup-plugin-replace')
rollup({
  // ...
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify( 'production' )
    })
  ]
}).then(...)

 

預編譯模板

　　當需要處理 DOM 內或 JavaScript 內的模板時，“從模板到渲染函數”的編譯就會在線上發生。通常情況下這種處理是足夠快的，但是如果應用對性能很敏感最好還是回避。

　　預編譯模板最簡單的方式就是使用單文件組件 - 相關的構建設置會自動把預編譯處理好，所以構建好的代碼已經包含了編譯出來的渲染函數而不是原始的模板字符串。

　　如果使用 Webpack，並且喜歡分離 JavaScript 和模板文件，可以使用 vue-template-loader，它也可以在構建過程中把模板文件轉換成為 JavaScript 渲染函數

 

提取組件的CSS

　　當使用單文件組件時，組件內的 CSS 會以 <style> 標簽的方式通過 JavaScript 動態注入。這有一些小小的運行時開銷，如果使用服務端渲染，這會導致一段“無樣式的內容瞬間 (fouc)”。橫跨所有組件提取 CSS 到同一個文件回避這件事情，這也會更好的壓縮和緩存 CSS

 

跟蹤運行時錯誤

　　如果在組件渲染時出現運行錯誤，錯誤將會被傳遞至全局 Vue.config.errorHandler 配置函數 (如果已設置)。利用這個鈎子函數和錯誤跟蹤服務 (如 Sentry)，可能是個不錯的主意