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

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

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

global-styling:
  version: VERSION
  js:
    //cdn.jsdelivr.net/npm/slick-carousel@1.8.1/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/slick-carousel@1.8.1/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 tsmc_investor_theme_page_attachments_alter(&$page)
{
    $path = $current_path = \Drupal::service('path.current')->getPath();
    if ($path == '/annual-reports') {
        $page['#attached']['library'][] = 'tsmc_investor_theme/report-toggle-library';
    }
    
}

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

## 結語

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