vue2.x学习笔记（二十八）

接着前面的内容：https://www.cnblogs.com/yanggb/p/12682573.html。

生产环境部署

以下大多数内容在你使用vue cli的时候都是默认开启的，仅跟你自定义的构建设置有关。

开启生产环境模式

在开发环境下，vue会提供很多的警告来帮助你对付常见的错误与陷阱。而在生产环境下，这些警告语句却没有用，反而会增加应用的体积。此外，有些警告检查还有一些比较小的运行时开销，而这是在生产环境模式下可以避免的。

不使用构建工具的情况

如果使用vue的完整独立版本，即直接用<script>元素引入vue而不提前进行构建，请记得在生产环境下使用压缩后的版本（vue.min.js）。

使用构建工具的情况

当使用webpack或Browserify类似的构建工具时，vue源码会根据【process.env.NODE_ENV】属性来决定是否启用生产环境模式，默认情况为开发环境模式。在webpack与Browserify中都有方法来覆盖此变量，以启用vue的生产环境模式，同时在构建过程中警告语句也会被压缩工具去除。所有这些在vue-cli模板中都预先配置好了，但是了解以下怎样配置会更好。

在webpack4+中，可以使用mode选项：

module.exports = {
  mode: 'production'
}

但是在webpack3以及更低的版中中，则需要使用DefinePlugin：

var webpack = require('webpack')

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
}

而Browserify或Rollup等其他构建工具也提供了相应的方法，需要时查阅官方文档即可。

模板预编译

当使用dom内模板或javascript内的字符串模板时，模板会在运行时被编译为渲染函数。通常情况下这个过程已经足够快了，但是对性能敏感的应用还是最好避免这种用法。

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

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

提取组件的CSS

当使用单文件组件的时候，组件内的css会以<style>标签的方式通过javascript动态注入。这有一些小小的运行时开销，如果你使用服务器渲染，这会导致一段【无样式内容闪烁（fouc）】。将所有组件的css提取到同一个文件可以就避免这个问题，也会让css更好地进行压缩和缓存。

查阅这个构建工具各自的文档来了解：

1.webpack+vue-loader（vue-cli的webpack模板已经预先配置好）。

2.Browserify+vueify。

3.Rollup+rollup-plugin-vue。

跟踪运行时的错误

如果在组件渲染的时候出现运行时错误，错误将会被传递至全局【Vue.config.errorHandler】配置函数（如果已经设置）。利用这个钩子函数来配合跟踪服务是个不错的主意，比如在函数中打印出具体的错误信息直接定位错误原因。另外可以使用Sentry插件，它为vue提供了官方集成。

"我还是很喜欢你，像雨洒落热带极地，不远万里。"

vue2.x学习笔记（二十八）

猜你喜欢