测试环境，
express 搭建的web服务器
chrome浏览器监听页面加载速度
代码
页面代码
<!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <h1><%= title %></h1> <p>Welcome to <%= title %></p> </body>
<!-- 分别加载js -->
<script src="/js/extend.js"></script> <script src="/js/jquery-1.12.4.js"></script> <script src="/js/jquery.min.js"></script> <script src="/js/validform_v5.3.2.js"></script> <script src="/js/wechatLink-1.1.js"></script>
<!-- 合并加载js
<script src="/js/extend.js,jquery-1.12.4.js,jquery.min.js,validform_v5.3.2.js,wechatLink-1.1.js"></script>
-->
<script> console.log($,jQuery) </script> </html>
express 的合并代码服务
router.get('/js/:js', function(req, res, next) {
console.log(req.params.js)
// 解析多个js文件
var fsArr = req.params.js.split(',')
var _fileJS = ''
fsArr.forEach(element => {
// 同步读取
try{
var data = fs.readFileSync(path.join(__dirname,'../public/javascripts/',element));
_fileJS+='
'+data.toString()
}catch(e){
console.log(e)
}
});
res.send(_fileJS)
});
看不懂没关系，看结果就好了
结果
分别加载时即使是同时请求加载时长为137ms
合并请求时 只需要56ms
合并请求js资源 比分开请求少近一半的时间