教你如何搭建一個超完美的服務(wù)端渲染開發(fā)環(huán)境

Github地址: https://github.com/chikara-chan/react-isomorphic-boilerplate

目錄

  • 前言
  • 服務(wù)端渲染好處
  • 思考
  • 原理
  • 同構(gòu)方案
  • 狀態(tài)管理方案
  • 路由方案
  • 靜態(tài)資源處理方案
  • 動態(tài)加載方案
  • 優(yōu)化方案
  • 部署方案
  • 其它
  • 結(jié)尾

前言

前段時間公司有一個產(chǎn)品需求要求使用Node.js中間層來做服務(wù)端渲染，于是翻遍了整個技術(shù)社區(qū)，沒有找到一個特別合適的腳手架，作為一個有追求的前端攻城獅，決定自己去搭建一套最完美的服務(wù)端渲染開發(fā)環(huán)境，期間踩過無數(shù)的坑，前前后后差不多折騰了三周時間。

服務(wù)端渲染好處

  1. SEO，讓搜索引擎更容易讀取頁面內(nèi)容
  2. 首屏渲染速度更快（重點(diǎn)），無需等待js文件下載執(zhí)行的過程
  3. 更易于維護(hù)，服務(wù)端和客戶端可以共享某些代碼

思考

  1. 如何實現(xiàn)組件同構(gòu)？
  2. 如何保持前后端應(yīng)用狀態(tài)一致？
  3. 如何解決前后端路由匹配問題？
  4. 如何處理服務(wù)端對靜態(tài)資源的依賴？
  5. 如何配置兩套不同的環(huán)境（開發(fā)環(huán)境和產(chǎn)品環(huán)境）？
  6. 如何劃分更合理的項目目錄結(jié)構(gòu)？

由于服務(wù)端渲染配置的復(fù)雜性，大部分人望而止步，而本文的目的就在于教你如何搭建一套優(yōu)雅的服務(wù)端渲染開發(fā)環(huán)境，從開發(fā)打包部署優(yōu)化到上線。

原理

一個服務(wù)端渲染的同構(gòu)web應(yīng)用架構(gòu)圖大致如上圖所示，得力于Node.js的發(fā)展與流行，Javascript成為了一門同構(gòu)語言，這意味著我們只需寫一套代碼，可以同時在客戶端與服務(wù)端執(zhí)行。

同構(gòu)方案

這里我們采用React技術(shù)體系做同構(gòu)，由于React本身的設(shè)計特點(diǎn)，它是以Virtual DOM的形式保存在內(nèi)存中，這是服務(wù)端渲染的前提。

對于客戶端，通過調(diào)用ReactDOM.render方法把Virtual DOM轉(zhuǎn)換成真實DOM最后渲染到界面。

import { render } from 'react-dom'
import App from './App'

render(<App />, document.getElementById('root'))

對于服務(wù)端，通過調(diào)用ReactDOMServer.renderToString方法把Virtual DOM轉(zhuǎn)換成HTML字符串返回給客戶端，從而達(dá)到服務(wù)端渲染的目的。

import { renderToString } from 'react-dom/server'
import App from './App'

async function(ctx) {
    await ctx.render('index', {
        root: renderToString(<App />)
    })
}

狀態(tài)管理方案

我們選擇Redux來管理React組件的非私有組件狀態(tài)，并配合社區(qū)中強(qiáng)大的中間件Devtools、Thunk、Promise等等來擴(kuò)充應(yīng)用。當(dāng)進(jìn)行服務(wù)端渲染時，創(chuàng)建store實例后，還必須把初始狀態(tài)回傳給客戶端，客戶端拿到初始狀態(tài)后把它作為預(yù)加載狀態(tài)來創(chuàng)建store實例，否則，客戶端上生成的markup與服務(wù)端生成的markup不匹配，客戶端將不得不再次加載數(shù)據(jù)，造成沒必要的性能消耗。

服務(wù)端
import { renderToString } from 'react-dom/server'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import App from './App'
import rootReducer from './reducers'

const store = createStore(rootReducer)

async function(ctx) {
    await ctx.render('index', {
        root: renderToString(
            <Provider store={store}>
                <App />
            </Provider>
        ),
        state: store.getState()
    })
}
HTML
<body>
    <div id="root"><%- root %></div>
    <script>
        window.REDUX_STATE = <%- JSON.stringify(state) %>
    </script>
</body>
客戶端
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import App from './App'
import rootReducer from './reducers'

const store = createStore(rootReducer, window.REDUX_STATE)

render(
    <Provider store={store}>
        <App />
    </Provider>, 
    document.getElementById('root')
)

路由方案

?客戶端路由的好處就不必多說了，?客戶端可以不依賴服務(wù)端，根據(jù)hash方式或者調(diào)用history API，不同的URL渲染不同的視圖，實現(xiàn)無縫的頁面切換，用戶體驗極佳。但服務(wù)端渲染不同的地方在于，在渲染之前，必須根據(jù)URL正確找到相匹配的組件返回給客戶端。
React Router為服務(wù)端渲染提供了兩個API：

  • match 在渲染之前根據(jù)URL匹配路由組件
  • RoutingContext 以同步的方式渲染路由組件
服務(wù)端
import { renderToString } from 'react-dom/server'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import { match, RouterContext } from 'react-router'
import rootReducer from './reducers'
import routes from './routes'

const store = createStore(rootReducer)

async function clientRoute(ctx, next) {
    let _renderProps

    match({routes, location: ctx.url}, (error, redirectLocation, renderProps) => {
        _renderProps = renderProps
    })

    if (_renderProps) {
        await ctx.render('index', {
            root: renderToString(
                <Provider store={store}>
                    <RouterContext {..._renderProps} />
                </Provider>
            ),
            state: store.getState()
        })
    } else {
        await next()
    }
}
客戶端
import { Route, IndexRoute } from 'react-router'
import Common from './Common'
import Home from './Home'
import Explore from './Explore'
import About from './About'

const routes = (
    <Route path="/" component={Common}>
        <IndexRoute component={Home} />
        <Route path="explore" component={Explore} />
        <Route path="about" component={About} />
    </Route>
)

export default routes

靜態(tài)資源處理方案

在客戶端中，我們使用了大量的ES6/7語法，jsx語法，css資源，圖片資源，最終通過webpack配合各種loader打包成一個文件最后運(yùn)行在瀏覽器環(huán)境中。但是在服務(wù)端，不支持import、jsx這種語法，并且無法識別對css、image資源后綴的模塊引用，那么要怎么處理這些靜態(tài)資源呢？我們需要借助相關(guān)的工具、插件來使得Node.js解析器能夠加載并執(zhí)行這類代碼，下面分別為開發(fā)環(huán)境和產(chǎn)品環(huán)境配置兩套不同的解決方案。

開發(fā)環(huán)境
  1. 首先引入babel-polyfill這個庫來提供regenerator運(yùn)行時和core-js來模擬全功能ES6環(huán)境。
  2. 引入babel-register，這是一個require鉤子，會自動對require命令所加載的js文件進(jìn)行實時轉(zhuǎn)碼，需要注意的是，這個庫只適用于開發(fā)環(huán)境。
  3. 引入css-modules-require-hook，同樣是鉤子，只針對樣式文件，由于我們采用的是CSS Modules方案，并且使用SASS來書寫代碼，所以需要node-sass這個前置編譯器來識別擴(kuò)展名為.scss的文件，當(dāng)然你也可以采用LESS的方式，通過這個鉤子，自動提取className哈希字符注入到服務(wù)端的React組件中。
  4. 引入asset-require-hook，來識別圖片資源，對小于8K的圖片轉(zhuǎn)換成base64字符串，大于8k的圖片轉(zhuǎn)換成路徑引用。
// Provide custom regenerator runtime and core-js
require('babel-polyfill')

// Javascript required hook
require('babel-register')({presets: ['es2015', 'react', 'stage-0']})

// Css required hook
require('css-modules-require-hook')({
    extensions: ['.scss'],
    preprocessCss: (data, filename) =>
        require('node-sass').renderSync({
            data,
            file: filename
        }).css,
    camelCase: true,
    generateScopedName: '[name]__[local]__[hash:base64:8]'
})

// Image required hook
require('asset-require-hook')({
    extensions: ['jpg', 'png', 'gif', 'webp'],
    limit: 8000
})
產(chǎn)品環(huán)境

?對于產(chǎn)品環(huán)境，我們的做法是使用webpack?分別對客戶端和服務(wù)端代碼進(jìn)行打包?？蛻舳舜a打包這里不多說，對于服務(wù)端代碼，需要指定運(yùn)行環(huán)境為node，并且提供polyfill，設(shè)置__filename和__dirname為true，由于是采用CSS Modules，服務(wù)端只需獲取className，而無需加載樣式代碼，所以要使用css-loader/locals替代css-loader加載樣式文件

// webpack.config.js
{
    target: 'node',
    node: {
        __filename: true,
        __dirname: true
    },
    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel',
            query: {presets: ['es2015', 'react', 'stage-0']}
        }, {
            test: /\.scss$/,
            loaders: [
                'css/locals?modules&camelCase&importLoaders=1&localIdentName=[hash:base64:8]',
                'sass'
            ]
        }, {
            test: /\.(jpg|png|gif|webp)$/,
            loader: 'url?limit=8000'
        }]
    }
}

動態(tài)加載方案

對于大型Web應(yīng)用程序來說，將所有代碼?打包成一個文件不是一種優(yōu)雅的做法，特別是?對于單頁面應(yīng)用，用戶有時候并不想得到其余路由模塊的內(nèi)容，加載全部模塊內(nèi)容，不僅增加用戶等待時間，而且會增加服務(wù)器負(fù)荷。Webpack提供一個功能可以拆分模塊，每一個模塊稱為chunk，這個功能叫做Code Splitting。你可以在你的代碼庫中定義分割點(diǎn)，調(diào)用require.ensure，實現(xiàn)按需加載，而對于服務(wù)端渲染，require.ensure是不存在的，因此需要判斷運(yùn)行環(huán)境，提供鉤子函數(shù)。

重構(gòu)后的路由模塊為

// Hook for server
if (typeof require.ensure !== 'function') {
    require.ensure = function(dependencies, callback) {
        callback(require)
    }
}

const routes = {
    childRoutes: [{
        path: '/',
        component: require('./common/containers/Root').default,
        indexRoute: {
            getComponent(nextState, callback) {
                require.ensure([], require => {
                    callback(null, require('./home/containers/App').default)
                }, 'home')
            }
        },
        childRoutes: [{
            path: 'explore',
            getComponent(nextState, callback) {
                require.ensure([], require => {
                    callback(null, require('./explore/containers/App').default)
                }, 'explore')
            }
        }, {
            path: 'about',
            getComponent(nextState, callback) {
                require.ensure([], require => {
                    callback(null, require('./about/containers/App').default)
                }, 'about')
            }
        }]
    }]
}

export default routes

優(yōu)化方案

提取第三方庫，命名為vendor

vendor: ['react', 'react-dom', 'redux', 'react-redux']

所有js模塊以chunkhash方式命名

output: {
    filename: '[name].[chunkhash:8].js',
    chunkFilename: 'chunk.[name].[chunkhash:8].js',
}

提取公共模塊，manifest文件起過渡作用

new webpack.optimize.CommonsChunkPlugin({
    names: ['vendor', 'manifest'],
    filename: '[name].[chunkhash:8].js'
})

提取css文件，以contenthash方式命名

new ExtractTextPlugin('[name].[contenthash:8].css')

模塊排序、去重、壓縮

new webpack.optimize.OccurrenceOrderPlugin(), // webpack2 已移除
new webpack.optimize.DedupePlugin(), // webpack2 已移除
new webpack.optimize.UglifyJsPlugin({
    compress: {warnings: false},
    comments: false
})

使用babel-plugin-transform-runtime取代babel-polyfill，可節(jié)省大量文件體積
需要注意的是，你不能使用最新的內(nèi)置實例方法，例如數(shù)組的includes方法

{
    presets: ['es2015', 'react', 'stage-0'],
    plugins: ['transform-runtime']
}

最終打包結(jié)果

Paste_Image.png

部署方案

對于客戶端代碼，將全部的靜態(tài)資源上傳至CDN服務(wù)器
對于服務(wù)端代碼，則采用pm2部署，這是一個帶有負(fù)載均衡功能的Node應(yīng)用的進(jìn)程管理器，支持監(jiān)控、日志、0秒重載，并可以根據(jù)有效CPU數(shù)目以cluster的方式啟動最大進(jìn)程數(shù)目

pm2 start ./server.js -i 0
Paste_Image.png

其它

提升開發(fā)體驗

對于客戶端代碼，可以使用Hot Module Replacement技術(shù)，并配合koa-webpack-dev-middleware，koa-webpack-hot-middleware兩個中間件，與傳統(tǒng)的BrowserSync不同的是，它可以使我們不用通過刷新瀏覽器的方式，讓js和css改動實時更新反饋至瀏覽器界面中。

app.use(convert(devMiddleware(compiler, {
    noInfo: true,
    publicPath: config.output.publicPath
})))
app.use(convert(hotMiddleware(compiler)))

對于服務(wù)端代碼，則使用nodemon監(jiān)聽代碼改動，來自動重啟node服務(wù)器，相比supervisor，更加靈活輕量，內(nèi)存占用更少，可配置性更高。

nodemon ./server.js --watch server

對于React組件狀態(tài)管理，使用Redux DevTools這個中間件，它可以跟蹤每一個狀態(tài)和action，監(jiān)控數(shù)據(jù)流，由于采用純函數(shù)的編程思想，還具備狀態(tài)回溯的能力。需要注意的是，React組件在服務(wù)端生命周期只執(zhí)行到componentWillMount，因此要把該中間件掛載到componentDidMount方法上，避免在服務(wù)端渲染而報錯。

class Root extends Component {
    constructor() {
        super()
        this.state = {isMounted: false}
    }
    componentDidMount() {
        this.setState({isMounted: true})
    }
    render() {
        const {isMounted} = this.state
        return (
            <div>
                {isMounted && <DevTools/>}
            </div>
        )
    }
}

代碼風(fēng)格約束

推薦使用時下最為流行的ESLint，相比其它QA工具，擁有更多，更靈活，更容易擴(kuò)展的配置，無論是對個人還是團(tuán)隊協(xié)作，引入代碼風(fēng)格檢查工具，百益而無一害，建議你花個一天時間嘗試一遍ESLint每一項配置，再決定需要哪些配置，舍棄哪些配置，而不是直接去使用Airbnb規(guī)范，Google規(guī)范等等。

Tips: 使用fix參數(shù)可快速修復(fù)一些常見錯誤，在某種程度上，可以取代編輯器格式化工具

eslint test.js --fix

?開發(fā)環(huán)境演示

Youtubee視頻，自備梯子
https://www.youtube.com/watch?v=h3n3-v81PqY

結(jié)尾

時至今日，開源社區(qū)中并沒有一個完美的服務(wù)端渲染解決方案，而當(dāng)初搭建這個腳手架的目的就是從易用性出發(fā)，以最清晰的配置，用最流行的棧，組最合理的目錄結(jié)構(gòu)，給開發(fā)者帶來最完美的開發(fā)體驗，從開發(fā)打包部署優(yōu)化到上線，一氣呵成。即使你毫無經(jīng)驗，也可輕松入門服務(wù)端渲染開發(fā)。

附上源碼: https://github.com/chikara-chan/react-isomorphic-boilerplate

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容