preload webpack plugin
3.0.0 alpha 1
إهمال: شوكة من هذا المشروع ، https://github.com/vuejs/preload-webpack-plugin يمكن استخدامها بدلاً من ذلك.
مكون إضافي لـ WebPack لتنفيذ توصيل غير متزامن (وأنواع أخرى) من قطع JavaScript باستخدام <link rel='preload'> . هذا يساعد مع التحميل كسول.
ملاحظة: هذا مكون إضافي تمديد لـ html-webpack-plugin وهو مكون إضافي يبسط إنشاء ملفات HTML لخدمة حزم WebPack الخاصة بك.
Preload هو معيار الويب يهدف إلى تحسين الأداء وتحميل الموارد الحبيبية. إنه إحضار إعلاني يمكنه إخبار المتصفح بالبدء في جلب مصدر ما لأن المطور يعرف أن المورد سيكون مطلوبًا قريبًا. التحميل المسبق: ما هو جيد؟ هو قراءة موصى بها إذا لم تكن قد استخدمت الميزة من قبل.
في تطبيقات الويب البسيطة ، من المبتكر بشكل مباشر تحديد مسارات ثابتة للبرامج النصية التي ترغب في التحميل المسبق - خاصةً إذا كان من غير المرجح أن تتغير أسمائهم أو مواقعهم. في التطبيقات الأكثر تعقيدًا ، يمكن تقسيم JavaScript إلى "قطع" (تمثل الطرق أو المكونات) في أسماء ديناميكية. يمكن أن تتضمن هذه الأسماء تجزئة وأرقام وخصائص أخرى يمكن أن تتغير مع كل بناء.
على سبيل المثال ، chunk.31132ae6680e598f8879.js .
لتسهيل توصيل أجزاء غير متزامنة للتحميل الكسول ، يوفر هذا البرنامج المساعد وسيلة إسقاط لتسليمها باستخدام <link rel='preload'> .
تتطلب هذه الوحدة WebPack V4 وما فوق. يتطلب أيضًا أنك تستخدم html-webpack-plugin في مشروع WebPack الخاص بك.
أولاً ، قم بتثبيت الحزمة كاعتماد في package.json الخاصة بك. json:
$ npm install --save-dev preload-webpack-plugin في تكوين WebPack ، require() المكون الإضافي المسبق على النحو التالي:
const PreloadWebpackPlugin = require ( 'preload-webpack-plugin' ) ; وأخيراً ، أضف المكون الإضافي إلى مجموعة plugins الخاصة بتكوين WebPack بعد 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.
بشكل افتراضي ، سيتم افتتاح المكون الإضافي قطع النصوص ASYNC مسبقًا. هذا هو ما يعادل:
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( {
rel : 'preload' ,
include : 'asyncChunks'
} )
] لمشروع يولد نصين من البرامج النصية غير <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'
} )
] في حال كنت تعمل مع قطع المسماة ، يمكنك تحديد تلك التي يجب include بوضوح عن طريق تمرير صفيف:
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( {
rel : 'preload' ,
include : [ 'home' ]
} )
]سوف يضخ هذا فقط:
< link rel =" preload " as =" script " href =" home.31132ae6680e598f8879.js " > قد تكون هناك أجزاء لا تريد تحملها مسبقًا (Sourcemaps ، على سبيل المثال). قبل التحميل المسبق لكل قطعة ، يتحقق هذا البرنامج المساعد من أن الملف لا يتطابق مع أي إعادة في خيار fileBlacklist . القيمة الافتراضية لهذه القائمة السوداء هي [/.map/] ، مما يعني عدم وجود عوامل سمينية. يمكنك بسهولة تجاوز هذا:
new PreloadWebpackPlugin ( {
fileBlacklist : [ / .whatever / ]
} )سيؤدي اجتياز صفيفك الخاص إلى تجاوز الافتراضي ، لذلك إذا كنت ترغب في متابعة تصفية العواقب المعروفة مع الإعدادات المخصصة الخاصة بك ، فستحتاج إلى تضمين regex لـ sourcemaps:
new PreloadWebpackPlugin ( {
fileBlacklist : [ / .map / , / .whatever / ]
} ) قد لا ترغب في تحميل الموارد في بعض ملفات 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 ، فإن هذا المكون الإضافي يدعم أيضًا الأسلاك.
الجلب المسبق:
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( {
rel : 'prefetch'
} )
]بالنسبة إلى قطع Async المذكورة سابقًا ، سيقوم المكون الإضافي بتحديث 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 ، ويتم نقله لدعم العقدة 6 وما فوق.
preload الموارد التي من غير المرجح أن يحتاجها المستخدم. هذا يمكن أن يضيع النطاق الترددي.preload للجلسة الحالية إذا كنت تعتقد أن المستخدم من المحتمل أن يزور الصفحة التالية. لا يوجد أي سلع ضمان بنسبة 100 ٪ سيتم تحميلها مسبقًا في ذاكرة التخزين المؤقت HTTP وقراءة محليًا بعد هذه الجلسة.prefetch و preconnect . يتم الحفاظ على الموارد المسبقة المسبقة في ذاكرة التخزين المؤقت HTTP لمدة 5 دقائق على الأقل (بالكروم) بغض النظر عن قابلية المورد. دعم WebPack الأصلي: اعتبارًا من إصدار V4.6.0 من WebPack ، هناك دعم أصلي لتوليد كل من الجلبات المسبقة والتحميل <link> عبر تعليقات "Magic" في عبارات import() .
Script-Ext-HTML-Webpack-Plugin: يعزز html-webpack-plugin مع خيارات بما في ذلك "Async" و "التأجيل" و "الوحدة النمطية" و "preload". اعتبارًا من V1.7.0 ، فإنه يدعم قطعًا غير متزامنة.
تلميحات الموارد webpack-plugin: تلميحات الموارد تلقائيًا لمواردك. لا يدعم هذا البرنامج المساعد حاليًا قطع غير متزامنة.
حقوق الطبع والنشر 2019 Google ، Inc.
مرخصة لمؤسسة Apache Software Foundation (ASF) بموجب اتفاقيات ترخيص مساهم واحد أو أكثر. راجع ملف الإشعار الموزع بهذا العمل للحصول على معلومات إضافية تتعلق بملكية حقوق الطبع والنشر. يرخص ASF هذا الملف لك بموجب ترخيص Apache ، الإصدار 2.0 ("الترخيص") ؛ لا يجوز لك استخدام هذا الملف إلا في الامتثال للترخيص. يمكنك الحصول على نسخة من الترخيص على
http://www.apache.org/licenses/license-2.0
ما لم يكن مطلوبًا بموجب القانون المعمول به أو الموافقة على الكتابة ، يتم توزيع البرامج الموزعة بموجب الترخيص على أساس "كما هي" ، دون ضمانات أو شروط من أي نوع ، إما صريحة أو ضمنية. راجع ترخيص الأذونات والقيود التي تحكم اللغة المحددة بموجب الترخيص.
