Skip to content

Commit 309aa1b

Browse files
vnuesvnues
committed
feat: 设置客户端缓存状态为no-store
1 parent 42c9a6b commit 309aa1b

File tree

12 files changed

+40
-53
lines changed

12 files changed

+40
-53
lines changed

‎build/client/dev-server.js

+5-9
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,8 @@ const express = require('express')
33
const webpack = require('webpack')
44
const devMiddleware = require('webpack-dev-middleware')
55
const hotMiddleware = require('webpack-hot-middleware')
6-
6+
const proConfig = require('../../config/pro-config')
77
const webpackConfig = require('./webpack.dev.conf')
8-
98
const config = require('../../config')
109
const port = config.dev.port
1110

@@ -20,9 +19,9 @@ const main = function () {
2019
const compiler = webpack(webpackConfig)
2120

2221
const webpackDevMiddleware = devMiddleware(compiler, {
23-
// logLevel: 'silent',
2422
index: 'index.html',
25-
publicPath: webpackConfig.output.publicPath
23+
publicPath: webpackConfig.output.publicPath,
24+
stats: false
2625
})
2726

2827
const webpackHotMiddleware = hotMiddleware(compiler, {
@@ -34,10 +33,7 @@ const main = function () {
3433
//设置跨域访问
3534
app.all('*', function (req, res, next) {
3635
res.header('Access-Control-Allow-Origin', '*')
37-
// res.header("Access-Control-Allow-Headers", "X-Requested-With");
38-
// res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
39-
// res.header("X-Powered-By",' 3.2.1')
40-
// res.header("Content-Type", "application/json;charset=utf-8");
36+
res.header('Cache-Control', 'no-store')
4137
next()
4238
})
4339

@@ -57,7 +53,7 @@ const main = function () {
5753

5854
console.log('> Starting dev server...')
5955
webpackDevMiddleware.waitUntilValid(() => {
60-
console.log(`> Listening at ${config.dev.host}:${newPort} \n`)
56+
console.log(`> Listening at ${config.dev.host}:${proConfig.nodeServerPort} \n`)
6157
})
6258
app.listen(newPort)
6359
})

‎build/client/webpack.base.conf.js

+2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ const WebpackBar = require('webpackbar')
44
const webpack = require('webpack')
55
const ESLintPlugin = require('eslint-webpack-plugin')
66
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
7+
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
78

89
const utils = require('./utils')
910
const config = require('../../config')
@@ -70,6 +71,7 @@ module.exports = {
7071
},
7172

7273
plugins: [
74+
new FriendlyErrorsWebpackPlugin(),
7375
new ForkTsCheckerWebpackPlugin(),
7476
new ESLintPlugin({
7577
fix: true

‎build/client/webpack.prod.conf.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ module.exports = merge(baseWebpackConfig, {
2020
})
2121
]
2222
},
23-
devtool: '#source-map',
23+
devtool: 'source-map',
2424
output: {
2525
publicPath: `${config.prod.assetsPublicPath}/${config.base.projectName}/`
2626
},

‎build/start.js

+1-3
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,7 @@ function getIp() {
1717
}
1818
const localHostIp = getIp()
1919

20-
log(chalk.red('servers starting....'))
21-
20+
log(chalk.green('servers starting....'))
2221

2322
// 服务端代码监控和构建进程
2423
const svrCodeWatchProcess = spawn('npm', ['run', 'server-dev:build'], {
@@ -31,7 +30,6 @@ const feCodeWatchProcess = spawn('npm', ['run', 'client:dev', localHostIp], {
3130
shell: process.platform === 'win32'
3231
})
3332

34-
3533
// node 服务进程
3634
let nodeServerProcess = null
3735
// 启动 node 服务

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"build": "node ./build/client/prod-build.js",
1111
"client:build": "node ./build/client/prod-build.js",
1212
"server:build": "cross-env NODE_ENV=production webpack --config ./build/server/webpack.server.config.js",
13-
"server-dev:build": "node ./build/server/dev-build.js",
13+
"server-dev:build": "cross-env NODE_ENV=development node ./build/server/dev-build.js",
1414
"start": "node ./dist/server/app.js",
1515
"mock": "oock -c ./mock/config.js ",
1616
"gc": "git-cz",

‎src/client/main/index.tsx

-6
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,8 @@ function renderDom(routeList: any[], initStoreState?: Store) {
1616
return () => removeCss.forEach(dispose => dispose()) // 组件卸载时 移除当前的 style 标签
1717
}
1818
// !redux数据更新
19-
20-
console.log('initStoreState', initStoreState)
2119
const store = getStore(initStoreState)
2220
// 服务端只需要获取state就行 我们方法的定义在redux就定义好了
23-
console.log('同步更新的客户端store', store.getState())
2421
window.__STORE__ = store
2522
const renderMethod = module.hot ? ReactDOM.render : ReactDOM.hydrate
2623
renderMethod(
@@ -58,15 +55,12 @@ function clientRender(routeList: any) {
5855
const { targetRoute } = matchResult
5956
if (targetRoute) {
6057
// 预加载 等待异步脚本加载完成
61-
console.log('proConfig', proConfig)
62-
console.log('targetRoute', targetRoute)
6358
if (targetRoute.component[proConfig.asyncComponentKey]) {
6459
targetRoute
6560
.component()
6661
.props.load()
6762
.then(() => {
6863
// 异步组件加载完成后再渲染页面
69-
console.log('异步组件加载完成.')
7064
// 设置已加载完的组件，否则需要重新请求
7165
renderDom(routeList, initStoreState)
7266
})

‎src/client/main/route-config.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,5 @@ try {
99
console.warn(err.message)
1010
}
1111

12-
console.log('>>> routes: ', JSON.stringify(routes))
12+
// console.log('>>> routes: ', JSON.stringify(routes))
1313
export default routes

‎src/client/main/router.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { Route, Switch } from 'react-router-dom'
55
const App = ({ routeList }: any) => (
66
<Layout>
77
<Switch>
8-
{console.log('routeList', routeList)}
98
{routeList.map((item: any) => (
109
<Route key={item.path} {...item} />
1110
))}

‎src/client/modules/home/index.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export const Home = () => {
1212
<div className="home">
1313
<h1>hello react-ssr</h1>
1414
<button onClick={handleClick}>click me1的顶顶顶顶顶的</button>
15-
{[22, 44, 55, 300, 100, 20].map((item: number) => (
15+
{[22, 44, 55, 300, 100, 201].map((item: number) => (
1616
<div key={item}>{item}</div>
1717
))}
1818
<p>11</p>
@@ -23,7 +23,6 @@ export const Home = () => {
2323
// ! 约定 服务端会调用这个方法 ===> 相当于是生命周期
2424
// 这一块可能会设计到把redux的操作
2525
Home.getInitialProps = ({ store }: any) => {
26-
console.log(store)
2726
// TODO 在这个生命周期调用getInitialData
2827
store.dispatch.home.getInitialData()
2928
}

‎src/client/store/home/index.ts

-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@ export default createModel<any>()({
3232
}
3333
resolve(data)
3434
// 更新状态
35-
console.log('players', home)
3635
home.SET_PLAYERS([800, 800, 800])
3736
}, 500)
3837
})

‎src/server/app/index.ts

+1-4
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,14 @@ const options = {
1818
}
1919
}
2020
// 设置资源缓存-开发环境我们暂时不做缓存，为了热更新
21-
console.log('process.env.NODE_ENV', process.env.NODE_ENV)
2221
if (process.env.NODE_ENV === 'development') {
2322
app.use(async (ctx, next) => {
2423
await next()
2524
ctx.set('Cache-Control', 'no-store')
2625
})
26+
app.use(proxy(options))
2727
}
2828

29-
app.use(proxy(options))
30-
31-
// 设置可访问的静态资源
3229
app.use(koaStatic('./dist/static'))
3330

3431
// ssr 中间件

‎templates/server.ejs

+27-24
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,37 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6-
<meta name="renderer" content="webkit">
7-
<meta name="force-rendering" content="webkit"/>
8-
<meta http-equiv="Cache-Control" content="no-siteapp" />
9-
<meta name="robots" content="noindex,nofollow" />
10-
<title>${tdk.title}</title>
11-
<meta name="keywords" content="<%=tdk.keywords%>" />
12-
<meta name="description" content="<%=tdk.description%>" />
13-
<%- styles.join('') %>
14-
</head>
15-
<body>
16-
<div id="app">
17-
<%- html %>
18-
</div>
19-
<% if (fetchResult) { %>
20-
<textarea id="ssrTextInitData" style="display:none;">
3+
4+
<head>
5+
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7+
<meta name="renderer" content="webkit">
8+
<meta name="force-rendering" content="webkit" />
9+
<meta http-equiv="Cache-Control" content="no-siteapp" />
10+
<meta name="robots" content="noindex,nofollow" />
11+
<title>${tdk.title}</title>
12+
<meta name="keywords" content="<%=tdk.keywords%>" />
13+
<meta name="description" content="<%=tdk.description%>" />
14+
<%- styles.join('') %>
15+
</head>
16+
17+
<body>
18+
<div id="app">
19+
<%- html %>
20+
</div>
21+
<% if (fetchResult) { %>
22+
<textarea id="ssrTextInitData" style="display:none;">
2123
<%=JSON.stringify(fetchResult || {})%>
2224
</textarea>
2325
<% } %>
24-
<% if (store.getState()) { %>
25-
<textarea id="ssrTextInitStoreData" style="display:none;">
26+
<% if (store.getState()) { %>
27+
<textarea id="ssrTextInitStoreData" style="display:none;">
2628
<%=JSON.stringify(store.getState() || {})%>
2729
</textarea>
28-
<% } %>
29-
</body>
30+
<% } %>
31+
</body>
32+
3033
</html>
3134
<script>
32-
window.__IS__SSR__= "<%= proConfig.__IS_SSR__%>"
35+
window.__IS__SSR__="<%= proConfig.__IS_SSR__%>"
3336
</script>
34-
<%- assetsMap.js.join('')%>
37+
<%- assetsMap.js.join('')%>

0 commit comments

Comments
 (0)