হালনাগাদ
আপনি এইচটিএমএল -ওয়েবপ্যাক-প্লাগইন সহ প্রিলোড-ওয়েবপ্যাক-প্লাগইন ব্যবহার করতে পারেন এটি আপনাকে কনফিগারেশনে প্রিলোডটি নির্ধারণ করতে দেবে এবং এটি স্বয়ংক্রিয়ভাবে আপনার খণ্ডটি প্রিললোড করার জন্য ট্যাগগুলি সন্নিবেশ করবে
আপনি যদি এখন অবধি ওয়েবপ্যাক ভি 4 ব্যবহার করে থাকেন তবে আপনাকে এই প্লাগইনটি ব্যবহার করে ইনস্টল করতে হবে preload-webpack-plugin@next
উদাহরণ
plugins: [
new HtmlWebpackPlugin(),
new PreloadWebpackPlugin({
rel: 'preload',
include: 'asyncChunks'
})
]
প্রজেক্টের জন্য গতিশীলভাবে উত্পন্ন নাম সহ দুটি অ্যাসিঙ্ক স্ক্রিপ্ট তৈরি করা হয় chunk.31132ae6680e598f8879.jsএবং
যেমন chunk.d15e7fdfc91b34bb78c4.js, নীচের প্রিলোডগুলি নথিতে ইনজেকশনের ব্যবস্থা করা হবেhead
<link rel="preload" as="script" href="chunk.31132ae6680e598f8879.js">
<link rel="preload" as="script" href="chunk.d15e7fdfc91b34bb78c4.js">
আপডেট 2
আপনি যদি সমস্ত অ্যাসিঙ্ক অংশটি প্রিললোড করতে না চান তবে একবার নির্দিষ্ট করে আপনি এটি করতে পারেন
হয় আপনি মাইগকোডার বাবেল প্লাগইন ব্যবহার করতে পারেন বা এর preload-webpack-pluginমতো নিম্নলিখিতগুলি ব্যবহার করতে পারেন
প্রথমে আপনাকে সেই অ্যাসিঙ্ক অংশটির webpack
magic commentউদাহরণ দিতে হবে
import(/* webpackChunkName: 'myAsyncPreloadChunk' */ './path/to/file')
এবং তারপরে প্লাগইন কনফিগারেশনে সেই নামটি ব্যবহার করুন
plugins: [
new HtmlWebpackPlugin(),
new PreloadWebpackPlugin({
rel: 'preload',
include: ['myAsyncPreloadChunk']
})
]
প্রথমে ব্রাউজারের আচরণটি দেখা যাক যখন আমরা স্ক্রিপ্টটি লোড করার জন্য scriptট্যাগ বা linkট্যাগ নির্দিষ্ট করি
- যখনই কোনও ব্রাউজার কোনও
scriptট্যাগের মুখোমুখি হয় এটি এটিকে পার্স করে লোড করে সঙ্গে সঙ্গে এটিকে কার্যকর করে
- আপনি কেবল ইভেন্টের আগ পর্যন্ত কেবল সহায়তার সাথে ট্যাগ
asyncএবং
পার্সিং এবং মূল্যায়ন বিলম্ব করতে পারেনdeferDOMContentLoaded
- আপনি যদি স্ক্রিপ্ট ট্যাগটি সন্নিবেশ না করেন তবে আপনি কার্যকর করতে (মূল্যায়ন) বিলম্ব করতে পারেন (কেবল এটির সাথে প্রিলোড করুন
link)
এখন প্রস্তাবিত হ্যাকির মতো আরও কিছু উপায় রয়েছে যা আপনি সম্পূর্ণ স্ক্রিপ্টটি প্রেরণ করেন এবং stringবা comment(কারণ মন্তব্য বা স্ট্রিংয়ের মূল্যায়নের সময়টি প্রায় নগণ্য) এবং যখন আপনি কার্যকর করতে পারেন যে আপনি ব্যবহার করতে পারেন Function() constructorবা evalউভয়ই প্রস্তাবিত নয়
আরেকটি পদ্ধতির পরিষেবা কর্মী: (এটি পৃষ্ঠা পুনরায় লোড করার পরে বা ক্যাশে লোড হওয়ার পরে ব্যবহারকারী অফলাইনে যাওয়ার পরে আপনাকে ক্যাশে ইভেন্ট সংরক্ষণ করবে)
আধুনিক ব্রাউজারে আপনি service workerএকটি পুনরুদ্ধার (জাভাস্ক্রিপ্ট, চিত্র, সিএসএস কিছু) আনতে এবং ক্যাশে করতে ব্যবহার করতে পারেন এবং যখন এই পুনরুদ্ধারের মূল থ্রেড অনুরোধ আপনি সেই অনুরোধটিকে বাধা দিতে পারেন এবং ক্যাশে থেকে এই পথটি ফেরত দিতে পারেন আপনি যখন স্ক্রিপ্টটিকে বিশ্লেষণ এবং মূল্যায়ন করছেন না তখন the আপনি এটিকে ক্যাশে লোড করছেন এখানে পরিষেবা কর্মীদের সম্পর্কে আরও পড়ুন
উদাহরণ
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open('v1').then(function(cache) {
return cache.addAll([
'/sw-test/',
'/sw-test/index.html',
'/sw-test/style.css',
'/sw-test/app.js',
'/sw-test/image-list.js',
'/sw-test/star-wars-logo.jpg',
'/sw-test/gallery/bountyHunters.jpg',
'/sw-test/gallery/myLittleVader.jpg',
'/sw-test/gallery/snowTroopers.jpg'
]);
})
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(caches.match(event.request).then(function(response) {
// caches.match() always resolves
// but in case of success response will have value
if (response !== undefined) {
return response;
} else {
return fetch(event.request).then(function (response) {
// response may be used only once
// we need to save clone to put one copy in cache
// and serve second one
let responseClone = response.clone();
caches.open('v1').then(function (cache) {
cache.put(event.request, responseClone);
});
return response;
}).catch(function () {
// any fallback code here
});
}
}));
});
যেহেতু আপনি দেখতে পাচ্ছেন এটি কোনও ওয়েবপ্যাক নির্ভর বিষয় নয় এটি ওয়েবপ্যাকের সুযোগের বাইরে নয় তবে ওয়েবপ্যাকের সাহায্যে আপনি নিজের বান্ডিলটি বিভক্ত করতে পারেন যা পরিষেবা কর্মীকে আরও ভালভাবে ব্যবহার করতে সহায়তা করবে
if (false) import(…)- আমি সন্দেহ করি ওয়েবপ্যাকটি কি ডেড কোড বিশ্লেষণ করে?