หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ข้อมูลเว็บไซต์
ดาวน์โหลด

preload-webpack-plugin

เลิกใช้แล้ว: ส้อมของโครงการนี้ https://github.com/vuejs/preload-webpack-plugin สามารถใช้แทนได้

ปลั๊กอิน webpack สำหรับการเดินสายแบบอะซิงโครนัสโดยอัตโนมัติ (และประเภทอื่น ๆ ) ของชิ้น JavaScript โดยใช้ <link rel='preload'> สิ่งนี้ช่วยในการโหลดขี้เกียจ

หมายเหตุ: นี่คือปลั๊กอินส่วนขยายสำหรับ html-webpack-plugin ปลั๊กอินที่ทำให้การสร้างไฟล์ HTML ง่ายขึ้นเพื่อให้บริการชุดเว็บแพ็คของคุณ

การแนะนำ

PRELOAD เป็นมาตรฐานเว็บที่มุ่งปรับปรุงประสิทธิภาพและการโหลดทรัพยากรอย่างละเอียด มันเป็นการดึงข้อมูลที่สามารถบอกได้ว่าเบราว์เซอร์เริ่มดึงแหล่งข้อมูลเนื่องจากนักพัฒนารู้ว่าทรัพยากรจะต้องใช้ในไม่ช้า PRELOAD: มันดีสำหรับอะไร? เป็นการอ่านที่แนะนำหากคุณไม่เคยใช้คุณสมบัติมาก่อน

ในเว็บแอพง่าย ๆ มันตรงไปตรงมาเพื่อระบุเส้นทางคงที่ไปยังสคริปต์ที่คุณต้องการโหลดล่วงหน้าโดยเฉพาะอย่างยิ่งหากชื่อหรือสถานที่ของพวกเขาไม่น่าจะเปลี่ยนแปลงได้ ในแอพที่ซับซ้อนมากขึ้น JavaScript สามารถแบ่งออกเป็น "ชิ้น" (ซึ่งแสดงถึงเส้นทางหรือส่วนประกอบ) ที่ชื่อไดนามิก ชื่อเหล่านี้อาจรวมถึงแฮชตัวเลขและคุณสมบัติอื่น ๆ ที่สามารถเปลี่ยนแปลงได้ในแต่ละบิลด์

ตัวอย่างเช่น chunk.31132ae6680e598f8879.js

เพื่อให้ง่ายขึ้นในการเชื่อมต่อแบบ async สำหรับการโหลดขี้เกียจปลั๊กอินนี้นำเสนอวิธีดรอปอินเพื่อให้พวกเขาโดยใช้ <link rel='preload'>

ข้อกำหนดเบื้องต้น

โมดูลนี้ต้องใช้ WebPack V4 ขึ้นไป นอกจากนี้ยังต้องการให้คุณใช้ html-webpack-plugin ในโครงการ WebPack ของคุณ

การติดตั้ง

ก่อนอื่นให้ติดตั้งแพ็คเกจเป็นพึ่งพาใน package.json ของคุณ json: 

$ npm install --save-dev preload-webpack-plugin

การใช้งาน

ในการกำหนดค่า webpack ของคุณ require() ปลั๊กอิน preload ดังนี้: 

 const PreloadWebpackPlugin = require ( 'preload-webpack-plugin' ) ;

และในที่สุดเพิ่มปลั๊กอินลงในอาร์เรย์ plugins ของ WebPack Configuration หลังจาก HtmlWebpackPlugin : 

plugins: [
  new HtmlWebpackPlugin ( ) ,
  new PreloadWebpackPlugin ( )
]

เมื่อโหลดไฟล์ล่วงหน้าปลั๊กอินจะใช้ as ที่แตกต่างกันขึ้นอยู่กับประเภทของแต่ละไฟล์ สำหรับแต่ละไฟล์จะลงท้ายด้วย .css ปลั๊กอินจะโหลดล่วงหน้าด้วย as=style สำหรับแต่ละไฟล์จะลงท้ายด้วย .woff2 ปลั๊กอินจะโหลดล่วงหน้าด้วย as=font ในขณะที่สำหรับไฟล์อื่น ๆ ทั้งหมด as=script จะถูกใช้

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

plugins: [
  new HtmlWebpackPlugin ( ) ,
  new PreloadWebpackPlugin ( {
    rel : 'preload' ,
    as : 'script'
  } )
]

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

plugins: [
  new HtmlWebpackPlugin ( ) ,
  new PreloadWebpackPlugin ( {
    rel : 'preload' ,
    as ( entry ) {
      if ( / .css$ / . test ( entry ) ) return 'style' ;
      if ( / .woff$ / . test ( entry ) ) return 'font' ;
      if ( / .png$ / . test ( entry ) ) return 'image' ;
      return 'script' ;
    }
  } )
]

ขอให้สังเกตว่าหาก as=font ถูกใช้ในการโหลดล่วงหน้า crossorigin จะถูกเพิ่มด้วย อธิบายได้ในบทความนี้และรายการของสามัญ as ค่าสามารถพบได้ใน MDN

โดยค่าเริ่มต้นปลั๊กอินจะถือว่าสคริปต์สคริปต์จะโหลดไว้ล่วงหน้า นี่คือเทียบเท่า: 

plugins: [
  new HtmlWebpackPlugin ( ) ,
  new PreloadWebpackPlugin ( {
    rel : 'preload' ,
    include : 'asyncChunks'
  } )
]

สำหรับโครงการที่สร้างสคริปต์ Async สองตัวที่มีชื่อที่สร้าง <head> แบบไดนามิกเช่น chunk.31132ae6680e598f8879.js และ chunk.d15e7fdfc91b34bb78c4.js 

 < link rel =" preload " as =" script " href =" chunk.31132ae6680e598f8879.js " >
< link rel =" preload " as =" script " href =" chunk.d15e7fdfc91b34bb78c4.js " >

นอกจากนี้คุณยังสามารถกำหนดค่าปลั๊กอินเพื่อโหลดชิ้นส่วนทั้งหมด (ผู้ขาย, async และชิ้นปกติ) โดยใช้ include: 'allChunks' หรือเพียงการโหลดชิ้นเริ่มต้นล่วงหน้าด้วย include: 'initial'

เป็นเรื่องธรรมดามากใน Webpack ที่จะใช้ตัวโหลดเช่น file-loader เพื่อสร้างสินทรัพย์สำหรับประเภทเฉพาะเช่นแบบอักษรหรือรูปภาพ หากคุณต้องการโหลดไฟล์เหล่านี้ไว้ล่วงหน้าแม้ว่าจะไม่ได้อยู่ในก้อนคุณสามารถใช้ include: 'allAssets' 

plugins: [
  new HtmlWebpackPlugin ( ) ,
  new PreloadWebpackPlugin ( {
    rel : 'preload' ,
    include : 'allChunks' // or 'initial', or 'allAssets'
  } )
]

ในกรณีที่คุณทำงานกับ Chunks ชื่อคุณสามารถระบุได้อย่างชัดเจนว่าจะ include ตัวใดโดยผ่านอาร์เรย์: 

plugins: [
  new HtmlWebpackPlugin ( ) ,
  new PreloadWebpackPlugin ( {
    rel : 'preload' ,
    include : [ 'home' ]
  } )
]

จะฉีดแค่นี้: 

 < link rel =" preload " as =" script " href =" home.31132ae6680e598f8879.js " >

กรองชิ้น

อาจมีชิ้นที่คุณไม่ต้องการโหลดไว้ล่วงหน้า (ตัวอย่างเช่น sourcemaps) ก่อนที่จะทำการโหลดแต่ละก้อนปลั๊กอินนี้ตรวจสอบว่าไฟล์ไม่ตรงกับ regex ใด ๆ ในตัวเลือก fileBlacklist ค่าเริ่มต้นของบัญชีดำนี้คือ [/.map/] ซึ่งหมายความว่าไม่มีการโหลด sourcemaps คุณสามารถแทนที่สิ่งนี้ได้อย่างง่ายดาย: 

 new PreloadWebpackPlugin ( {
  fileBlacklist : [ / .whatever / ]
} )

การผ่านอาร์เรย์ของคุณเองจะแทนที่ค่าเริ่มต้นดังนั้นหากคุณต้องการกรอง sourcemaps ต่อไปพร้อมกับการตั้งค่าที่กำหนดเองของคุณเองคุณจะต้องรวม regex สำหรับ sourcemaps: 

 new PreloadWebpackPlugin ( {
  fileBlacklist : [ / .map / , / .whatever / ]
} )

การกรอง html

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

 plugins : [
  new HtmlWebpackPlugin ( {
    filename : 'index.html' ,
    template : 'src/index.html' ,
    chunks : [ 'main' ]
  } ) ,
  new HtmlWebpackPlugin ( {
    filename : 'example.html' ,
    template : 'src/example.html' ,
    chunks : [ 'exampleEntry' ]
  } ) ,
  // Only apply the plugin to index.html, not example.html.
  new PreloadWebpackPlugin ( {
    excludeHtmlNames : [ 'example.html' ] ,
  } )

คำแนะนำทรัพยากร

หากคุณต้องการใช้คำแนะนำทรัพยากร (เช่น prefetch ) แทน preload ปลั๊กอินนี้ยังรองรับการเดินสายเหล่านั้น

prefetch: 

plugins: [
  new HtmlWebpackPlugin ( ) ,
  new PreloadWebpackPlugin ( {
    rel : 'prefetch'
  } )
]

สำหรับ async chunks ที่กล่าวถึงก่อนหน้านี้ปลั๊กอินจะอัปเดต HTML ของคุณเป็นดังต่อไปนี้: 

 < link rel =" prefetch " href =" chunk.31132ae6680e598f8879.js " >
< link rel =" prefetch " href =" chunk.d15e7fdfc91b34bb78c4.js " >

รวมถึงสื่อ

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

คุณสามารถส่งผ่านค่าสำหรับแอตทริบิวต์สื่อในตัวเลือก media : 

plugins: [
  new HtmlWebpackPlugin ( ) ,
  new PreloadWebpackPlugin ( {
    rel : 'preload' ,
    media : '(min-width: 600px)'
  } )
]

สนับสนุน

หากคุณพบข้อผิดพลาดหรือพบปัญหาโปรดยื่นปัญหา

การสนับสนุนแพตช์ได้รับการสนับสนุนและอาจส่งโดยการหาโครงการนี้และส่งคำขอดึงผ่าน GitHub

การทำงานที่มีส่วนร่วม

src/index.js และ src/lib/ มีแหล่งที่มาหลักสำหรับปลั๊กอิน test/ มีการทดสอบ

ทดสอบปลั๊กอิน: 

$ npm install
$ npm run test

โครงการเขียนขึ้นใน ES2015 และถูก transpiled เพื่อรองรับโหนด 6 ขึ้นไป

หมายเหตุเพิ่มเติม

  • ระวังอย่าให้ทรัพยากร preload ผู้ใช้ไม่ต้องการ สิ่งนี้สามารถเสียแบนด์วิดท์ของพวกเขา
  • ใช้ preload สำหรับเซสชันปัจจุบันหากคุณคิดว่าผู้ใช้มีแนวโน้มที่จะเยี่ยมชมหน้าถัดไป ไม่มีรายการที่โหลดไว้ล่วงหน้า 100% จะจบลงในแคช HTTP และอ่านในพื้นที่นอกเหนือจากเซสชันนี้
  • หากปรับให้เหมาะสมสำหรับการประชุมในอนาคตให้ใช้ prefetch และ preconnect ทรัพยากรที่ได้รับการตรวจสอบล่วงหน้าจะได้รับการบำรุงรักษาในแคช HTTP เป็นเวลาอย่างน้อย 5 นาที (ในโครเมี่ยม) โดยไม่คำนึงถึงความสามารถในการแคชของทรัพยากร

เครื่องมือทางเลือก

  • การสนับสนุนดั้งเดิมของ Webpack: ในการเปิดตัว v4.6.0 ของ Webpack มีการสนับสนุนแบบดั้งเดิมสำหรับการสร้างทั้ง prefetch และ preload <link> ผ่านความคิดเห็น "Magic" ในคำสั่ง import() ของคุณ

  • Script-EXT-HTML-WEBPACK-PLUGIN: เพิ่ม html-webpack-plugin พร้อมตัวเลือกรวมถึง 'ASYNC', 'DEFER', 'MODULE' และ 'PRELOAD' ตั้งแต่ v1.7.0 รองรับ async chunks

  • Resource-Hints-Webpack-Plugin: ใช้สายทรัพยากรโดยอัตโนมัติสำหรับทรัพยากรของคุณ ปลั๊กอินนี้ไม่รองรับ Async Chunks ในปัจจุบัน

ใบอนุญาต

ลิขสิทธิ์ 2019 Google, Inc.

ได้รับอนุญาตให้เข้าร่วม Apache Software Foundation (ASF) ภายใต้ข้อตกลงใบอนุญาตผู้มีส่วนร่วมอย่างน้อยหนึ่งรายการ ดูไฟล์ประกาศที่แจกจ่ายให้กับงานนี้สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการเป็นเจ้าของลิขสิทธิ์ ใบอนุญาต ASF ไฟล์นี้ให้คุณภายใต้ใบอนุญาต Apache เวอร์ชัน 2.0 ("ใบอนุญาต"); คุณไม่สามารถใช้ไฟล์นี้ยกเว้นตามใบอนุญาต คุณอาจได้รับสำเนาใบอนุญาตที่

http://www.apache.org/licenses/license-2.0

เว้นแต่ว่ากฎหมายที่บังคับใช้หรือตกลงเป็นลายลักษณ์อักษรซอฟต์แวร์ที่แจกจ่ายภายใต้ใบอนุญาตจะถูกแจกจ่ายตาม "ตามพื้นฐาน" โดยไม่มีการรับประกันหรือเงื่อนไขใด ๆ ไม่ว่าจะโดยชัดแจ้งหรือโดยนัย ดูใบอนุญาตสำหรับภาษาเฉพาะที่ควบคุมการอนุญาตและข้อ จำกัด ภายใต้ใบอนุญาต

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด