RequireJS - เครื่องมือเพิ่มประสิทธิภาพ

ในบทนี้เราจะพูดถึงการเพิ่มประสิทธิภาพใน RequireJS Optimizer ใน RequireJS มีลักษณะดังต่อไปนี้ -

รวมไฟล์สคริปต์เข้าด้วยกันด้วยความช่วยเหลือของUglifyJSสำหรับการใช้งานดีฟอลต์หรือClosure Compilerสำหรับการใช้งาน Java
รวมไฟล์ CSS เข้าด้วยกัน

เครื่องมือเพิ่มประสิทธิภาพเป็นส่วนประกอบของไฟล์ r.jsอะแดปเตอร์สำหรับNode และ Nashorn ได้รับการพัฒนาเพื่อเป็นส่วนหนึ่งของกระบวนการสร้างไม่ใช่สำหรับกระบวนการพัฒนา

ตัวอย่าง

หลังจากดาวน์โหลดr.jsในโฟลเดอร์โครงการของคุณโครงสร้างของโฟลเดอร์ควรมีลักษณะดังที่ระบุด้านล่าง -

projectfolder/
   |-->index.html
   |-->CSS/
      |--->main.css
      |--->other.css
   |-->libs
      |--->require.js
      |--->main.js
         |--->dependent1.js
         |--->dependent2.js
         |--->dependent3.js

ไฟล์ HTML ของคุณจะมีลักษณะดังที่แสดงด้านล่าง -

<html>
   <head>
      <script data-main = "libs/main" src = "libs/require.js"></script>
   </head>
   
   <body>
      <h1> RequireJS Sample Page </h1>
   </body>
</html>

ไฟล์main.jsของคุณจะมีลักษณะดังที่แสดงด้านล่าง -

require(["dependent1", "dependent2", "dependent3"], function (dependent1, dependent2, 
   dependent3) {
});

ไฟล์main.cssของคุณจะมีลักษณะดังที่แสดงด้านล่าง -

@import url("other.css");

.app {
   background: transparent url(../../img/app.png);
}

การตั้งค่าพื้นฐานของเครื่องมือเพิ่มประสิทธิภาพ

คุณสามารถใช้อาร์กิวเมนต์บรรทัดคำสั่งหรือคุณสมบัติการสร้างโปรไฟล์สำหรับการตั้งค่าโปรเจ็กต์ซึ่งทั้งสองสามารถแลกเปลี่ยนกันได้

ต่อไปนี้เป็นไวยากรณ์สำหรับบรรทัดคำสั่ง -

node r.js -o baseUrl = . paths.jquery = content/path/jquery 
   name = main out = main-built.js

ต่อไปนี้เป็นไวยากรณ์สำหรับการสร้างโปรไฟล์ -

({
   baseUrl: ".",
  
   paths: {
      jquery: "content/path/jquery"
   },
   
   name: "main",
   out: "main-built.js"
})

หลังจากนี้คุณสามารถส่งต่อชื่อโปรไฟล์การสร้างไปยังเครื่องมือเพิ่มประสิทธิภาพในบรรทัดคำสั่งดังที่แสดงด้านล่าง -

node r.js -o build.js

มีข้อบกพร่องบางประการในไวยากรณ์อาร์กิวเมนต์บรรทัดคำสั่ง การใช้อาร์กิวเมนต์บรรทัดคำสั่งหรือคุณสมบัติการสร้างโปรไฟล์ร่วมกันสามารถเอาชนะข้อบกพร่องเหล่านี้ได้

การเพิ่มประสิทธิภาพไฟล์ JS เดียว

ในการเพิ่มประสิทธิภาพไฟล์ JS เดียวคุณต้องสร้างไฟล์ JS ที่มีเนื้อหาของการอ้างอิงทั้งหมด ไฟล์ของคุณควรมีลักษณะดังที่ระบุด้านล่าง -

({
   baseUrl: "js/shop",
   paths: {
      "jquery": "jquery",
      "backbone": "backbone",
      "underscore": "underscore"
   },
   
   shim: {
      "backbone": {
         "department": ["underscore", "jquery"],
         "dependent": "Backbone"  
      },
      
      "underscore": {
         exports: "_" 
      }
   },
   
   name: "../main",
   out: "../built/js/main.js"
})

ตอนนี้คุณสามารถสร้างไฟล์main.jsซึ่งมีการอ้างอิงทั้งหมดสำหรับแอพ ไฟล์นี้ใช้ในไฟล์ HTML เพื่อโหลดไฟล์ JS ทั้งหมดด้วยคำขอเดียว โปรดทราบว่าไฟล์ที่สร้างไม่ควรอยู่ในไดเร็กทอรีซอร์สโค้ด ไฟล์ควรอยู่ในสำเนาของโครงการ

การใช้ทรัพยากร CDN

เครื่องมือเพิ่มประสิทธิภาพไม่โหลดสคริปต์โดยใช้ทรัพยากรเครือข่าย / CDN (Content Delivery Network) ในกรณีที่สคริปต์ต้องโหลดโดยใช้ CDN จากนั้นคุณต้องแม็พไฟล์เหล่านี้กับชื่อโมดูลและดาวน์โหลดไฟล์ไปยังพา ธ ไฟล์ในเครื่องของคุณ คุณสามารถใช้คำพิเศษ "ว่าง" ในการกำหนดค่าพา ธ ของโปรไฟล์บิลด์ดังที่แสดงในไวยากรณ์ต่อไปนี้ -

({
   baseUrl: "js",
   name: "mainCDN",
   out: "js/mainCDN-built.js",
   
   paths: {
      jquery: "empty:"
   }
   
})

ไฟล์หลักจะมีลักษณะดังภาพด้านล่าง -

requirejs.config({
   paths: {
      'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min'
   }
});

require(['jquery'], function ($) {
});

การเพิ่มประสิทธิภาพไฟล์ CSS เดี่ยว

ไฟล์ CSS ได้รับการปรับให้เหมาะสมโดยใช้พารามิเตอร์ต่อไปนี้โดยตรงในบรรทัดคำสั่งดังที่แสดงด้านล่าง -

node ../../r.js -o cssIn = main.css out = main-built.css

ไฟล์ CSS ยังสามารถปรับให้เหมาะสมในไฟล์บิลด์โดยใช้คุณสมบัติเดียวกันดังที่แสดงด้านล่าง -

...
cssIn:"main.css",
out:"main-built.css"
...

ทั้งสองวิธีการดังกล่าวจะได้รับอนุญาตและจะสร้างไฟล์ที่เรียกว่าprojectfolder css / / mainbuild.css ไฟล์นี้จะมีเนื้อหาของ main.css เส้นทาง url () ได้รับการปรับแต่งอย่างเหมาะสมและความคิดเห็นจะถูกลบออก

การเพิ่มประสิทธิภาพทั้งโครงการ

เครื่องมือเพิ่มประสิทธิภาพใช้โปรไฟล์การสร้างเพื่อเพิ่มประสิทธิภาพ css และ jsไฟล์. ในตัวอย่างต่อไปนี้ไฟล์build.jsถูกสร้างขึ้น

({
   baseUrl: "js/shop",
   appDir: '.',
   paths: {
      "jquery": "jquery",
      "backbone": "backbone",
      "underscore": "underscore"
   },
   
   shim: {
      "backbone": {
         "deps": ["underscore", "jquery"],
         "exports": "Backbone"  
      },
      
      "underscore": {
         exports: "_" 
      }
   },
   
   optimizeCss: "standard.keepLines",
   modules: [
      {
         name: "app"
      }
   ],
   
   dir: "../built"
})

build.jsไฟล์สั่ง RequireJS เพื่อคัดลอกโฟลเดอร์แอป (appDir พารามิเตอร์) เพื่อโฟลเดอร์ออกตัว (พารามิเตอร์ dir) และนำไปใช้เพิ่มประสิทธิภาพทั้งหมดไปยังไฟล์ที่อยู่ในโฟลเดอร์ออก เรียกใช้คำสั่งต่อไปนี้เพื่อสร้างโปรไฟล์ในโฟลเดอร์แอพ -

node r.js -o build.js