前面的話(huà)

開(kāi)發(fā)時(shí)，Vue 會(huì)提供很多警告來(lái)幫助解決常見(jiàn)的錯(cuò)誤與陷阱。生產(chǎn)時(shí)，這些警告語(yǔ)句卻沒(méi)有用，反而會(huì)增加載荷量。再次，有些警告檢查有小的運(yùn)行時(shí)開(kāi)銷(xiāo)，生產(chǎn)環(huán)境模式下是可以避免的。本文將詳細(xì)介紹Vue生產(chǎn)環(huán)境部署

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

如果用 Vue 完整獨(dú)立版本 (直接用 <script> 元素引入 Vue)，生產(chǎn)時(shí)應(yīng)該用精簡(jiǎn)版本 (vue.min.js)

如果用 Webpack 或 Browserify 類(lèi)似的打包工具時(shí)，生產(chǎn)狀態(tài)會(huì)在 Vue 源碼中由 process.env.NODE_ENV 決定，默認(rèn)在開(kāi)發(fā)狀態(tài)。Webpack 與 Browserify 兩個(gè)打包工具都提供方法來(lái)覆蓋此變量并使用生產(chǎn)狀態(tài)，警告語(yǔ)句也會(huì)被精簡(jiǎn)掉。每一個(gè) vue-cli 模板有預(yù)先配置好的打包工具，但了解怎樣配置會(huì)更好

【webpack】

使用 Webpack 的 DefinePlugin 來(lái)指定生產(chǎn)環(huán)境，以便在壓縮時(shí)可以讓 UglifyJS 自動(dòng)刪除代碼塊內(nèi)的警告語(yǔ)句

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

【Browserify】

運(yùn)行打包命令，設(shè)置 NODE_ENV 為 "production"。等于告訴 vueify 避免引入熱重載和開(kāi)發(fā)相關(guān)代碼

使用一個(gè)全局 envify 轉(zhuǎn)換 bundle 文件。這可以精簡(jiǎn)掉包含在 Vue 源碼中所有環(huán)境變量條件相關(guān)代碼塊內(nèi)的警告語(yǔ)句

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(...)

預(yù)編譯模板

當(dāng)需要處理 DOM 內(nèi)或 JavaScript 內(nèi)的模板時(shí)，“從模板到渲染函數(shù)”的編譯就會(huì)在線(xiàn)上發(fā)生。通常情況下這種處理是足夠快的，但是如果應(yīng)用對(duì)性能很敏感最好還是回避。

預(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)建過(guò)程中把模板文件轉(zhuǎn)換成為 JavaScript 渲染函數(shù)

提取組件的CSS

當(dāng)使用單文件組件時(shí)，組件內(nèi)的 CSS 會(huì)以 <style> 標(biāo)簽的方式通過(guò) JavaScript 動(dòng)態(tài)注入。這有一些小小的運(yùn)行時(shí)開(kāi)銷(xiāo)，如果使用服務(wù)端渲染，這會(huì)導(dǎo)致一段“無(wú)樣式的內(nèi)容瞬間 (fouc)”。橫跨所有組件提取 CSS 到同一個(gè)文件回避這件事情，這也會(huì)更好的壓縮和緩存 CSS

跟蹤運(yùn)行時(shí)錯(cuò)誤

如果在組件渲染時(shí)出現(xiàn)運(yùn)行錯(cuò)誤，錯(cuò)誤將會(huì)被傳遞至全局 Vue.config.errorHandler 配置函數(shù) (如果已設(shè)置)。利用這個(gè)鉤子函數(shù)和錯(cuò)誤跟蹤服務(wù) (如 Sentry)，可能是個(gè)不錯(cuò)的主意

以上這篇基于Vue生產(chǎn)環(huán)境部署就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論