Vue基础:响应式

最近换了东家,比较忙、比较累,但博客的更新速度不能明显下降。Fighting!

写在前面

Vue不是框架(前端框架往往需要解决路由、试图管理、数据持久化等流程),Vue只关注视图层。

webpack构建Vue项目

使用webpack构建Vue项目,在配置文件中会看到如下代码:

module.exports = {
  // ...
  resolve: {
    alias: {
      // 使用完整版构建,而非运行时构建版本
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}
  • 完整版:同时包含编译器和运行时的构建。
  • 编译器:用来将模板字符串编译成为 JavaScript 渲染函数的代码。
  • 运行时:用来创建 Vue 实例,渲染并处理 virtual DOM 等行为的代码。基本上就是除去编译器的其他一切。
// 需要编译器
new Vue({
  template: '
{{ hi }}
'
}) // 不需要编译器 new Vue({ render (h) { return h('div', this.hi) } })

所以,项目中往往我们需要采用完整版,而非运行时构建版本!

压缩Vue

npm安装的Vue,并不是压缩后的版本。然而,CommonJS 和 ES Module 构建同时保留原始的 process.env.NODE_ENV 检测,以决定它们应该运行在什么模式下。可以通过控制该环境变量,对Vue进行压缩,以减少最终文件的大小。

var webpack = require('webpack')
module.exports = {
  // ...
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    })
  ]
}
  • UMD:UMD 构建可以直接通过

你可能感兴趣的:(Vue)