แก้ Gatsby [v2] ให้สร้างแท็ก <link rel='prefetch'> จากคอมเม้นต์ webpackPrefetch

[dtinth]

ที่มาที่ไปของโจทย์นี้

• เราสามารถทำเว็บให้โหลดเร็วขึ้นโดยการใส่ <link rel="prefetch/preload/prerender/preconnect/dns-prefetch"> เพื่อบอกเบราเซอร์ให้เตรียมโหลดไฟล์เผื่อไว้ใช้ในอนาคต อ่านข้อมูลเพิ่มเติมได้ที่เว็บนี้ครับ: https://css-tricks.com/prefetching-preloading-prebrowsing/

• แต่การต้องมานั่งลิสต์พวกไฟล์ต่างๆ ที่ต้องโหลดด้วยมือเป็นงานที่เหนื่อยมาก จึงมักเป็นหน้าที่ของ Framework ที่จะสร้างแท็ก <link> พวกนี้ให้

• ตัวอย่างเช่น เว็บ React Bangkok 3.0.0 มีการใช้ Gatsby v2 ซึ่งสร้าง <link> แท็กพวกนี้ให้โดยอัตโนมัติ:

  <link rel="preload" href="/3.0.0/static/d/path---index-YgMVy2JJS5mcQ1JxiGrypWcq9U.json" as="fetch" crossOrigin="use-credentials"/>
  <link as="script" rel="preload" href="/3.0.0/component---src-pages-index-jsx-f968477afa4e80f9b9ee.js"/>
  <link as="script" rel="preload" href="/3.0.0/0-7f890f8c04b440c6714b.js"/>
  <link as="script" rel="preload" href="/3.0.0/app-62a4f1198438e5cb738b.js"/>
  <link as="script" rel="preload" href="/3.0.0/webpack-runtime-5d74fac95122c14ed750.js"/>

• การทำเว็บให้โหลดเร็ว อีกท่านึงที่ใช้บ่อยคือการทำ Code splitting ด้วย “Dynamic import()” ทำให้ไม่ต้องโหลดโค้ดทั้งหมดทีเดียว โหลดเท่าที่ต้องใช้แสดงหน้าแรกก็พอ อ่านได้ที่ https://reactjs.org/docs/code-splitting.html

• เราใช้เทคนิคนี้ในเว็บ React Bangkok 3.0.0 เมื่อคุณกดปุ่ม “Redeem ticket” ตัวเว็บจะโหลดไฟล์ที่จำเป็นสำหรับหน้า Redeem ticket แล้วค่อยแสดงผล แต่ถ้าหากคุณไม่กดปุ่มนี้เลย ก็ไม่จำเป็นต้องโหลดโค้ดนั้นแต่อย่างใด

• แต่นั่นหมายความว่าเวลาคุณจะ Redeem ticket ก็ต้องรอสองครั้ง ครั้งแรกรอให้หน้าเว็บโหลด ครั้งที่สองคือรอให้โค้ดของหน้า Redeem ticket โหลด คงจะดีถ้าเราสามารถบอกเบราเซอร์ว่า “ถ้าว่างแล้วช่วยโหลดโค้ดของหน้า Redeem ticket เผื่อไว้ด้วย ยูสเซอร์อาจจะมากด” ซึ่งจริงๆ ก็ทำได้โดยการใส่ <link rel="prefetch">

• Gatsby v2 ใช้ webpack 4 ซึ่งเวลาเราทำท่า Dynamic import() เราสามารถบอก webpack ได้ด้วย ว่าเราอยากจะ prefetch โค้ดไว้ล่วงหน้า เช่น

  function redeemTicket () {
    import(/* webpackPrefetch: true */ '../redeem')
      .then(redeemPage => showPage(redeemPage))
  }

  อ่านได้ที่ https://medium.com/webpack/link-rel-prefetch-preload-in-webpack-51a52358f84c

  โดยคอมเม้นต์​ /* webpackPrefetch: true */ จะเอา URL ของไฟล์ที่แยกออกไป expose ออกมาทาง build stats ซึ่งพวก static site generator สามารถอ่านข้อมูลนี้ เพื่อนำมาสร้าง <link rel="prefetch">

• ปัญหาคือตอนนี้ Gatsby v2 ยังไม่อ่านข้่อมูลนี้ ผมจึงไปเปิด Issue ไว้ที่ Repo ของ Gatsby: [v2] Generate <link rel='prefetch/preload'> based on /* webpackPrefetch/webpackPreload */ comments gatsbyjs/gatsby#5683

Task

ส่ง Pull request เพื่อแก้ Issue gatsbyjs/gatsby#5683

[connor]

โปรดอ่านก่อน

Issue นี้ จะเปิดให้จองตอน Tue Jun 05 2018 17:00:00 GMT+0700 (+07)

1. จอง issue โดย comment คำว่า “แย่งบัตรไม่ทัน งั้นขอจอง issue นี้นะ” ใน issue โดยผู้ได้สิทธิการทำ issue นั้นคือผู้ที่ comment คนแรกสุด และ timestamp ต้องเป็นภายหลังเวลาเริ่มจองเท่านั้น
2. เมื่อถึงคิว ให้ส่ง pull request โดย prefix ว่า [WIP] (Work in progress) และนำ URL ของ pull request มาใส่ในคอมเม้นต์เพื่อยืนยันการจอง ภายใน 1 ชั่วโมง โดยขอสงวนสิทธิ์ในการมอบหมายงานให้คนถัดไปที่อยู่ในคิว หากไม่พบ pull request ภายใน 1 ชั่วโมง
3. ให้ update pull request (push commit เพิ่ม) อย่างน้อยทุกวันเพื่อทีมงานจะได้เข้าไปให้ feedback ได้ตั้งแต่ต้น ถ้า pull request ไม่ได้ update ทุกวัน ทีมงานขอสงวนสิทธิในการปิด (close) pull request และให้สิทธิท่านถัดไปที่จอง โดยจะมีระบบแจ้งเตือนก่อนหมดวัน
4. มีเวลา 5 วัน (120 ชั่วโมง) หลังจากเวลาที่จอง ในการทำ issue ให้สำเร็จ โดยจะถือว่าเสร็จสิ้นภารกิจเมื่อ pull request นั้นถูก merge โดยทีมงาน ดังนั้นควรเผื่อเวลาให้ทีมงานตรวจสอบและ feedback ไว้ด้วย (ในกรณีที่เป็น issue ที่เกี่ยวข้องกับ repository ภายนอก ให้ถือว่าทำสำเร็จเมื่อ pull request นั้นถูก merge โดยทีมที่ดูแล repository นั้น ๆ หรือทีมงาน React Bangkok approve โดยการปิด issue)
5. หลังจากที่ทำภารกิจเสร็จสิ้น และ issue ของ reactbkk ถูกปิดเรียบร้อย ให้เข้าไปที่ https://reactbkk.com/3.0.0/#free-tickets เพื่อรับรหัสในการรับบัตรเข้างานฟรี
6. สงวนสิทธิ 1 account ต่อ 1 issue เท่านั้น กล่าวคือไม่สามารถเป็นเจ้าของ issue ได้มากกว่า 1 อันในช่วงเวลาใดเวลาหนึ่ง และไม่สามารถเป็นเจ้าของ issue อื่นได้ หากได้ทำภารกิจสำเร็จไปแล้ว (แต่สามารถจองคิวในหลายๆ issue พร้อมๆ กันได้ โดยหากคุณถืองานอยู่แล้วเมื่อถึงคิว ระบบจะข้ามคิวของคุณให้โดยอัตโนมัติ)

connor[bot] is hosted by Bangmod.Cloud.

Internal state

{
  "processedComments": {
    "394809424": true,
    "395018806": true,
    "395033911": true,
    "395330194": true,
    "395334105": true,
    "396876747": true,
    "397341430": true,
    "397377818": true,
    "397583988": true,
    "397869288": true,
    "397884861": true
  },
  "startAt": "2018-06-05T10:00:00.000Z",
  "informationCommentId": 394636766,
  "queuedUsers": [],
  "active": {
    "invalid": "pull request ถูกปิด",
    "startedAt": "2018-06-14T15:45:21.548Z",
    "pullRequestAbsenceWarned": true,
    "username": "Pistachiology",
    "pullRequest": {
      "repo": "gatsby",
      "owner": "gatsbyjs",
      "number": 5901
    }
  }
}

[PanJ]

แย่งบัตรทัน งั้นไม่จอง issue นี้นะ

[gkawin]

แย่งบัตรไม่ทัน งั้นขอจอง issue นี้นะ

[connor]

@gkawin คุณได้รับมอบหมายในการทำ Issue นี้แล้ว~ 😃

กรุณาเปิด pull request โดย prefix ว่า [WIP] (Work in progress) และนำ URL ของ pull request มาใส่ในคอมเม้นต์เพื่อยืนยันการจอง ภายใน 1 ชั่วโมง โดยขอสงวนสิทธิ์ในการมอบหมายงานให้คนถัดไปที่อยู่ในคิว หากไม่พบ pull request ภายใน 1 ชั่วโมง

[connor]

@gkawin คุณยังไม่ได้ยืนยันการจองโดยการนำ URL ของ pull request มาคอมเม้นต์ใน issue นี้ภายใน 1 ชั่วโมง หากคุณยังไม่ยืนยันการจองและมีคนมาจองต่อ ทางเราขอสงวนสิทธิ์ในการมอบหมายงานให้คนถัดไปนะครับ

[gkawin]

ใจร้อนจริงๆ
gatsbyjs/gatsby#5748

[connor]

@gkawin คุณได้ยืนยันการจองเรียบร้อยแล้ว

อย่าลืม update pull request (push commit เพิ่ม) อย่างน้อยทุกวัน เพื่อทีมงานจะได้เข้าไปให้ feedback ได้เรื่อย ๆ ถ้าวันไหนคุณไม่ได้ update pull request ทีมงานขอสงวนสิทธิในการปิด pull request นั้น และให้สิทธิท่านถัดไปที่จอง โดยระบบจะแจ้งเตือนในเวลา 22:00 ถ้าหากวันนั้นคุณยังไม่ได้ update pull request

[gkawin]

@dtinth รบกวน Review ให้ด้วยครับ ขอบคุณครับ
gatsbyjs/gatsby#5748

[dtinth]

@gkawin Reviewed

[connor]

@gkawin เราพบว่า pull request ของคุณไม่ถูกต้อง เนื่องจาก pull request ถูกปิด กรุณาเปิด pull request ใหม่ และทำงานยืนยันการจองอีกครั้ง โดยให้นำ URL ของ pull request ใหม่มาคอมเม้นต์ครับ

[dtinth]

This issue is now available for anyone to pick up.

[pistachiology]

แย่งบัตรไม่ทัน งั้นขอจอง issue นี้นะ

[connor]

@gkawin เนื่องจากคุณไม่ได้ยืนยันการจองภายใน 1 ชั่วโมง จึงขอสงวนสิทธิ์มอบหมายงานนี้ให้คนถัดไปนะครับ

@pistachiology คุณได้รับมอบหมายในการทำ Issue นี้แล้ว~ 😃

กรุณาเปิด pull request โดย prefix ว่า [WIP] (Work in progress) และนำ URL ของ pull request มาใส่ในคอมเม้นต์เพื่อยืนยันการจอง ภายใน 1 ชั่วโมง โดยขอสงวนสิทธิ์ในการมอบหมายงานให้คนถัดไปที่อยู่ในคิว หากไม่พบ pull request ภายใน 1 ชั่วโมง

[connor]

@pistachiology คุณยังไม่ได้ยืนยันการจองโดยการนำ URL ของ pull request มาคอมเม้นต์ใน issue นี้ภายใน 1 ชั่วโมง หากคุณยังไม่ยืนยันการจองและมีคนมาจองต่อ ทางเราขอสงวนสิทธิ์ในการมอบหมายงานให้คนถัดไปนะครับ

[pistachiology]

Pull Request: #5901

[connor]

@pistachiology คุณได้ยืนยันการจองเรียบร้อยแล้ว

อย่าลืม update pull request (push commit เพิ่ม) อย่างน้อยทุกวัน เพื่อทีมงานจะได้เข้าไปให้ feedback ได้เรื่อย ๆ ถ้าวันไหนคุณไม่ได้ update pull request ทีมงานขอสงวนสิทธิในการปิด pull request นั้น และให้สิทธิท่านถัดไปที่จอง โดยระบบจะแจ้งเตือนในเวลา 22:00 ถ้าหากวันนั้นคุณยังไม่ได้ update pull request

[dtinth]

@pistachiology เนื่องจากทีมงานจะต้องสรุปยอดผู้เข้าร่วมงานภายในวันนี้ เพื่อจัดพิมพ์ป้ายชื่อ เราจึงขอแจก redeem code ให้กับผู้ที่ confirm การจอง issue นี้ โดยกรุณาเข้าไปกรอกรายละเอียดใน Event Pop ก่อนวันนี้ เวลา 18.00 ครับผม

สามารถเข้าไปรับ Redeem code ที่ https://reactbkk.com/3.0.0/ ได้เลยครับบ

[pistachiology]

@dtinth merged เรียบร้อยแล้วนะครับ

[dtinth]

Thanks for the notification! Congrats on your first contribution to a popular OSS project :D