webpack热更新延迟问题

前提一

如果后端服务是通过session来控制用户登录态的，在客户端就是用过cookie来保存sessionid，而在前后端分离的情况下，cookie就需要保存在根域才可以保证客户端可以读到cookie

前提二

如今使用webpack来构建前端项目，特别是react项目，必然是想要用webpack的热更新功能，那么就需要使用webpack-dev-server，但是webpack-dev-server怎么去配置域名？因为前提一的SessionId是要存在根域中

前提三

为了解决 前提一 + 前提二 的问题，那么我决定使用nginx来给webpack-dev-server做反向代理

配置如下：

1
2
3
4
5
6
7
8

server {
    listen       80;
    server_name  admin.xinlebao.com;
    location / {
        proxy_pass http://localhost:5000;
    }
}

标题所诉的问题来了

这样配置后确实可以拿到sessionId了，但是感觉有点不对，webpack热更新似乎是失效了

但是仔细观察，其实并没有失效，只是延迟了

比如，第一次修改的代码，页面接收到了hot-update.js，但是页面并没有更新，此时，我再次修改代码，页面同样会接收到hot-update.js，而此时页面内容更新了，但更新是第一次修改内容

最终的原因是nginx默认开启的buffer机制缓存了服务器推送的片段信息，缓存达到一定的量才会返回响应内容。只要关闭proxy_buffering即可。

如下：

`

server {
listen 80;
server_name admin.xinlebao.com;
location / {
proxy_pass http://loc