## 開啟生產環境模式 開發環境下，Vue 會提供很多警告來幫你對付常見的錯誤與陷阱。而在生產環境下，這些警告語句卻沒有用，反而會增加應用的體積。此外，有些警告檢查還有一些小的運行時開銷，這在生產環境模式下是可以避免的。 ### 不使用構建工具 如果用 Vue 完整獨立版本，即直接用 `<script>` 元素引入 Vue 而不提前進行構建，請記得在生產環境下使用壓縮后的版本 (`vue.min.js`)。兩種版本都可以在[安裝指導](installation.html#直接用-lt-script-gt-引入)中找到。 ### 使用構建工具 當使用 webpack 或 Browserify 類似的構建工具時，Vue 源碼會根據 `process.env.NODE_ENV` 決定是否啟用生產環境模式，默認情況為開發環境模式。在 webpack 與 Browserify 中都有方法來覆蓋此變量，以啟用 Vue 的生產環境模式，同時在構建過程中警告語句也會被壓縮工具去除。這些所有 `vue-cli` 模板中都預先配置好了，但了解一下怎樣配置會更好。 #### webpack 在 webpack 4+ 中，你可以使用 `mode` 選項： ``` js module.exports = { mode: 'production' } ``` 但是在 webpack 3 及其更低版本中，你需要使用 [DefinePlugin](https://webpack.js.org/plugins/define-plugin/)： ``` js var webpack = require('webpack') module.exports = { // ... plugins: [ // ... new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }) ] } ``` #### Browserify - 在運行打包命令時將 `NODE_ENV` 設置為 `"production"`。這等于告訴 `vueify` 避免引入熱重載和開發相關的代碼。 - 對打包后的文件進行一次全局的 [envify](https://github.com/hughsk/envify) 轉換。這使得壓縮工具能清除掉 Vue 源碼中所有用環境變量條件包裹起來的警告語句。例如： ``` bash NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js ``` - 或者在 Gulp 中使用 [envify](https://github.com/hughsk/envify)： ``` js // 使用 envify 的自定義模塊來定制環境變量 var envify = require('envify/custom') browserify(browserifyOptions) .transform(vueify) .transform( // 必填項，以處理 node_modules 里的文件 { global: true }, envify({ NODE_ENV: 'production' }) ) .bundle() ``` - 或者配合 Grunt 和 [grunt-browserify](https://github.com/jmreidy/grunt-browserify) 使用 [envify](https://github.com/hughsk/envify)： ``` js // 使用 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](https://github.com/rollup/rollup-plugin-replace)： ``` js const replace = require('rollup-plugin-replace') rollup({ // ... plugins: [ replace({ 'process.env.NODE_ENV': JSON.stringify( 'production' ) }) ] }).then(...) ``` ## 模板預編譯 當使用 DOM 內模板或 JavaScript 內的字符串模板時，模板會在運行時被編譯為渲染函數。通常情況下這個過程已經足夠快了，但對性能敏感的應用還是最好避免這種用法。 預編譯模板最簡單的方式就是使用[單文件組件](./single-file-components.html)——相關的構建設置會自動把預編譯處理好，所以構建好的代碼已經包含了編譯出來的渲染函數而不是原始的模板字符串。 如果你使用 webpack，并且喜歡分離 JavaScript 和模板文件，你可以使用 [vue-template-loader](https://github.com/ktsn/vue-template-loader)，它也可以在構建過程中把模板文件轉換成為 JavaScript 渲染函數。 ## 提取組件的 CSS 當使用單文件組件時，組件內的 CSS 會以 `<style>` 標簽的方式通過 JavaScript 動態注入。這有一些小小的運行時開銷，如果你使用服務端渲染，這會導致一段“無樣式內容閃爍 (fouc)”。將所有組件的 CSS 提取到同一個文件可以避免這個問題，也會讓 CSS 更好地進行壓縮和緩存。 查閱這個構建工具各自的文檔來了解更多： - [webpack + vue-loader](https://vue-loader.vuejs.org/zh-cn/configurations/extract-css.html) (`vue-cli` 的 webpack 模板已經預先配置好) - [Browserify + vueify](https://github.com/vuejs/vueify#css-extraction) - [Rollup + rollup-plugin-vue](https://vuejs.github.io/rollup-plugin-vue/#/en/2.3/?id=custom-handler) ## 跟蹤運行時錯誤 如果在組件渲染時出現運行錯誤，錯誤將會被傳遞至全局 `Vue.config.errorHandler` 配置函數 (如果已設置)。利用這個鉤子函數來配合錯誤跟蹤服務是個不錯的主意。比如 [Sentry](https://sentry.io)，它為 Vue 提供了[官方集成](https://sentry.io/for/vue/)。