【D8教學】Drupal8超新手入門開發系列-特定頁面載入JS

前言

若沒有特別區分JS於何時載入的話，基本上網站的每個頁面都會載入，問題是有些JS只針對特定頁面有功效，若每個頁面都載入不是很奇怪，所以本篇將介紹如何切割JS，限制JS只在特定頁面載入，不會在其他頁面載入。

JS.library

Drupal8中正常我們寫完一支JS後會放入your_theme.libraries.yml，範例如下：

global-styling:
  version: VERSION
  js:
    //cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js: { type: external, minified: true }
    //unpkg.com/swiper/js/swiper.min.js: { type: external, minified: true }
    js/ga-event.js: {} 
    js/banner-parallax-scrolling.js: {}
    js/tab-list.js: {}
    js/read-more-toggle.js: {}
    js/fade-in.js: {}

爾後會到yourtheme.info.yml加入此library(global-styling)，範例如下：

name: yourTheme
type: theme
description: 'Theme'
version: 1.0
core: 8.x
base theme: bootstrap_sass

libraries:
  - yourtheme/global-styling

這是正常Drupal管理JS的方式，但這樣會在每個頁面都載入這個global-styling的全部JS。 若要讓JS只在特定頁面載入，我們可以回到yourtheme.libraries.yml建立一個新的library，如下：

global-styling:
  version: VERSION
  js:
    //cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js: { type: external, minified: true }
    //unpkg.com/swiper/js/swiper.min.js: { type: external, minified: true }
    js/ga-event.js: {} 
    js/banner-parallax-scrolling.js: {}
    js/tab-list.js: {}
    js/read-more-toggle.js: {}
    js/fade-in.js: {}

report-toggle-library:
  js: 
    js/report-toggle.js: {}
    js/pdf-target.js: {}

建立一個新的library叫report-toggle-library，這個library內放了兩支JS，接著我們需要使用到Drupal針對Page的page_attachments_alter。

page_attachments_alter

建立新的library後，到yourtheme.theme內加入下面程式碼：

function your_theme_page_attachments_alter(&$page)
{
    $path = $current_path = \Drupal::service('path.current')->getPath();
    if ($path == '/annual-reports') {
        $page['#attached']['library'][] = 'your_theme/report-toggle-library';
    }
    
}

這樣預處理完就能針對符合特定路徑才載入我們所需要的library，其他路徑則不會載入，如此一來就能減少資源的浪費，不會每個頁面都載入一堆JS。

結語

在小型專案上開發JS可能效能上不太會在意，因為JS的量不多，倘若專案規模變大，任何一支JS都有可能影響使用者體驗，確保JS只在正確的頁面載入而不影響其他頁面，這是工程師應該有的基本觀念，期許此篇文章能給你建立良好的開發模式。