Vue 生产环境部署

生产环境部署提示

开启生产环境模式

开发时，vue会提供很多警告来帮你解决常见的错误与陷阱。生产时，这些警告却没有用，反而增加你的载荷量。再次，有些警告检查有小的运行时开销，生产环境模式下，是可以避免的。

不用打包工具

如果用vue完整独立版本，（直接用<script>元素引入vue），生产时应该用精简版本vue.min.js。

用打包工具

如果用webpack或browerify类似的打包工具时，生产状态会在vue源码中由process.env.NODE_ENV决定，默认在开发状态。webpack与Browserify两个打包工具都提供方法来覆盖此变量并使用生产状态，警告语句也会被精简掉。每一个vue-cli模板有预先配置好的打包工具，但了解怎样配置会更好。

webpack

使用webpack的DefinePlugin来指定生产环境，以便在压缩时可以让UglifyJS自动删除代码块内的警告语句。例如配置：

var webpack = require('webpack')

module.exports = {

plugins:[

new webpack.DefinePlugin({

'process.env':{

NODE_ENV:'"product"'

}

}),

new webpack.optimize.UglifyJsPlugin({

compress:{

warnings:false

}

})

]

}

 

Browseify

• 运行打包命令，设置NODE_ENV为'"product"',等于告诉vueify避免引入热重载和开发相关代码
• 使用一个全局envify转换你的bundle文件，这可以精简掉包含在vue源码中所有环境变量条件相关代码块内的警告语句。例如：

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

Rollup

使用rollup-plugin-replace:

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

rollup({

plugins:[

replace({

'process.env.NODE_ENV':JSON.stringify('production')

})

]

}).then(...)

 

预编译模板

当你需要处理dom内或者JavaScript内的模板时，"从模板到渲染函数"的编译就会在线上发生。通常情况下，这种处理是最够快的。但是如果你的应用对性能很敏感最好还是回避。

预编译模板最简单的方式就是使用单文件组件构建设置会自动把预编译处理好，所以构件好的代码已经包含了编译出来的渲染函数而不是原始的模板字符串。

如果你使用的webpack，并且喜欢分离javascript和模板文件，你可以使用vue-template-loader，它也可以在构建过程中把模板文件转换成为javascript渲染函数

提取CSS

当使用单文件组件时，组件内的css会以<style>标签的方式通过javascript动态注入，这有一些小小的运行时开销，如果你使用服务端渲染，这会导致一段‘无样式的内容瞬间’。横跨所有组件提取css到同一文件回避这件事情，这也会更好的压缩和缓存CSS

跟踪运行时的错误

如果在组件渲染时出现运行错误，错误将会被传递至vue.config.errorHandler配置函数（如果已配置）。利用这个钩子函数和错误跟踪服务（如sentry,它为vue提供官方集成）可能是个不错的主意。