生产环境部署
开发环境下，Vue 会提供很多警告来帮你对付常见的错误与陷阱。而在生产环境下，这些警告语句却没有用，反而会增加应用的体积。此外，有些警告检查还有一些小的运行时开销，这在生产环境模式下是可以避免的。
不使用构建工具
如果用 Vue 完整独立版本，即直接用 <script> 元素引入 Vue 而不提前进行构建，请记得在生产环境下使用压缩后的版本 (vue.min.js)。两种版本都可以在安装指导中找到。
使用构建工具
当使用 webpack 或 Browserify 类似的构建工具时，Vue 源码会根据 process.env.NODE_ENV 决定是否启用生产环境模式，默认情况为开发环境模式。在 webpack 与 Browserify 中都有方法来覆盖此变量，以启用 Vue 的生产环境模式，同时在构建过程中警告语句也会被压缩工具去除。这些所有 vue-cli 模板中都预先配置好了，但了解一下怎样配置会更好。
webpack
在 webpack 4+ 中，你可以使用 mode 选项：
module.exports = {
mode: 'production'
}
模板预编译
当使用dom内的模板和js中的字符串模板时，模板会在运行时被编译成渲染函数，通常情况下这个过程已经足够快了。但是对性能敏感的应用还是避免这种用法。
预编译模板最简单的方式就是使用单文件组件——相关的构建设置会自动把预编译处理好，所以构建好的代码已经包含了编译出来的渲染函数而不是原始的模板字符串。
如果你使用 webpack，并且喜欢分离 JavaScript 和模板文件，你可以使用 vue-template-loader，它也可以在构建过程中把模板文件转换成为 JavaScript 渲染函数。
提取组件的css
当使用单文件组件时，组件的css会以 style标签的形式通过js动态注入，这有一点小小的运行性能开销，如果你使用服务端渲染，这会导致一段无样式的内容闪烁，所有组件的css提取到同一个文件可以避免这种问题，也会让css更好的进行压缩和缓存。
跟踪运行时的错误
如果在组件渲染时出现运行错误，错误将会被传递至全局 Vue.config.errorHandler 配置函数 (如果已设置)。利用这个钩子函数来配合错误跟踪服务是个不错的主意。比如 Sentry，它为 Vue 提供了官方集成。
网友评论