node-express脚手架生成的项目中实现浏览器缓存文档说明

前言:

最近在做基于node-express的个人站点,在站点发布之后自己在访问测试的过程中发现站点是没有缓存机制的,这样就导致每次访问站点都需要重新去加载资源,很消耗资源以及用户体验也不是很好.

因为站点有上述问题,所以就着手去解决这个问题,解决方法就是通过浏览器缓存来实现。解决过程也是一波三折,最开始想的是通过设置最大过期时间maxage来实现,但是做完测试过程中发现通过这种方法添加浏览器缓存之后,当服务重启之后浏览器缓存依旧存在,而且必须通过手动清空缓存才可以使文件更改的内容生效。

设置过期时间 maxage无法解决问题就只能继续找解决方法,通过了解浏览器缓存机制发现了第二种方法,就是通过Last-Modified实现,现将具体的实现过程记录如下。

node-express通过脚手架生成的项目目录结构如下:

bin下的www是项目入口

node_moduls项目所需模块

public静态资源,如图片,js,css

routes路由文件

views页面文件

app.js项目需要的中间件等基本配置

package.json定义项目的基本信息等,包括项目所需要的模块名和版本号通

通过设置maxage实现浏览器缓存。

app.use(express.static(myStaticPath, {
    maxage: '2h'
}))

通过express.static()来设置浏览器缓存仅仅只是设置了过期时间,不能够保证服务重启之后浏览器缓存失效,实际项目中发现服务重启之后必须要手动清空浏览器缓存之后才能够将更改的文件正确显示,用户体验不好。

通过设置Last-Modified实现浏览器缓存

Last-Modified实现浏览器缓存原理:浏览器第一次向服务端发送请求时,服务端会返回一个带有Last-Modified: Sat, 02 Dec 2019 09:03:12 GMT字段的响应头,表明所请求的文件最新修改时间;当浏览器下一次向服务端发送请求时,请求头会带上If-Modified-Since: Sat, 02 Dec 2019 09:03:18 GMT字段,该字段的值是上一次服务器Last-Modified返回的值,服务器接收到请求后会根据If-Modified-Since值进行判断,如果该值小于服务器文件的值则返回新的文件,否则就告诉浏览器使用缓存文件。

node-express生成的代码结构中创建服务的代码被集合在app.js中,这样的话我们设置Last-Modified就需要在app.js中设置。app.js中有一段处理 404 错误的代码段,我们可以把设置Last-Modified集合到这段代码中。

未添加Last-Modified代码的 404 错误处理代码段如下:

app.use(function (req, res. next) {
    var err =  new Error('Not Found');
    err.status = 404;
    next(err);   
})

添加Last-Modified处理的 404 错误处理代码段如下:

app.use(function (req, res. next) {
    var pathname = url.parse(req.url).pathname ;
    // 获取文件日期
    fs.stat('.' + pathname, (err, stat) => {
        if(err) {
            var err =  new Error('Not Found');
            err.status = 404;
            next(err);
        }else {
            if (req.headers['if-modified-since']) {
                // 浏览器 if-modified-since 字段值
                var oDate = new Date(req.headers['if-modified-since']);
                var time_client = Math.floor(oDate.getTime() / 1000);
                // 服务端文件最新修改时间
                var time_server = Math.floor(stat.mtime.getTime() / 1000);
                if (time_client < time_server) {
                    // 浏览器缓存文件的修改时间小于服务端文件修改时间,发送文件
                    sendFileToClient();
                }else {
                    // 浏览器缓存文件的修改时间等于或大于服务器文件的修改时间
                    // 发送 304 状态码,告知浏览器从缓存中读取数据
                    res.writeHeader(304);
                    res.write('Not Modified');
                    res.end();
                }
            }else {
                // 浏览器是第一次请求该文件,不存在 if-modified-since 字段
                // 从服务器端读取文件
                sendFileToClient();
            }
            function sendFileToClient() {
                var rs = fs.createReadStream(`.${pathname}`);
                // 设置请求头 Last-Modified 字段,值为该文件最新修改时间
                res.setHeader('Last-Modified', stat.mtime.toGMTString());
                // 输出
                rs.pipe(res);
                rs.on('error', err => {
                    var err =  new Error('Not Found');
                    err.status = 404;
                    next(err);
                });
            }
        }
    })
})

后话:

通过设置Last-Modified根本上解决了浏览器缓存文件更改后无法感知更新的问题,无论是访问速度还是用户体验上都有了很大的提高