前面的話

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

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

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

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

【webpack】

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

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

【Browserify】

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

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

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 內(nèi)或 JavaScript 內(nèi)的模板時，“從模板到渲染函數(shù)”的編譯就會在線上發(fā)生。通常情況下這種處理是足夠快的，但是如果應用對性能很敏感最好還是回避。

預編譯模板最簡單的方式就是使用單文件組件 - 相關(guān)的構(gòu)建設置會自動把預編譯處理好，所以構(gòu)建好的代碼已經(jīng)包含了編譯出來的渲染函數(shù)而不是原始的模板字符串。

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

提取組件的CSS

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

跟蹤運行時錯誤

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

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

最新評論