技术文章 | vue工具帮你解决常见的错误与陷阱

本文来源于阿里云-云栖社区，原文点击这里。

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

不用打包工具

如果用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
      }
    })
  ]
}

Browserify

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

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

Rollup

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渲染函数。

 展开全文