生產(chǎn)環(huán)境部署
生產(chǎn)環(huán)境部署
以下大多數(shù)內(nèi)容在你使用 Vue CLI 時(shí)都是默認(rèn)開啟的。該章節(jié)僅跟你自定義的構(gòu)建設(shè)置有關(guān)。
目錄
開啟生產(chǎn)環(huán)境模式
開發(fā)環(huán)境下，Vue 會(huì)提供很多警告來(lái)幫你對(duì)付常見的錯(cuò)誤與陷阱。而在生產(chǎn)環(huán)境下，這些警告語(yǔ)句卻沒有用，反而會(huì)增加應(yīng)用的體積。此外，有些警告檢查還有一些小的運(yùn)行時(shí)開銷，這在生產(chǎn)環(huán)境模式下是可以避免的。
不使用構(gòu)建工具
如果用 Vue 完整獨(dú)立版本，即直接用 <script> 元素引入 Vue 而不提前進(jìn)行構(gòu)建，請(qǐng)記得在生產(chǎn)環(huán)境下使用壓縮后的版本 (vue.min.js)。兩種版本都可以在安裝指導(dǎo)中找到。
使用構(gòu)建工具
當(dāng)使用 webpack 或 Browserify 類似的構(gòu)建工具時(shí)，Vue 源碼會(huì)根據(jù) process.env.NODE_ENV 決定是否啟用生產(chǎn)環(huán)境模式，默認(rèn)情況為開發(fā)環(huán)境模式。在 webpack 與 Browserify 中都有方法來(lái)覆蓋此變量，以啟用 Vue 的生產(chǎn)環(huán)境模式，同時(shí)在構(gòu)建過程中警告語(yǔ)句也會(huì)被壓縮工具去除。所有這些在 vue-cli 模板中都預(yù)先配置好了，但了解一下怎樣配置會(huì)更好。
webpack
在 webpack 4+ 中，你可以使用 mode 選項(xiàng)：
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
在運(yùn)行打包命令時(shí)將
NODE_ENV設(shè)置為"production"。這等于告訴vueify避免引入熱重載和開發(fā)相關(guān)的代碼。對(duì)打包后的文件進(jìn)行一次全局的 envify 轉(zhuǎn)換。這使得壓縮工具能清除掉 Vue 源碼中所有用環(huán)境變量條件包裹起來(lái)的警告語(yǔ)句。例如：
NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js
或者在 Gulp 中使用 envify：
// 使用 envify 的自定義模塊來(lái)定制環(huán)境變量var envify = require('envify/custom')
browserify(browserifyOptions)
.transform(vueify)
.transform( // 必填項(xiàng)，以處理 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ù)用來(lái)調(diào)整 grunt-browserify 的默認(rèn)指令
configure: b => b
.transform('vueify')
.transform(
// 用來(lái)處理 `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ù)編譯
當(dāng)使用 DOM 內(nèi)模板或 JavaScript 內(nèi)的字符串模板時(shí)，模板會(huì)在運(yùn)行時(shí)被編譯為渲染函數(shù)。通常情況下這個(gè)過程已經(jīng)足夠快了，但對(duì)性能敏感的應(yīng)用還是最好避免這種用法。
預(yù)編譯模板最簡(jiǎn)單的方式就是使用單文件組件——相關(guān)的構(gòu)建設(shè)置會(huì)自動(dòng)把預(yù)編譯處理好，所以構(gòu)建好的代碼已經(jīng)包含了編譯出來(lái)的渲染函數(shù)而不是原始的模板字符串。
如果你使用 webpack，并且喜歡分離 JavaScript 和模板文件，你可以使用 vue-template-loader，它也可以在構(gòu)建過程中把模板文件轉(zhuǎn)換成為 JavaScript 渲染函數(shù)。
提取組件的 CSS
當(dāng)使用單文件組件時(shí)，組件內(nèi)的 CSS 會(huì)以 <style> 標(biāo)簽的方式通過 JavaScript 動(dòng)態(tài)注入。這有一些小小的運(yùn)行時(shí)開銷，如果你使用服務(wù)端渲染，這會(huì)導(dǎo)致一段“無(wú)樣式內(nèi)容閃爍 (fouc)”。將所有組件的 CSS 提取到同一個(gè)文件可以避免這個(gè)問題，也會(huì)讓 CSS 更好地進(jìn)行壓縮和緩存。
查閱這個(gè)構(gòu)建工具各自的文檔來(lái)了解更多：
webpack + vue-loader (
vue-cli的 webpack 模板已經(jīng)預(yù)先配置好)
跟蹤運(yùn)行時(shí)錯(cuò)誤
如果在組件渲染時(shí)出現(xiàn)運(yùn)行錯(cuò)誤，錯(cuò)誤將會(huì)被傳遞至全局 Vue.config.errorHandler 配置函數(shù) (如果已設(shè)置)。利用這個(gè)鉤子函數(shù)來(lái)配合錯(cuò)誤跟蹤服務(wù)是個(gè)不錯(cuò)的主意。比如 Sentry，它為 Vue 提供了官方集成。