Scribd
Upload
15 views20 pages

Server Side Rendering

Uploaded by

eejitxie
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as KEY, PDF, TXT or read online on Scribd
15 views20 pages

Server Side Rendering

Uploaded by

eejitxie
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as KEY, PDF, TXT or read online on Scribd
You are on page 1/ 20

Server Side Rendering

服务端渲染
快
SEO
局限

服务器压力

componentDidMo
unt
学习成本
客户端渲染
服务端渲染
全局变量
参数传递
ReactDomServer
import ReactDomSever from ‘react-dom/server’;
.renderToString
()

ReactDomServer .renderToStaticMarku
p()
.renderToNodeStrea
m()
.renderToStaticNodeStrea
m()
构建流程
双入口，两次编译
webpack.prod.js
CSS 分离
{
module: {
rules: [
{
test: /\.less$/,
use: [ MiniCssExtractPlugin.loader, ‘css-loader’, ‘less-loader’ ]
},
{
test: /\.s?[ac]ss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[local]--[hash:base64:5]'
}
}
},
'sass-loader'
]
}
]
},
plugins: [
new MiniCssExtractPlugin({filename: '[name].css'})
]
}
webpack.ssr.js
编译目标
无视资源文件
Local Css Module
{
target: ‘node’,
output: {
libraryTarget: ‘commonjs2’
},
module: [
rules: [
{
test: /\.less$/,
loader: 'ignore-loader'
},
{
test: /\.(scss|css)$/,
loader: 'css-loader',
options: {
importLoaders: 1,
onlyLocals: true,
modules: {
mode: 'local',
localIdentName: '[local]--[hash:base64:5]'
}
}
}
]
]
}
演示
谢谢！

You might also like