生產環境部署提示
開啟生產環境模式
開發時，vue會提供很多警告來幫你解決常見的錯誤與陷阱。生產時，這些警告卻沒有用，反而增加你的載荷量。再次，有些警告檢查有小的運行時開銷，生產環境模式下，是可以避免的。
不用打包工具
如果用vue完整獨立版本，（直接用<script>元素引入vue），生產時應該用精簡版本vue.min.js。
用打包工具
如果用webpack或browerify類似的打包工具時，生產狀態會在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:'"product"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress:{
warnings:false
}
})
]
}
Browseify
- 運行打包命令，設置NODE_ENV為'"product"',等於告訴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動態注入，這有一些小小的運行時開銷，如果你使用服務端渲染，這會導致一段‘無樣式的內容瞬間’。橫跨所有組件提取css到同一文件回避這件事情，這也會更好的壓縮和緩存CSS
跟蹤運行時的錯誤
如果在組件渲染時出現運行錯誤，錯誤將會被傳遞至vue.config.errorHandler配置函數（如果已配置）。利用這個鈎子函數和錯誤跟蹤服務（如sentry,它為vue提供官方集成）可能是個不錯的主意。