微信号:imooc-com

介绍:慕课网是一个超酷的互联网、IT技术免费学习平台,创新的网络一站式学习、实践体验;服务及时贴心,内容专业、有趣易学。专注服务互联网工程师快速成为技术高手!

入职第一天:前端leader手把手教我入门Vue服务器端渲染

2018-05-24 20:00 闰土大叔


Vue.js受到越来越多企业的重视,包括BAT在内的很多公司、项目组,都在向Vue.js靠拢。



01


继前段时间西安电面之后顺利拿到了OFFER,今天(5月2号)是我入职第一天,在简短的内部培训了一上午后,前端leader让我先了解下什么是vue的服务器端渲染(SSR)。



SSR,英文全称叫 Server side rendering ,国人叫它服务器端渲染。

首先听到这个名词,我头脑就有点眩晕。咱们还是先去官网了解下SSR的定义:


Vue.js 可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序。这种在服务器和客户端都可以运行的代码程序,也可以叫做“同构”。


我弱弱地问了leader一句,咱们公司为什么要使用服务端渲染?


leader冷冷地回复,有两点原因,第一点,因为我们公司的站点很注重SEO,页面又是异步获取内容;第二点,同时也希望用户更快速地看到完整渲染的页面,从而提高用户体验。基于这两点,所以需要服务器端渲染(SSR)来解决这些问题。


那服务端渲染的流程究竟是怎样的呢?话不多说,先上图:



在使用服务端渲染的时候,首先要有个server端。因为在开发vue项目时,需要起一个webpack-dev-server的服务,端口8000。因为我们要使用它的热更替,这样能加快开发效率。


由于webpack是一个自主的server,我们没有办法在里面添加服务端渲染的代码,而这段代码是需要自己去写的,所以需要再起一个node server,去执行服务端渲染的逻辑。我们会用到vue-server-renderer这个包来帮我们在node.js环境里面去渲染出vue代码生成的HTML代码,这部分代码是直接返回给用户的,用户可以在浏览器里直接看到HTML的内容。


以图为例,我们看到两个渲染的过程,两种server。如果直接访问webpack-dev-server,就跟我们之前开发的过程一样,它是一个纯前端渲染的过程。如果我们要走服务端渲染的流程,就要走node server服务,端口3333以示区别。而且需要打包一个逻辑到node端运行,通过webpack-server-compiler去生成一个server bundle,也就是服务端的app.js。 当node server 获取到server bundle之后,就可以执行vue-server-renderer,去渲染出HTML的代码,直接返回给用户,这样的话就不需要通过js再去渲染出页面内容,减少了用户的等待时间。


今天这篇文章的主要任务是,先用webpack创建一个配置文件来打包server端的代码。


入门第一步,如何编写服务器端渲染的配置文件?


首先我们需要在项目根目录里面找到build文件夹,然后在其下面新建一个webpack.config.server.js文件,具体配置代码,我先撸为敬:


 
           
  1. const path = require('path')

  2. const ExtractPlugin = require('extract-text-webpack-plugin')

  3. const webpack = require('webpack')

  4. const merge = require('webpack-merge')

  5. const baseConfig = require('./webpack.config.base')

  6. const VueServerPlugin = require('vue-server-renderer/server-plugin')

  7. let config

  8. config = merge(baseConfig, {

  9.  target: 'node',

  10.  entry: path.join(__dirname, '../client/server-entry.js'),

  11.  devtool: 'source-map',

  12.  output: {

  13.  libraryTarget: 'commonjs2',

  14.  filename: 'server-entry.js',

  15.  path: path.join(__dirname, '../server-build')

  16.  },

  17.  externals: Object.keys(require('../package.json').dependencies),

  18.  module: {

  19.  rules: [

  20.  {

  21.  test: /\.styl/,

  22.  useExtractPlugin.extract({

  23.  fallback: 'vue-style-loader',

  24.  use: [

  25.  'css-loader',

  26.  {

  27.  loader: 'postcss-loader',

  28.  options: {

  29.  sourceMap: true

  30.  }

  31.  },

  32.  'stylus-loader'

  33.  ]

  34.  })

  35.  }

  36.  ]

  37.  },

  38.  plugins: [

  39.  new ExtractPlugin('styles.[contentHash:8].css'),

  40.  new webpack.DefinePlugin({

  41.  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),

  42.  'process.env.VUE_ENV''"server"'

  43.  }),

  44.  new VueServerPlugin()

  45.  ]

  46. })

  47. module.exports = config


刚接触SSR的童鞋,看完以上代码是不是感觉有点晕?别着急,我来带大家一一分析下。


 
           
  1. target: 'node',


target需要指定为node,因为打包出来的程序是在node端运行的,不是在浏览器端运行,所以要指定打包的目标是node环境。


 
           
  1. entry: path.join(__dirname, '../client/server-entry.js'),


entry需要提供一个单独的入口文件,所以需要在client文件夹下新建一个server-entry.js文件。


 
           
  1. devtool: 'source-map',


devtool需要指定source-map,因为vue-server-renderer有个webpack插件,它能提供代码调试的功能,不过只能提示到出错的文件出在哪一行。


 
           
  1. libraryTarget: 'commonjs2',


指定libraryTarget的类型为commonjs2,用来指定代码export出去的入口的形式。在node.js中模块是module.exports = {...},commonjs2打包出来的代码出口形式就类似于此。


 
           
  1. externals: Object.keys(require('../package.json').dependencies),


externals是外部因素的意思,首先我们可以打开package.json文件看看dependencies


我们用Object.keys()得到的就是一个数组。externals就是告诉webpack不要去打包node_modules里面的js代码。devDependencies里面是一些工具型的东西,在应用真正跑起来的时候是不需要的。只有在执行一些打包,工具化操作的时候才会需要它。


 
           
  1. 'process.env.VUE_ENV''"server"'


这是vue服务端官方建议我们这么去做的,在vue-server-renderer里面可能会用到这个属性。


 
           
  1. const VueServerPlugin = require('vue-server-renderer/server-plugin')


这个插件能帮我们单独地生成一个json文件,用于在vue的服务端渲染里面能帮助我们处理一些很复杂的逻辑。


文章写到这儿,Vue的服务端渲染的入门工作就算完成了(先用webpack创建一个配置文件来打包server端的代码),下一篇文章将介绍如何使用koa这个node服务端框架去实现node server,敬请关注。





推荐学习教程, 点击下方蓝字 ↓


前端小白学习路线




Vue.js:入门到实例项目开发






     

程序员的梦工厂


让更多热爱互联网的同学来慕课网学习

多年以后,圈子里一批技术牛说:

我在慕课网学习过,这就够了


 
慕课网 更多文章 【云栖专题——阿里百川技术分享】后APP时代的破局之路:阿里技术“三大容器五大方案”亮相,百川开放全面升级 做一次真实的开发,一次性拿下jQuery!转需~ 第一门Android实战课火爆上线!丨【新课速递】 学习之道 | 学习不是枯燥的劳作,是精彩的冒险(评论区留言送书啦!) 抽奖 | 双11实战大狂欢,“肾7”、iPad都给你准备好了!
猜您喜欢 干货抢先看 | @Container容器技术大会 俄罗斯方块可以永无止境地玩下去吗? Modern Web 提升网站兼容性从这里开始 - 无插件的浏览体验 Java 8的那些事 谷歌生产环境的软件包管理系统