Vue | 28 工具 - 產品部署

主要內容：

1. 打開生產模式的幾種配置方式
2. 預編譯模板
3. 提取組件CSS的方式
4. 追蹤運行時錯誤

如果你使用Vue CLI以下大部分建議是默認可用的。如果你使用的是自定義的構建設置時，這章纔是相關的。

打開生產模式

在開發階段，Vue對於常見的錯誤和陷阱提供了許多警告來提醒你。然而，這些警告在生產環境變得沒有用了，並且增加了app的尺寸。另外，這些警告檢查所產生的時間花費也是應該在生產環境避免的。

沒有構建工具

如果你正在使用完整的構建，例如：通過script標籤直接導入Vue而沒有使用構建工具，確保使用小版本（vue.min.js）在生產環境。兩個版本都可以在安裝指南(英)找到。

使用構建工具

當使用像Webpack或Browserify這樣的構建工具時，生產模式由Vue的源碼內的process.env.NODE_ENV決定，它默認開發模式。構建工具提供了複寫這個變量的方式來啓動Vue的生產模式，警告通過minifiers構建期間將被去掉。所有的vue-cli模板都爲你提供了預配置，但知道他們如何工作對你是有好處的：

Webpack
在Webpack 4+以上的版本，你可以使用mode操作項：

module.exprots = {
	mode: 'production'
}

但是在Webpack 3 以及之前的版本，你需要使用DefinePlugin：

var webpack = require('webpack')

module.exports = {
	// ...
	plugins: [
		// ...
		new wepack.DefinePlugin({
			'process.env.NODE_EVN': JSON.stringify('production')
		})
	]
}

Browserify

• 使用實際的NODE_ENV環境變量運行構建命令設置**“productions”**。這會告訴vueify去避免包含熱重載和開發環境相關的代碼。
• 應用一個envify轉化你的包。這允許minifier去掉封裝在Vue源碼的環境變量條件模塊的所有警告。例如：

NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js

• 或，在Gulp中使用envify：

// 使用envify自定義模塊去指定環境變量
var envify = require('envify/custom')

browserify(browserifyOptions)
	.transform(vueify)
	.transform(
		// 爲了處理node_modules 文件所必須的
		{ global: true},
		envify({ NODE_ENV: 'production' })
	)
	.bundle()

• 或，配合 Grunt 和 grunt-browserify使用envify ：

// 使用envify自定義模塊去指定環境變量
var envify = require('envify/custom')

browserify: {
	dist: {
		options: {
			// 函數的作用是從grunt-browserify的默認順序偏離
			configure: b => b
				.transform('vueify')
				.transform(
					// 爲了處理node_modules文件所必須
					{ global: true },
					envify({NODE_ENV: 'production'})
				)	
				.bundle()
		}
	}
}

rollup
使用rollup-plugin-replace：

const replace = require('rollup-plugin-replace')

rollup()({
	// ...
	plugins: [
		replace({
			'process.env.NODE_ENV': JSON.stringify('production')
			})	
	]
}).then(...)

預編輯模板

當使用in-DOM模板或in-JavaScript模板字符串，模板到渲染函數的編譯是動態執行的。這在大多數情況下會非常快，但如果程序對性能敏感最好避免使用。

對於預編譯模板最容易的方式是使用單文件組件 -爲你關聯構建設置自動執行預編譯，因此構建的代碼包含已經編譯的渲染函數而不是原生模板字符串。

如果你使用Webpack，和喜歡分離JavaScript和模板文件，你可以使用vue-template-loader，它可以在構建期間轉化模板爲JavaScript渲染函數。

提取組件的CSS

當使用單文件組件的時候，組件內的CSS是作爲<style>標籤經過JavaScript被動態注入的。這會有點運行時消耗，如果你使用服務器渲染將引起一個"flash of unstyled content"。將跨所有組件的CSS提取到相同的文件將避免這個問題，也會帶來更好的CSS縮小和緩存。

請參閱各自的構建工具文檔去了解如何實現：

• Webpack + vue-loader(vue-cliwebpack模板有這個預配置)
• Browserify + vueify
• Rollup + rollup-plugin-vue

追蹤運行時錯誤

如果在一個組件渲染期間發生了運行時錯誤，如果已經設置過，它將傳遞給全局的Vue.config.errorHandler配置函數。將此掛鉤和追蹤錯誤的服務如Sentry相結合可能是一個好主意。也爲Vue提供了官方集成。