精读 Vue 官方文档系列 🎉
开启生产环境模式
与开发环境的区别：
- 代码会被压缩。
- 代码中的警告信息会被移除（性能上更好）。
不使用构建工具
需要使用完整版 vue.js (同时包含编译器与运行时的版本)。
需要自己判断环境差异，生产环境需要使用 vue.min.js 压缩版。
使用构建工具
使用构建工具时，Vue 源码中会基于 process.env.NODE_ENV 环境变量的值，来判断是否启用生产模式，默认为开发模式。
通常在执行不同的命令时，例如 npm run serve 或 npm run build ，Vue CLI 已经预置了这个判断。
如果需要自定义配置，则可以参考：
webpack 4+，直接在为不同环境服务的配置文件中加入mode:"production"进行设置。webpack 3, 则需要借助DefinePlugin插件进行配置。
模板编译
纯 JavaScript 驱动的方式，会在浏览器端调用“编译器”来对字符串形式的模板进行编译，获得渲染函数，然后再执行运行时代码，创建虚拟 DOM，渲染页面内容。
单文件组件 (SFC) 结合构建工具进行模板的预编译方式，会提前将模板编译成渲染函数。这样，浏览器端只需要执行运行时代码，创建虚拟 DOM 进行渲染即可。
对比来看，中大型的应用或者为了追求更好的性能，推荐选择预编译模板的方式。
如果需要使用构建工具单独编译模板，而不是一个单文件组件，则可以使用
vue-template-loader这个 loader。
提取组件的 CSS
当使用单文件组件时，组件内的 CSS 会以 <style> 标签的方式通过 JavaScript 动态注入。这有一些小小的运行时开销，如果你使用服务端渲染，这会导致一段“无样式内容闪烁 (fouc)”。将所有组件的 CSS 提取到同一个文件可以避免这个问题，也会让 CSS 更好地进行压缩和缓存。
除此之外，主题的切换也可能需要预先将不同主题的样式分别提取到对应的主题样式文件中，以用于全局覆盖。
跟踪运行时错误
可以通过 Vue.config.errorHandler 这个全局钩子函数来捕获组件渲染时出现的运行错误。
还记得“测试”一节中我们提到比较均衡性的端到端方案是 Cypress + Sentry 的组合，因此这里，我们就可以将其与错误跟踪服务搭配使用。
Sentry 官方也提供了与 Vue 的集成。
