静态文件服务器实现
nodejs不仅仅可以用来写服务端接口，用来做静态文件服务器替代nginx的功能， 也是分分钟可以搞定的。 话不多说，先上代码：
var server=http.createServer(function (req,res){
fs.createReadStream(Path.resolve(__dirname,"."+req.url)).pipe(res);
})在项目根目录建一个hello.
hello,world
我们再回头审视一下代码，的确就只有这么简单，这要归功于
http.ServerResponse类的继承关系如下：
安全性考虑
上述代码实现静态文件服务器后，意味着项目根目录下所有的文件(递归)都可以通过浏览器直接访问和下载了，这样会带来一些安全性的问题，想想看，你的服务器端代码和配置文件都能通过浏览器直接下载了，因此需要在代码里加一些限制，例如只能访问特定的目录下的文件和特定扩展名的文件，这样还不够，参考OWasp Top 10安全风险(第4条-不安全的对象直接引用),攻击者仍然可以通过../../目录回溯的方法访问到其它目录，对于访问路径中包含..的也要全部过滤掉。
实现mine type
mime type是指http 响应头中的content-type字段，它决定了浏览器如何解析文件，是直接当做纯文件显示(text/plain)，还是做为html文件渲染(text/html)，或者当做二进制文件下载，没有输出正确的mine type，可能导致图片文件无法显示，字体文件无效，视频文件无法播放的问题。要实现起来也十分简单，只需要做一个映射表，不同文件扩展名，在响应头的content-type字段中输出对应的mine type就行了。
完整代码如下：
const http=require("http");
const Path=require("path");
const fs=require("fs");
var server=http.createServer(function (req,res){
const fileName=Path.resolve(__dirname,"."+req.url);
const extName=Path.extname(fileName).substr(1);
if (fs.existsSync(fileName)) { //判断本地文件是否存在
var mineTypeMap={
html:'text/html;charset=utf-8',
htm:'text/html;charset=utf-8',
xml:"text/xml;charset=utf-8",
png:"image/png",
jpg:"image/jpeg",
jpeg:"image/jpeg",
gif:"image/gif",实现gzip
对于文本类型的文件，如html,
代码如下：
const zlib = require('zlib');
if (req.headers["accept-encoding"].indexOf("gzip")>=0 && (extName=="js" || extName=="客户端缓存
http协议的缓存协商流程比较长，最终在响应头中生成expire(绝对时间)和cache-control(相对时间)两个用于控制缓存过期时间的参数，浏览器下次请求该文件时，分为以下几种情况：
如果没到过期时间，浏览器不会请求文件直接读
如果已到过期时间，则会在请求头中last-modified字段携带文件的最后修改日期，如果对比时间戳与服务器文件一致，则HTTP 返回 304: Not Modified
如果按下f5刷新，会在请求头中if-modified-since字段中携带
ctrl+f5刷新，请求头中携带 cache-control: no-cache，强制禁用缓存。重新下载文件
逻辑分支较多，但都是日期比对，搞清楚缓存协商过程比较容易写出来，有兴趣的同学可以自行实现
高性能静态文件服务器优化
如果要做一个高性能的静态文件服务器仅实现gzip和缓存协商是不够的，涉及到本地文件的频繁读取，高并发下I/O必定成为瓶颈，考虑到服务器上的文件是很少更新的， 可以用Buffer把文件流缓存到内存中，每次请求时先在内存中查找匹配项，如果命中了直接从内存中返回，避免了读取磁盘，gzip也不用压缩了，直接用压缩好的文件流返回，可以成倍的大幅提升性能。当然如果文件太多了，内存也会飙升，需要考虑淘汰算法，只缓存访问次数高的文件，剔除低访问量的文件。
采用fs.watch监控目录文件的变化，如果文件有更新，则删掉缓存。
小结
最后，推荐一下个人的开源项目， 开发框架，已包含本文静态文件服务器的功能 webcontext: https://github.com/windyfancy/webcontext
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持前端开发者。
