前端性能優化--合併請求

時間 2019-11-09

原文原文鏈接

測試環境，javascript

　　express 搭建的web服務器css

　　chrome瀏覽器監聽頁面加載速度html

代碼java

　　頁面代碼jquery

<!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>

  <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>
    console.log($,jQuery)
  </script>
</html>

express 的合併代碼服務web

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+='\n'+data.toString()

    }catch(e){
      console.log(e)
    }


  });
  res.send(_fileJS)

});