Webpack(二十三)：合并资源请求, 实现combo功能

本文学习使用nodejs实现css或js资源文件的合并请求功能，我们都知道在一个复杂的项目当中，可能会使用到很多第三方插件，虽然目前使用vue开发系统或者h5页面，vue组件够用，但是有的项目中会使用到类似于echarts这样的插件，或者第三方其他的插件，比如ztree.js这样的，那如果我们把所有js都打包到一个js文件当中，那么该js可能会变得非常大，或者我们可能会把他们单独打包一个个js文件去，然后在页面中分别一个个使用script标签去引入他们，但是这样会导致页面多个js请求。因此就想使用node来实现类似于combo功能，比如以下的js功能构造：

http://127.0.0.1:3001/jsplugins/??a.js,b.js

如上的js请求，会把a.js和b.js合并到一个请求里面去， 然后使用node就实现了combo功能。
首先我们来分析下上面的请求，该请求中的 ?? 是一个分隔符，分隔符前面是合并的文件路径，后面是合并资源文件名，多个文件名使用逗号(,)隔开，知道了该请求的基本原理之后，我们需要对该请求进行解析，解析完成后，分别读取该js文件内容，然后分别读取到内容后合并起来输出到浏览器中。

首先看下我们项目简单的目录架构如下：

### 目录结构如下：
demo1                                       # 工程名           
|   |--- node_modules                       # 所有的依赖包
|   |--- jsplugins
|   | |-- a.js
|   | |-- b.js
|   |--- app.js
|   |--- package.json

项目截图如下：

jsplugins/a.js 内容如下：

function testA() {
  console.log('A.js');  
}

jsplugins/b.js 内容如下：

function testB() {
  console.log('b.js');
}

当我们访问 http://127.0.0.1:3001/jsplugins/??a.js,b.js 请求后，资源文件如下：

如何实现呢？

app.js 一部分代码如下：

// 引入express模块
const express = require('express');

const fs = require('fs');
const path = require('path');

// 创建app对象
const app = express();

app.use((req, res, next) => {
  const urlInfo = parseURL(__dirname, req.url);
  console.log(urlInfo);
  if (urlInfo) {
    // 合并文件
    combineFiles(urlInfo.pathnames, (err, data) => {
      if (err) {
        res.writeHead(404);
        res.end(err.message);
      } else {
        res.writeHead(200, {
          'Content-Type': urlInfo.mime
        });
        res.end(data);
      }
    });
  }
});


// 定义服务器启动端口 
app.listen(3001, () => {
  console.log('app listening on port 3001');
});

如上代码，使用express实现一个简单的，端口号为3001的服务器，然后使用 app.use模块截取请求，比如我们现在在浏览器中访问 http://127.0.0.1:3001/jsplugins/??a.js,b.js 这个请求的时候，会对该请求进行解析，会调用 parseURL方法，该方法的代码如下：

let MIME = {
  '.css': 'text/css',
  '.js': 'application/javascript'
};

// 解析文件路径
function parseURL(root, url) {
  let base, 
    pastnames,
    separator;
  if (url.indexOf('??') > -1) {
    separator = url.split('??');
    base = separator[0];

    pathnames = separator[1].split(',').map((value) => {
      const filepath = path.join(root, base, value);
      return filepath;
    });
    return {
      mime: MIME[path.extname(pathnames[0])] || 'text/plain',
      pathnames: pathnames
    }
  }
  return null;
};

如上代码，给parseURL函数传递了两个参数，一个是 __dirname 和 req.url, 其中__dirname就是当前app.js文件的所在目录，因此会打印出该目录下全路径：/Users/tugenhua/个人demo/webpack-all-demo2/webpack-all-demo/webpack+node合并js资源请求文件， req.url返回的是url中的所有信息，因此 req.url='/jsplugins/??a.js,b.js', 然后判断url中是否有 ?? 这样的，找到的话，就使用 ?? 分割，如下代码：

separator = url.split('??');
base = separator[0];

因此 base = '/jsplugins/', separator[1] = a.js,b.js了，然后再进行对 separator[1] 使用逗号(,) 分割变成数组进行遍历a.js和b.js了，遍历完成后，如代码 const filepath = path.join(root, base, value); 使用path.join()对路径进行合并，该方法将多个参数值字符串结合为一个路径字符串，path.join基本使用，看我这篇文章
(https://www.cnblogs.com/tugenhua0707/p/9944285.html#_labe1),

root = '/Users/tugenhua/个人demo/webpack-all-demo2/webpack-all-demo/webpack+node合并js资源请求文件'
base = '/jsplugins/';
value = 'a.js' 或 value = 'b.js';

因此 pathnames 的值最终变成如下的值：

[ '/Users/tugenhua/个人demo/webpack-all-demo2/webpack-all-demo/webpack+node合并js资源请求文件/jsplugins/a.js',
  '/Users/tugenhua/个人demo/webpack-all-demo2/webpack-all-demo/webpack+node合并js资源请求文件/jsplugins/b.js' ]

执行完parseURL后返回的是如下对象：

{ 
  mime: 'application/javascript',
  pathnames:
   [ '/Users/tugenhua/个人demo/webpack-all-demo2/webpack-all-demo/webpack+node合并js资源请求文件/jsplugins/a.js',
     '/Users/tugenhua/个人demo/webpack-all-demo2/webpack-all-demo/webpack+node合并js资源请求文件/jsplugins/b.js' 
   ] 
}

path.extname 的使用可以看如下这篇文章(https://www.cnblogs.com/tugenhua0707/p/9944285.html#_labe4),就是拿到路径的扩展名，那么拿到的扩展名就是 .js, 然后 mime = MIME[path.extname(pathnames[0])] || 'text/plain', 因此 mine = 'application/javascript' 了。

返回值后，就会执行如下代码：

if (urlInfo) {
  // 合并文件
  combineFiles(urlInfo.pathnames, (err, data) => {
    if (err) {
      res.writeHead(404);
      res.end(err.message);
    } else {
      res.writeHead(200, {
        'Content-Type': urlInfo.mime
      });
      res.end(data);
    }
  });
}

先合并文件，文件合并后，再执行回调，把合并后的js输出到浏览中，先看下 combineFiles 函数的方法代码如下：

//合并文件
function combineFiles(pathnames, callback) {
  const output = [];
  (function nextFunc(l, len){
    if (l < len) {
      fs.readFile(pathnames[l], (err, data) => {
        if (err) {
          callback(err);
        } else {
          output.push(data);
          nextFunc(l+1, len);
        }
      })
    } else {
      const data = Buffer.concat(output);
      callback(null, data);
    }
  })(0, pathnames.length);
}

首先该方法传了 pathnames 和callback回调，其中pathnames的值是如下：

[ '/Users/tugenhua/个人demo/webpack-all-demo2/webpack-all-demo/webpack+node合并js资源请求文件/jsplugins/a.js',
  '/Users/tugenhua/个人demo/webpack-all-demo2/webpack-all-demo/webpack+node合并js资源请求文件/jsplugins/b.js' 
]

然后一个使用立即函数先执行，把 0, 和 长度参数传递进去，判断是否小于文件的长度，如果是的话，就是 fs中的读取文件方法 (readFile), 就依次读取文件，对 readFile读取文件的方法不熟悉的话，可以看这篇文章(https://www.cnblogs.com/tugenhua0707/p/9942886.html#_labe0), 读取完后使用 Buffer.concat进行拼接。最后把数据传给callback返回到回调函数里面去，执行回调函数，就把对应的内容输出到浏览器中了。

注意：
1. 使用 fs.readFile 方法，如果没有设置指定的编码，它会以字节的方式读取的，因此使用Buffer可以进行拼接。
2. 使用Buffer.concat拼接的时候，如果a.js或b.js有中文的话，会出现乱码，出现的原因是如果js文件是以默认的gbk保存的话，那么我们nodejs默认是utf8读取的，就会有乱码存在的，因此js文件如果是本地的话，尽量以utf8保存。如果不是utf8保存的话，出现了乱码，我们需要解决，下一篇文章就来折腾下 Buffer出现乱码的情况是如何解决的。

因此整个app.js 代码如下：

// 引入express模块
const express = require('express');

const fs = require('fs');
const path = require('path');

// 创建app对象
const app = express();

app.use((req, res, next) => {
  const urlInfo = parseURL(__dirname, req.url);
  console.log(urlInfo);
  if (urlInfo) {
    // 合并文件
    combineFiles(urlInfo.pathnames, (err, data) => {
      if (err) {
        res.writeHead(404);
        res.end(err.message);
      } else {
        res.writeHead(200, {
          'Content-Type': urlInfo.mime
        });
        res.end(data);
      }
    });
  }
});

let MIME = {
  '.css': 'text/css',
  '.js': 'application/javascript'
};

// 解析文件路径
function parseURL(root, url) {
  let base, 
    pastnames,
    separator;
  if (url.indexOf('??') > -1) {
    separator = url.split('??');
    base = separator[0];

    pathnames = separator[1].split(',').map((value) => {
      const filepath = path.join(root, base, value);
      return filepath;
    });
    return {
      mime: MIME[path.extname(pathnames[0])] || 'text/plain',
      pathnames: pathnames
    }
  }
  return null;
};

//合并文件
function combineFiles(pathnames, callback) {
  const output = [];
  (function nextFunc(l, len){
    if (l < len) {
      fs.readFile(pathnames[l], (err, data) => {
        if (err) {
          callback(err);
        } else {
          output.push(data);
          nextFunc(l+1, len);
        }
      })
    } else {
      const data = Buffer.concat(output);
      callback(null, data);
    }
  })(0, pathnames.length);
}
// 定义服务器启动端口 
app.listen(3001, () => {
  console.log('app listening on port 3001');
});
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 220,137评论 6赞 511
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 93,824评论 3赞 396
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 166,465评论 0赞 357
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 59,131评论 1赞 295
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 68,140评论 6赞 397
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,895评论 1赞 308
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,535评论 3赞 420
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,435评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,952评论 1赞 319
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,081评论 3赞 340
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,210评论 1赞 352
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,896评论 5赞 347
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,552评论 3赞 331
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,089评论 0赞 23
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,198评论 1赞 272
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,531评论 3赞 375
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 45,209评论 2赞 357