React Redux Router4 Koa 服务端渲染，惰性加载，热更新教程

最新推荐文章于 2020-06-27 20:41:33 发布

weixin_34281477

最新推荐文章于 2020-06-27 20:41:33 发布

阅读量173

点赞数

文章标签： javascript webpack 前端 ViewUI

原文链接：https://juejin.im/post/5a4733b76fb9a04525787472

版权

在实际项目中，大多数都需要服务端渲染。

服务端渲染的优势：

1.首屏性能好，不需要等待 js 加载完成才能看到页面
2.有利于SEO

网上很多服务端渲染的教程，但是碎片化很严重，或者版本太低。一个好的例子能为你节省很多时间！

演示

点击预览

演示版 Github地址: github.com/tzuser/ssr

项目目录

server为服务端目录。因为这是最基础的服务端渲染，为了代码清晰和学习，所以服务端只共用了前端组件。
server/index.js为服务端入口文件
static存放静态文件

教程源码

Github地址: github.com/tzuser/ssr_…

教程开始 Webpack配置

首先区分生产环境和开发环境。开发环境使用webpack-dev-server做服务器

webpack.config.js 基础配置文件

const path=require('path');
const webpack=require('webpack');
const HTMLWebpackPlugin = require('html-webpack-plugin');//html生成
module.exports={
	entry: {
		main:path.join(__dirname,'./src/index.js'),
		vendors:['react','react-redux']//组件分离
	},
	output:{
		path: path.resolve(__dirname,'build'),
		publicPath: '/',
		filename:'[name].js',
		chunkFilename:'[name].[id].js'
	},
	context:path.resolve(__dirname,'src'),
	module:{
		rules:[
			{
				test:/\.(js|jsx)$/,
				use:[{
					loader:'babel-loader',
					options:{
						presets:['env','react','stage-0'],
					},
				}]
			}
		]
	},
	resolve:{extensions:['.js','.jsx','.less','.scss','.css']},
	plugins:[
		new HTMLWebpackPlugin({//根据index.ejs 生成index.html文件
			title:'Webpack配置',
			inject: true,
			filename: 'index.html',
			template: path.join(__dirname,'./index.ejs')
		}),
		new webpack.optimize.CommonsChunkPlugin({//公共组件分离
			  names: ['vendors', 'manifest']
		}),
	],
}

复制代码

开发环境 webpack.dev.js

在开发环境时需要热更新方便开发，而发布环境则不需要！

在生产环境中需要react-loadable来做分模块加载，提高用户访问速度，而开发时则不需要。

const path=require('path');
const webpack=require('webpack');
const config=require('./webpack.config.js');//加载基础配置

config.plugins.push(//添加插件
	new webpack.HotModuleReplacementPlugin()//热加载
)

let devConfig={
	context:path.resolve(__dirname,'src'),
	devtool: 'eval-source-map',
	devServer: {//dev-server参数
		contentBase: path.join(__dirname,'./build'),
		inline:true,
		hot:true,//启动热加载
		open : true,//运行打开浏览器
		port: 8900,
		historyApiFallback:true,
		watchOptions: {//监听配置变化
			aggregateTimeout: 300,
			poll: 1000
		},
   	}
}

module.exports=Object.assign({},config,devConfig)
复制代码

生产环境 webpack.build.js

在打包前使用clean-webpack-plugin插件删除之前打包文件。使用react-loadable/webpack处理惰性加载 ReactLoadablePlugin会生成一个react-loadable.json文件,后台需要用到

const config=require('./webpack.config.js');
const path=require('path');
const {ReactLoadablePlugin}=require('react-loadable/webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');//复制文件
const CleanWebpackPlugin = require("clean-webpack-plugin");//删除文件

let buildConfig={

}
let newPlugins=[
    new CleanWebpackPlugin(['./build']),
    //文件复制
    new CopyWebpackPlugin([
      {from:path.join(__dirname,'./static'),to:'static'}
    ]),
    //惰性加载
	new ReactLoadablePlugin({
	      filename: './build/react-loadable.json',
	})
]

config.plugins=config.plugins.concat(newPlugins);
module.exports=Object.assign({},config,buildConfig)
复制代码

模板文件 index.ejs

在基础配置webpack.config.js里 HTMLWebpackPlugin插件就是根据这个模板文件生成index.html 并且会把需要js添加到底部

注意

模板文件只给前端开发或打包用，后端读取的是HTMLWebpackPlugin插件生成后的index.html。
body下有个window.main() 这是用来确保所有js加载完成后再调用react渲染，window.main方法是src/index.js暴露的，如果对这个感到疑惑，没关系在后面后详解。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link rel="icon" href="/static/favicon.ico" mce_href="/static/favicon.ico" type="image/x-icon">
	<link rel="manifest" href="/static/manifest.json">
	<meta name="viewport" content="width=device-width,user-scalable=no" >
	<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
	<div id="root"></div>
</body>
<script>window.main();</script>
</html>
复制代码

入口文件 src/index.js

和传统写法不同的是App.jsx采用require动态引入,因为module.hot.accept会监听App.jsx文件及App中引用的文件是否改变，改变后需要重新加载并且渲染。所以把渲染封装成render方法，方便调用。

暴露了main方法给window 并且确保Loadable.preloadReady预加载完成再执行渲染

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import {createStore,applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
//浏览器开发工具
import {composeWithDevTools} from 'redux-devtools-extension/developmentOnly';
import reducers from './reducers/index';

import createHistory from 'history/createBrowserHistory';
import {ConnectedRouter,routerMiddleware} from 'react-router-redux';
import {  Router } from 'react-router-dom';
import Loadable from 'react-loadable';

const history = createHistory()
const middleware=[thunk,routerMiddleware(history)];
const store=createStore(
	reducers,
	composeWithDevTools(applyMiddleware(...middleware))
	)
if(module.hot) {//判断是否启用热加载
		module.hot.accept('./reducers/index.js', () => {//侦听reducers文件
			import('./reducers/index.js').then(({default:nextRootReducer})=>{
				store.replaceReducer(nextRootReducer);
			});
		});
		module.hot.accept('./Containers/App.jsx', () => {//侦听App.jsx文件
			render(store)
		});
	}

const render=()=>{
	const App = require("./Containers/App.jsx").default;
	ReactDOM.hydrate(
		<Provider store={store}>
			<ConnectedRouter history={history}>
				<App />
			</ConnectedRouter>
		</Provider>,
		document.getElementById('root'))
}

window.main = () => {//暴露main方法给window
  Loadable.preloadReady().then(() => {
	render()
  });
};

复制代码

APP.jsx 容器

import React,{Component} from 'react';
import {Route,Link} from 'react-router-dom';
import Loadable from 'react-loadable';
const loading=()=><div>Loading...</div>;
const LoadableHome=Loadable({
	loader:()=> import(/* webpackChunkName: 'Home' */ './Home'),
	loading
});
const LoadableUser = Loadable({
  loader: () => import(/* webpackChunkName: 'User' */ './User'),
  loading
});
const LoadableList = Loadable({
  loader: () => import(/* webpackChunkName: 'List' */ './List'),
  loading
});
class App extends Component{
	render(){
		return(
			<div>
				<Route exact path="/"  component={LoadableHome}/>
				<Route path="/user" component={LoadableUser}/>
				<Route path="/list" component={LoadableList}/>

				<Link to="/user">user</Link>
				<Link to="/list">list</Link>
			</div>
		)
	}
};
export default App
复制代码

注意这里引用Home、User、List页面时都用了

const LoadableHome=Loadable({
	loader:()=> import(/* webpackChunkName: 'Home' */ './Home'),
	loading
});
复制代码

这种方式惰性加载文件，而不是import Home from './Home'。

/* webpackChunkName: 'Home' */ 的作用是打包时指定chunk文件名

Home.jsx 容器

home只是一个普通容器并不需要其它特殊处理

import React,{Component} from 'react';
const Home=()=><div>首页更改</div>
export default Home
复制代码

接下来-服务端

server/index.js

加载了一大堆插件用来支持es6语法及前端组件

require('babel-polyfill')
require('babel-register')({
  ignore: /\/(build|node_modules)\//,
  presets: ['env', 'babel-preset-react', 'stage-0'],
  plugins: ['add-module-exports','syntax-dynamic-import',"dynamic-import-node","react-loadable/babel"]
});

require('./server');
复制代码

server/server.js

注意路由首先匹配路由，再匹配静态文件，最后app.use(render)再指向render。为什么要这么做？

比如用户访问根路径/ 路由匹配成功渲染首页。紧跟着渲染完成后需要加载/main.js,这次路由匹配失败，再匹配静态文件，文件匹配成功返回main.js。

如果用户访问的网址是/user路由和静态文件都不匹配，这时候再去跑渲染，就可以成功渲染user页面。

const Loadable=require('react-loadable');
const Router = require('koa-router');
const router = new Router();

const path= require('path')
const staticServer =require('koa-static')
const Koa = require('koa')
const app = new Koa()
const render = require('./render.js')

router.get('/', render);

app.use(router.routes())
.use(router.allowedMethods())
.use(staticServer(path.resolve(__dirname, '../build')));
app.use(render);


Loadable.preloadAll().then(() => {
  app.listen(3000, () => {
    console.log('Running on http://localhost:3000/');
  });
});

复制代码

最重要的 server/render.js

写了prepHTML方法，方便对index.html处理。 render首先加载index.html 通过createServerStore传入路由获取store和history。

在外面包裹了Loadable.Capture高阶组件，用来获取前端需要加载路由地址列表， [ './Tab', './Home' ]

通过getBundles(stats, modules)方法取到组件真实路径。 stats是webpack打包时生成的react-loadable.json

[ { id: 1050,
    name: '../node_modules/.1.0.0-beta.25@material-ui/Tabs/Tab.js',
    file: 'User.3.js' },
  { id: 1029, name: './Containers/Tab.jsx', file: 'Tab.6.js' },
  { id: 1036, name: './Containers/Home.jsx', file: 'Home.5.js' } ]
复制代码

使用bundles.filter区分css和js文件，取到首屏加载的文件后都塞入html里。

import React from 'react'
import Loadable from 'react-loadable';
import { renderToString } from 'react-dom/server';
import App from '../src/Containers/App.jsx';
import {ConnectedRouter,routerMiddleware} from 'react-router-redux';
import { StaticRouter } from 'react-router-dom'
import createServerStore from './store';
import {Provider} from 'react-redux';
import path from 'path';
import fs from 'fs';
import Helmet from 'react-helmet';
import { getBundles } from 'react-loadable/webpack'
import stats from '../build/react-loadable.json';

//html处理
const prepHTML=(data,{html,head,style,body,script})=>{
	data=data.replace('<html',`<html ${html}`);
	data=data.replace('</head>',`${head}${style}</head>`);
	data=data.replace('<div id="root"></div>',`<div id="root">${body}</div>`);
	data=data.replace('</body>',`${script}</body>`);
	return data;
}

const render=async (ctx,next)=>{
		const filePath=path.resolve(__dirname,'../build/index.html')
		let html=await new Promise((resolve,reject)=>{
			fs.readFile(filePath,'utf8',(err,htmlData)=>{//读取index.html文件
				if(err){
					console.error('读取文件错误!',err);
					return res.status(404).end()
				}
				//获取store
				const { store, history } = createServerStore(ctx.req.url);

				let modules=[];
				let routeMarkup =renderToString(
					<Loadable.Capture report={moduleName => modules.push(moduleName)}>
						<Provider store={store}>
							<ConnectedRouter history={history}>
								<App/>
							</ConnectedRouter>
						</Provider>
					</Loadable.Capture>
					)

				let bundles = getBundles(stats, modules);
				let styles = bundles.filter(bundle => bundle.file.endsWith('.css'));
				let scripts = bundles.filter(bundle => bundle.file.endsWith('.js'));

				let styleStr=styles.map(style => {
					        	return `<link href="/dist/${style.file}" rel="stylesheet"/>`
					      	}).join('\n')

				let scriptStr=scripts.map(bundle => {
					        	return `<script src="/${bundle.file}"></script>`
					      	}).join('\n')

				const helmet=Helmet.renderStatic();
				const html=prepHTML(htmlData,{
					html:helmet.htmlAttributes.toString(),
					head:helmet.title.toString()+helmet.meta.toString()+helmet.link.toString(),
					style:styleStr,
					body:routeMarkup,
					script:scriptStr,
				})
				resolve(html)
			})
		})
		ctx.body=html;//返回
}

export default render;
复制代码

server/store.js

创建store和history和前端差不多，createHistory({ initialEntries: [path] })，path为路由地址

import { createStore, applyMiddleware, compose } from 'redux';
import { routerMiddleware } from 'react-router-redux';
import thunk from 'redux-thunk';

import createHistory from 'history/createMemoryHistory';
import rootReducer from '../src/reducers/index';

// Create a store and history based on a path
const createServerStore = (path = '/') => {
  const initialState = {};

  // We don't have a DOM, so let's create some fake history and push the current path
  let history = createHistory({ initialEntries: [path] });

  // All the middlewares
  const middleware = [thunk, routerMiddleware(history)];
  const composedEnhancers = compose(applyMiddleware(...middleware));

  // Store it all
  const store = createStore(rootReducer, initialState, composedEnhancers);

  // Return all that I need
  return {
    history,
    store
  };
};

export default createServerStore;
复制代码

参考

这是我同事写的一篇服务器渲染的教程，也非常不错

juejin.im/post/5a3920…

weixin_34281477

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React Redux Router4 Koa 服务端渲染，惰性加载，热更新教程

在实际项目中，大多数都需要服务端渲染。服务端渲染的优势：1.首屏性能好，不需要等待 js 加载完成才能看到页面2.有利于SEO网上很多服务端渲染的教程，但是碎片化很严重，或者版本太低。一个好的例子能为你节省很多时间！演示点击预览演示版 Github地址: github.com/tzuser/ssr项目目录server为服务端目录。因为这是最基础的服务端渲染，...
复制链接

扫一扫