入職第一天：前端leader手把手教我入門Vue服務器端渲染（SSR）

繼前段時間西安電面以後順利拿到了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文件，具體配置代碼，我先擼爲敬：

const path = require('path')
const ExtractPlugin = require('extract-text-webpack-plugin')
const webpack = require('webpack')
const merge = require('webpack-merge')
const baseConfig = require('./webpack.config.base')
const VueServerPlugin = require('vue-server-renderer/server-plugin')

let config

config = merge(baseConfig, {
  target: 'node',
  entry: path.join(__dirname, '../client/server-entry.js'),
  devtool: 'source-map',
  output: {
    libraryTarget: 'commonjs2',
    filename: 'server-entry.js',
    path: path.join(__dirname, '../server-build')
  },
  externals: Object.keys(require('../package.json').dependencies),
  module: {
    rules: [
      {
        test: /\.styl/,
        use: ExtractPlugin.extract({
          fallback: 'vue-style-loader',
          use: [
            'css-loader',
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: true
              }
            },
            'stylus-loader'
          ]
        })
      }
    ]
  },
  plugins: [
    new ExtractPlugin('styles.[contentHash:8].css'),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
      'process.env.VUE_ENV': '"server"'
    }),
    new VueServerPlugin()
  ]
})

module.exports = config

複製代碼

剛接觸SSR的童鞋，看完以上代碼是否是感受有點暈？彆着急，我來帶你們一一分析下。

target: 'node',
複製代碼

target須要指定爲node，由於打包出來的程序是在node端運行的，不是在瀏覽器端運行，因此要指定打包的目標是node環境。

entry: path.join(__dirname, '../client/server-entry.js'),
複製代碼

entry須要提供一個單獨的入口文件，因此須要在client文件夾下新建一個server-entry.js文件。

devtool: 'source-map',
複製代碼

devtool須要指定source-map，由於vue-server-renderer有個webpack插件，它能提供代碼調試的功能，不過只能提示到出錯的文件出在哪一行。

libraryTarget: 'commonjs2',
複製代碼

指定libraryTarget的類型爲commonjs2，用來指定代碼export出去的入口的形式。在node.js中模塊是module.exports = {...}，commonjs2打包出來的代碼出口形式就相似於此。

externals: Object.keys(require('../package.json').dependencies),
複製代碼

externals是外部因素的意思，首先咱們能夠打開package.json文件看看dependencies

咱們用Object.keys()獲得的就是一個數組。externals就是告訴webpack不要去打包node_modules裏面的js代碼。devDependencies裏面是一些工具型的東西，在應用真正跑起來的時候是不須要的。只有在執行一些打包，工具化操做的時候纔會須要它。

'process.env.VUE_ENV': '"server"'
複製代碼

這是vue服務端官方建議咱們這麼去作的，在vue-server-renderer裏面可能會用到這個屬性。

const VueServerPlugin = require('vue-server-renderer/server-plugin')
複製代碼

這個插件能幫咱們單獨地生成一個json文件，用於在vue的服務端渲染裏面能幫助咱們處理一些很複雜的邏輯。

最後

文章寫到這兒，Vue的服務端渲染的入門工做就算完成了（先用webpack建立一個配置文件來打包server端的代碼），下一篇文章將介紹如何使用koa這個node服務端框架去實現node server，最新文章都會第一時間更新在個人公衆號<閏土大叔>裏面，歡迎關注。