Vue生产环境部署

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

生产环境

  如果用 Vue 完整独立版本 (直接用 <script> 元素引入 Vue),生产时应该用精简版本 (vue.min.js)。
  如果用 Webpack 或 Browserify 类似的打包工具时,生产状态会在 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: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
}

预编译模板

  当需要处理 DOM 内或 JavaScript 内的模板时,“从模板到渲染函数”的编译就会在线上发生。通常情况下这种处理是足够快的,但是如果应用对性能很敏感最好还是回避。
  预编译模板最简单的方式就是使用单文件组件 - 相关的构建设置会自动把预编译处理好,所以构建好的代码已经包含了编译出来的渲染函数而不是原始的模板字符串。
  如果使用 Webpack,并且喜欢分离 JavaScript 和模板文件,可以使用 vue-template-loader,它也可以在构建过程中把模板文件转换成为 JavaScript 渲染函数。

提取组件的CSS

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

跟踪运行时错误

  如果在组件渲染时出现运行错误,错误将会被传递至全局 Vue.config.errorHandler 配置函数 (如果已设置),利用这个钩子函数和错误跟踪服务 (如 Sentry),可能是个不错的主意。

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 3,448评论 0 30
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 865评论 0 6
  • 此文基于官方文档,里面部分例子有改动,加上了一些自己的理解 什么是组件? 组件(Component)是 Vue.j...
    陆志均阅读 2,418评论 5 15
  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 4,767评论 0 25
  • Vue对比其他框架 这个页面无疑是最难编写的,但我们认为它也是非常重要的。或许你曾遇到了一些问题并且已经用其他的框...
    伊滴墨阅读 1,282评论 0 15