preload webpack plugin
3.0.0 alpha 1
DESTRECATED: Garpu dari proyek ini, https://github.com/vuejs/preload-webpack-plugin dapat digunakan sebagai gantinya.
Plugin webpack untuk secara otomatis kabel asynchronous (dan jenis lain) dari potongan javascript menggunakan <link rel='preload'> . Ini membantu dengan pemuatan malas.
Catatan: Ini adalah plugin ekstensi untuk html-webpack-plugin Plugin yang menyederhanakan pembuatan file HTML untuk melayani bundel webpack Anda.
Preload adalah standar web yang bertujuan untuk meningkatkan kinerja dan pemuatan sumber daya granular. Ini adalah pengambilan deklaratif yang dapat memberi tahu browser untuk mulai mengambil sumber karena pengembang tahu sumber daya akan segera dibutuhkan. Preload: Untuk apa itu? adalah bacaan yang disarankan jika Anda belum pernah menggunakan fitur tersebut sebelumnya.
Dalam aplikasi web yang sederhana, ini mudah untuk menentukan jalur statis ke skrip yang ingin Anda preload - terutama jika nama atau lokasi mereka tidak mungkin berubah. Dalam aplikasi yang lebih kompleks, JavaScript dapat dibagi menjadi "potongan" (yang mewakili rute atau komponen) dengan nama dinamis. Nama -nama ini dapat mencakup hash, angka, dan properti lain yang dapat berubah dengan setiap build.
Misalnya, chunk.31132ae6680e598f8879.js .
Untuk membuatnya lebih mudah untuk memasang potongan async untuk pemuatan malas, plugin ini menawarkan cara drop-in untuk memasangnya menggunakan <link rel='preload'> .
Modul ini membutuhkan Webpack V4 dan di atas. Ini juga mengharuskan Anda menggunakan html-webpack-plugin di proyek webpack Anda.
Pertama, instal paket sebagai ketergantungan di package.json Anda.json:
$ npm install --save-dev preload-webpack-plugin Di konfigurasi webpack Anda, require() plugin preload sebagai berikut:
const PreloadWebpackPlugin = require ( 'preload-webpack-plugin' ) ; Dan akhirnya, tambahkan plugin ke array plugins konfigurasi webpack Anda setelah HtmlWebpackPlugin :
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( )
] Saat preloading file, plugin akan menggunakan as yang berbeda tergantung pada jenis setiap file. Untuk setiap file diakhiri dengan .css , plugin akan memuatnya dengan as=style , untuk setiap file diakhiri dengan .woff2 , plugin akan memuatnya dengan as=font , sedangkan untuk semua file lainnya, as=script akan digunakan.
Jika Anda tidak lebih suka menentukan as atribut tergantung pada akhiran nama file, Anda juga dapat secara eksplisit menyebutkannya menggunakan as :
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( {
rel : 'preload' ,
as : 'script'
} )
] Jika Anda membutuhkan lebih banyak kendali yang lebih halus dari atribut as , Anda juga dapat memberikan fungsi di sini. Saat menggunakannya, nama entri akan disediakan sebagai parameter, dan fungsi itu sendiri harus mengembalikan string untuk as atribut:
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' ;
}
} )
] Perhatikan bahwa jika as=font digunakan dalam preload, crossorigin juga akan ditambahkan. Menjelaskan dapat ditemukan dalam artikel ini, dan daftar umum as nilai dapat ditemukan di MDN.
Secara default, plugin akan menganggap potongan skrip async akan dimuat sebelumnya. Ini setara dengan:
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( {
rel : 'preload' ,
include : 'asyncChunks'
} )
] Untuk sebuah proyek yang menghasilkan dua skrip async dengan nama yang dihasilkan secara dinamis, seperti chunk.31132ae6680e598f8879.js dan chunk.d15e7fdfc91b34bb78c4.js , preload berikut akan diinjeksi ke dalam dokumen <head> ::
< link rel =" preload " as =" script " href =" chunk.31132ae6680e598f8879.js " >
< link rel =" preload " as =" script " href =" chunk.d15e7fdfc91b34bb78c4.js " > Anda juga dapat mengkonfigurasi plugin untuk memuat semua potongan (vendor, async, dan normal) menggunakan include: 'allChunks' , atau hanya potongan awal preload dengan include: 'initial' .
Sangat umum di webpack untuk menggunakan loader seperti file-loader untuk menghasilkan aset untuk jenis tertentu, seperti font atau gambar. Jika Anda ingin memuat file -file ini juga, bahkan jika itu bukan milik sepotong, Anda dapat menggunakannya include: 'allAssets' .
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( {
rel : 'preload' ,
include : 'allChunks' // or 'initial', or 'allAssets'
} )
] Jika Anda bekerja dengan potongan bernama, Anda dapat secara eksplisit menentukan mana yang akan include dengan melewati array:
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( {
rel : 'preload' ,
include : [ 'home' ]
} )
]akan menyuntikkan hanya ini:
< link rel =" preload " as =" script " href =" home.31132ae6680e598f8879.js " > Mungkin ada potongan yang Anda tidak ingin dimuat sebelumnya (Sourcemaps, misalnya). Sebelum preloading setiap potongan, plugin ini memeriksa bahwa file tidak cocok dengan regex di opsi fileBlacklist . Nilai default dari daftar hitam ini adalah [/.map/] , yang berarti tidak ada sumber yang akan dimuat sebelumnya. Anda dapat dengan mudah mengesampingkan ini:
new PreloadWebpackPlugin ( {
fileBlacklist : [ / .whatever / ]
} )Melewati array Anda sendiri akan mengesampingkan default, jadi jika Anda ingin terus memfilter Sourcemaps bersama dengan pengaturan khusus Anda sendiri, Anda harus menyertakan regex untuk Sourcemaps:
new PreloadWebpackPlugin ( {
fileBlacklist : [ / .map / , / .whatever / ]
} ) Anda mungkin tidak ingin memulai sumber daya di beberapa file HTML Anda. Anda dapat menggunakan excludeHtmlNames untuk memberi tahu plugin ini untuk mengabaikan satu atau lebih file.
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' ] ,
} ) Jika Anda ingin menggunakan petunjuk sumber daya (seperti prefetch ) alih -alih preload , plugin ini juga mendukung kabelnya.
Prefetch:
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( {
rel : 'prefetch'
} )
]Untuk potongan async yang disebutkan sebelumnya, plugin akan memperbarui HTML Anda ke yang berikut:
< link rel =" prefetch " href =" chunk.31132ae6680e598f8879.js " >
< link rel =" prefetch " href =" chunk.d15e7fdfc91b34bb78c4.js " > Elemen <link> memiliki kemampuan untuk menerima atribut media. Ini dapat menerima jenis media atau pertanyaan media penuh, memungkinkan Anda untuk melakukan preloading yang responsif.
Anda dapat memberikan nilai untuk atribut media di opsi media :
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( {
rel : 'preload' ,
media : '(min-width: 600px)'
} )
] Jika Anda telah menemukan kesalahan atau mengalami masalah, silakan ajukan masalah.
Patch didorong, dan dapat diserahkan dengan mencari proyek ini dan mengirimkan permintaan tarik melalui GitHub.
src/index.js dan src/lib/ berisi sumber utama untuk plugin. test/ berisi tes.
Uji plugin:
$ npm install
$ npm run testProyek ini ditulis dalam ES2015, dan ditranspilasi untuk mendukung simpul 6 ke atas.
preload sumber daya yang tidak dibutuhkan pengguna. Ini bisa menyia -nyiakan bandwidth mereka.preload untuk sesi saat ini jika Anda berpikir pengguna cenderung mengunjungi halaman berikutnya. Tidak ada jaminan 100% item yang dimuat sebelumnya akan berakhir di cache HTTP dan dibaca secara lokal di luar sesi ini.prefetch dan preconnect . Sumber daya prefetch dipertahankan dalam cache HTTP selama setidaknya 5 menit (di Chrome) terlepas dari cachability sumber daya. Dukungan Asli Webpack: Pada rilis V4.6.0 dari Webpack, ada dukungan asli untuk menghasilkan prefetch dan preload <link> s Via "Magic" komentar dalam pernyataan import() Anda.
Script-ext-html-webpack-plugin: Meningkatkan html-webpack-plugin dengan opsi termasuk 'async', 'tundukan', 'modul' dan 'preload'. Pada v1.7.0, ini mendukung potongan async.
Sumber Daya-Hints-Webpack-Plugin: Secara otomatis kabel sumber daya untuk sumber daya Anda. Plugin ini saat ini tidak mendukung potongan async.
Hak Cipta 2019 Google, Inc.
Berlisensi ke Apache Software Foundation (ASF) di bawah satu atau lebih perjanjian lisensi kontributor. Lihat file pemberitahuan yang didistribusikan dengan pekerjaan ini untuk informasi tambahan mengenai kepemilikan hak cipta. ASF lisensi file ini kepada Anda di bawah lisensi Apache, versi 2.0 ("lisensi"); Anda tidak boleh menggunakan file ini kecuali sesuai dengan lisensi. Anda dapat memperoleh salinan lisensi di
http://www.apache.org/licenses/license-2.0
Kecuali diharuskan oleh hukum yang berlaku atau disepakati secara tertulis, perangkat lunak yang didistribusikan di bawah lisensi didistribusikan berdasarkan "sebagaimana adanya", tanpa jaminan atau ketentuan dalam bentuk apa pun, baik tersurat maupun tersirat. Lihat lisensi untuk bahasa spesifik yang mengatur izin dan batasan di bawah lisensi.
