vue server render实践

近期在重构一个后台的项目,前端用的是jquery + bootstrap,说真的,在用react之前,我没有觉得组件化是如此的美妙并且必须。so, 在重构的时候就选择了vue,那么问题来了,为什么不是react。
首先,抛开性能不说,因为React和Vue在大部分常见场景下都能提供近似的性能,并且几乎这点差异可以通过代码的方式弥补。
因为我们这回重构的是一个后台项目,肯定会存在大量的表单元素,而且几乎所有的表单都是要和数据进行双向绑定的,而我们知道react是单向数据流的,但是为了实现假的双向数据绑定,我们可能需要在onChange事件里通过setState对数据进行更新。当然也存在更好的实现方案,那就是通过props传递数据,在input需要更新时,dispatch一个action更新store,实现页面的重新渲染,可以参考redux-form这个库,关于react的表单它应该是一套比较好的实践方案。
虽然说vue的双向数据绑定也是onchange事件的语法糖,但是,它已经封装的很好了,一个v-model足矣。当然选择vue还有一个重要原因,就是在vue2.0之后对ssr有了一套更加成熟的实践方案。关于vue和react更加详细的区别网上有很多资料,请自行查阅,本文主要还是vue ssr实践哈。

为什么要用server render

  1. SEO

  2. 加速首屏渲染

实现

webpack 配置

webpack.base.config.js

module.exports = {
  devtool: isDev ? '#cheap-module-eval-source-map' : false,
  output: {
    path: resolve('../dist'), // 文件的输出路径
    publicPath: '/dist/',  // 静态资源的查找路径
    filename: '[name].[chunkhash].js',
  },
}
    原文作者:wupengyu
    原文地址: https://segmentfault.com/a/1190000009667118
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞