主要内容：
- 打开生产模式的几种配置方式
- 预编译模板
- 提取组件CSS的方式
- 追踪运行时错误
如果你使用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缩小和缓存。
请参阅各自的构建工具文档去了解如何实现：
追踪运行时错误
如果在一个组件渲染期间发生了运行时错误，如果已经设置过，它将传递给全局的Vue.config.errorHandler配置函数。将此挂钩和追踪错误的服务如Sentry相结合可能是一个好主意。也为Vue提供了官方集成。
