Vue.js受到越來越多企業(yè)的重視，包括BAT在內(nèi)的很多公司、項目組，都在向Vue.js靠攏。
繼前段時間西安電面之后順利拿到了OFFER，今天（5月2號）是我入職第一天，在簡短的內(nèi)部培訓(xùn)了一上午后，前端leader讓我先了解下什么是vue的服務(wù)器端渲染（SSR）。
SSR，英文全稱叫 Server side rendering ，國人叫它服務(wù)器端渲染。
首先聽到這個名詞，我頭腦就有點眩暈。咱們還是先去官網(wǎng)了解下SSR的定義：
Vue.js 可以將同一個組件渲染為服務(wù)器端的 HTML 字符串，將它們直接發(fā)送到瀏覽器，最后將靜態(tài)標記'混合'為客戶端上完全交互的應(yīng)用程序。這種在服務(wù)器和客戶端都可以運行的代碼程序，也可以叫做“同構(gòu)”。
我弱弱地問了leader一句，咱們公司為什么要使用服務(wù)端渲染？
leader冷冷地回復(fù)，有兩點原因，第一點，因為我們公司的站點很注重SEO，頁面又是異步獲取內(nèi)容；第二點，同時也希望用戶更快速地看到完整渲染的頁面，從而提高用戶體驗?；谶@兩點，所以需要服務(wù)器端渲染(SSR)來解決這些問題。
那服務(wù)端渲染的流程究竟是怎樣的呢？話不多說，先上圖：
在使用服務(wù)端渲染的時候，首先要有個server端。因為在開發(fā)vue項目時，需要起一個webpack-dev-server的服務(wù)，端口8000。因為我們要使用它的熱更替，這樣能加快開發(fā)效率。
由于webpack是一個自主的server，我們沒有辦法在里面添加服務(wù)端渲染的代碼，而這段代碼是需要自己去寫的，所以需要再起一個node server，去執(zhí)行服務(wù)端渲染的邏輯。我們會用到vue-server-renderer這個包來幫我們在node.js環(huán)境里面去渲染出vue代碼生成的HTML代碼，這部分代碼是直接返回給用戶的，用戶可以在瀏覽器里直接看到HTML的內(nèi)容。
以圖為例，我們看到兩個渲染的過程，兩種server。如果直接訪問webpack-dev-server，就跟我們之前開發(fā)的過程一樣，它是一個純前端渲染的過程。如果我們要走服務(wù)端渲染的流程，就要走node server服務(wù)，端口3333以示區(qū)別。而且需要打包一個邏輯到node端運行，通過webpack-server-compiler去生成一個server bundle，也就是服務(wù)端的app.js。 當node server 獲取到server bundle之后，就可以執(zhí)行vue-server-renderer，去渲染出HTML的代碼，直接返回給用戶，這樣的話就不需要通過js再去渲染出頁面內(nèi)容，減少了用戶的等待時間。
今天這篇文章的主要任務(wù)是，先用webpack創(chuàng)建一個配置文件來打包server端的代碼。
入門第一步，如何編寫服務(wù)器端渲染的配置文件？
首先我們需要在項目根目錄里面找到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環(huán)境。
entry: path.join(__dirname, '../client/server-entry.js'),
entry需要提供一個單獨的入口文件，所以需要在client文件夾下新建一個server-entry.js文件。
devtool: 'source-map',
devtool需要指定source-map，因為vue-server-renderer有個webpack插件，它能提供代碼調(diào)試的功能，不過只能提示到出錯的文件出在哪一行。
libraryTarget: 'commonjs2',
指定libraryTarget的類型為commonjs2，用來指定代碼export出去的入口的形式。在node.js中模塊是module.exports = {...}，commonjs2打包出來的代碼出口形式就類似于此。
externals: Object.keys(require('../package.json').dependencies),
externals是外部因素的意思，首先我們可以打開package.json文件看看dependencies
我們用Object.keys()得到的就是一個數(shù)組。externals就是告訴webpack不要去打包node_modules里面的js代碼。devDependencies里面是一些工具型的東西，在應(yīng)用真正跑起來的時候是不需要的。只有在執(zhí)行一些打包，工具化操作的時候才會需要它。
'process.env.VUE_ENV': ''server''
這是vue服務(wù)端官方建議我們這么去做的，在vue-server-renderer里面可能會用到這個屬性。
const VueServerPlugin = require('vue-server-renderer/server-plugin')
這個插件能幫我們單獨地生成一個json文件，用于在vue的服務(wù)端渲染里面能幫助我們處理一些很復(fù)雜的邏輯。
