生產(chǎn)環(huán)境部署
生產(chǎn)環(huán)境部署
以下大多數(shù)內(nèi)容在你使用 Vue CLI 時都是默認開啟的。該章節(jié)僅跟你自定義的構(gòu)建設(shè)置有關(guān)。
目錄
開啟生產(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)建工具
當使用 webpack 或 Browserify 類似的構(gòu)建工具時，Vue 源碼會根據(jù) process.env.NODE_ENV 決定是否啟用生產(chǎn)環(huán)境模式，默認情況為開發(fā)環(huán)境模式。在 webpack 與 Browserify 中都有方法來覆蓋此變量，以啟用 Vue 的生產(chǎn)環(huán)境模式，同時在構(gòu)建過程中警告語句也會被壓縮工具去除。所有這些在 vue-cli 模板中都預(yù)先配置好了，但了解一下怎樣配置會更好。
webpack
在 webpack 4+ 中，你可以使用 mode 選項：
module.exports = {
mode: 'production'
}但是在 webpack 3 及其更低版本中，你需要使用 DefinePlugin：
var webpack = require('webpack')
module.exports = {
// ...
plugins: [
// ...
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
}Browserify
在運行打包命令時將
NODE_ENV設(shè)置為"production"。這等于告訴vueify避免引入熱重載和開發(fā)相關(guān)的代碼。對打包后的文件進行一次全局的 envify 轉(zhuǎn)換。這使得壓縮工具能清除掉 Vue 源碼中所有用環(huán)境變量條件包裹起來的警告語句。例如：
NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js
或者在 Gulp 中使用 envify：
// 使用 envify 的自定義模塊來定制環(huán)境變量var envify = require('envify/custom')
browserify(browserifyOptions)
.transform(vueify)
.transform( // 必填項，以處理 node_modules 里的文件
{ global: true },
envify({ NODE_ENV: 'production' })
)
.bundle()或者配合 Grunt 和 grunt-browserify 使用 envify：
// 使用 envify 自定義模塊指定環(huán)境變量var envify = require('envify/custom')
browserify: { dist: { options: {
// 該函數(shù)用來調(diào)整 grunt-browserify 的默認指令
configure: b => b
.transform('vueify')
.transform(
// 用來處理 `node_modules` 文件
{ global: true },
envify({ NODE_ENV: 'production' })
)
.bundle()
}
}
}Rollup
const replace = require('rollup-plugin-replace')
rollup({ // ...
plugins: [
replace({ 'process.env.NODE_ENV': JSON.stringify( 'production' )
})
]
}).then(...)模板預(yù)編譯
當使用 DOM 內(nèi)模板或 JavaScript 內(nèi)的字符串模板時，模板會在運行時被編譯為渲染函數(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
當使用單文件組件時，組件內(nèi)的 CSS 會以 <style> 標簽的方式通過 JavaScript 動態(tài)注入。這有一些小小的運行時開銷，如果你使用服務(wù)端渲染，這會導(dǎo)致一段“無樣式內(nèi)容閃爍 (fouc)”。將所有組件的 CSS 提取到同一個文件可以避免這個問題，也會讓 CSS 更好地進行壓縮和緩存。
查閱這個構(gòu)建工具各自的文檔來了解更多：
webpack + vue-loader (
vue-cli的 webpack 模板已經(jīng)預(yù)先配置好)
跟蹤運行時錯誤
如果在組件渲染時出現(xiàn)運行錯誤，錯誤將會被傳遞至全局 Vue.config.errorHandler 配置函數(shù) (如果已設(shè)置)。利用這個鉤子函數(shù)來配合錯誤跟蹤服務(wù)是個不錯的主意。比如 Sentry，它為 Vue 提供了官方集成。