生產(chǎn)環(huán)境部署

開發(fā)環(huán)境下，Vue 會提供很多警告來幫你對付常見的錯誤與陷阱。而在生產(chǎn)環(huán)境下，這些警告語句卻沒有用，反而會增加應(yīng)用的體積。此外，有些警告檢查還有一些小的運行時開銷，這在生產(chǎn)環(huán)境模式下是可以避免的。

不使用構(gòu)建工具

如果用 Vue 完整獨立版本，即直接用 <script> 元素引入 Vue 而不提前進行構(gòu)建，請記得在生產(chǎn)環(huán)境下使用壓縮后的版本 (vue.min.js)。兩種版本都可以在安裝指導(dǎo)中找到。

使用構(gòu)建工具

當(dāng)使用 webpack 或 Browserify 類似的構(gòu)建工具時，Vue 源碼會根據(jù) process.env.NODE_ENV 決定是否啟用生產(chǎn)環(huán)境模式，默認(rèn)情況為開發(fā)環(huán)境模式。在 webpack 與 Browserify 中都有方法來覆蓋此變量，以啟用 Vue 的生產(chǎn)環(huán)境模式，同時在構(gòu)建過程中警告語句也會被壓縮工具去除。這些所有 vue-cli 模板中都預(yù)先配置好了，但了解一下怎樣配置會更好。

webpack

在 webpack 4+ 中，你可以使用 mode 選項：

module.exports = {
  mode: 'production'
}

模板預(yù)編譯

當(dāng)使用dom內(nèi)的模板和js中的字符串模板時，模板會在運行時被編譯成渲染函數(shù)，通常情況下這個過程已經(jīng)足夠快了。但是對性能敏感的應(yīng)用還是避免這種用法。
預(yù)編譯模板最簡單的方式就是使用單文件組件——相關(guān)的構(gòu)建設(shè)置會自動把預(yù)編譯處理好，所以構(gòu)建好的代碼已經(jīng)包含了編譯出來的渲染函數(shù)而不是原始的模板字符串。

如果你使用 webpack，并且喜歡分離 JavaScript 和模板文件，你可以使用 vue-template-loader，它也可以在構(gòu)建過程中把模板文件轉(zhuǎn)換成為 JavaScript 渲染函數(shù)。

提取組件的css

當(dāng)使用單文件組件時，組件的css會以 style標(biāo)簽的形式通過js動態(tài)注入，這有一點小小的運行性能開銷，如果你使用服務(wù)端渲染，這會導(dǎo)致一段無樣式的內(nèi)容閃爍，所有組件的css提取到同一個文件可以避免這種問題，也會讓css更好的進行壓縮和緩存。

跟蹤運行時的錯誤

如果在組件渲染時出現(xiàn)運行錯誤，錯誤將會被傳遞至全局 Vue.config.errorHandler 配置函數(shù) (如果已設(shè)置)。利用這個鉤子函數(shù)來配合錯誤跟蹤服務(wù)是個不錯的主意。比如 Sentry，它為 Vue 提供了官方集成。