এই কোডল্যাবটি নেটওয়ার্ক পেলোড ছোট ও কম্প্রেস করা
কোডল্যাব-এর
এক্সটেনশন এবং ধরে নেওয়া হয় যে আপনি কম্প্রেস করার প্রাথমিক ধারণা সম্পর্কে জানেন। gzip-এর মতো অন্যান্য কম্প্রেশন অ্যালগরিদমের তুলনায়, Brotli কম্প্রেশন (br) কীভাবে কম্প্রেশন অনুপাত এবং আপনার অ্যাপের সামগ্রিক সাইজ আরও কমাতে পারে তা এই কোডল্যাব এক্সপ্লোর করে।
পরিমাপ করুন
অপ্টিমাইজেশন যোগ করার আগে, অ্যাপ্লিকেশনের বর্তমান অবস্থা বিশ্লেষণ করা সবসময় ভালো।
- প্রোজেক্ট এডিট করার উপযুক্ত করতে এডিট করার জন্য রিমিক্স করুন বিকল্পে ক্লিক করুন।
- সাইটের প্রিভিউ দেখতে, অ্যাপ দেখুন বিকল্পে প্রেস করুন। তারপর
ফুল-স্ক্রিন
বিকল্পে প্রেস করুন।
আগের নেটওয়ার্ক পেলোড মিনিফাই ও কম্প্রেস করা
কোডল্যাব-এ,
আমরা main.js-এর সাইজ ২২৫ কেবি থেকে কমিয়ে ৬১.৬ কেবি করেছি। এই কোডল্যাবে, আপনি
Brotli কম্প্রেশন কীভাবে এই বান্ডেলের সাইজ আরও কমাতে পারে তা এক্সপ্লোর করবেন।
Brotli কম্প্রেশন
Brotli
হল একটি নতুন কম্প্রেশন অ্যালগরিদম যা gzip-এর চেয়েও আরও ভালো টেক্সট কম্প্রেশন
ফলাফল প্রদান করতে পারে। CertSimple-এর
অনুসারে, Brotli-এর পারফর্ম্যান্স হল:
- জাভাস্ক্রিপ্টের জন্য
gzip-এর চেয়ে ১৪% ছোট - HTML-এর জন্য
gzip-এর থেকে ২১% ছোট - CSS-এর জন্য
gzip-এর থেকে ১৭% ছোট
Brotli ব্যবহার করতে, আপনার সার্ভারে HTTPS কাজ করতে হবে। Brotli সব
আধুনিক ব্রাউজারে কাজ করে। Brotli কাজ করে এমন ব্রাউজার
Accept-Encoding হেডারে br অন্তর্ভুক্ত করবে:
Accept-Encoding: gzip, deflate, br
Chrome ডেভেলপার টুল নেটওয়ার্ক ট্যাবে Content-Encoding ফিল্ড ব্যবহার করে
কোন কম্প্রেশন অ্যালগরিদম ব্যবহার করা হয়েছে তা আপনি নির্ধারণ করতে পারবেন
(Command+Option+I বা Ctrl+Alt+I):
Brotli কীভাবে চালু করবেন
Brotli-এনকোডেড রিসোর্স পাঠানোর জন্য আপনি কীভাবে ওয়েব সার্ভার সেট-আপ করবেন তা নির্ভর করে আপনি কীভাবে সেগুলি এনকোড করার পরিকল্পনা করছেন তার উপর। আপনার কাছে দুটি বিকল্প আছে, অনুরোধের সময় (ডায়নামিক) Brotli-র মাধ্যমে রিসোর্স ডায়নামিকভাবে কম্প্রেস করা অথবা আগে থেকেই এনকোড করা যাতে ব্যবহারকারী অনুরোধ করার সময় সেগুলি আগে থেকেই কম্প্রেস করা থাকে (স্ট্যাটিক)।
ডায়নামিক কম্প্রেশন
ডায়নামিক কম্প্রেশন-এর মধ্যে ব্রাউজার থেকে অনুরোধ করা হলে অ্যাসেট অন-দ্য-ফ্লাই কম্প্রেস করা অন্তর্ভুক্ত।
সুবিধা
- অ্যাসেটের সেভ করা কম্প্রেস করা ভার্সন তৈরি ও আপডেট করার প্রয়োজন নেই।
- ডায়নামিকভাবে তৈরি করা ওয়েব পেজের ক্ষেত্রে অন-দ্য-ফ্লাই কম্প্রেশন বিশেষভাবে ভাল কাজ করে।
অসুবিধা
- আরও ভালো কম্প্রেশন অনুপাত পেতে উচ্চ লেভেলে ফাইল কম্প্রেস করতে বেশি সময় লাগে। এর ফলে পারফর্ম্যান্সের উপর প্রভাব পড়তে পারে কারণ সার্ভার থেকে অ্যাসেট পাঠানোর আগে সেটি কম্প্রেস করার জন্য ব্যবহারকারীকে অপেক্ষা করতে হয়।
Node এবং Express-এর সাথে ডায়নামিক কম্প্রেশন
server.js ফাইলটি Node সার্ভার সেট-আপ করার জন্য দায়ী যা অ্যাপ্লিকেশনটি হোস্ট করে।
const express = require('express');
const app = express();
app.use(express.static('public'));
const listener = app.listen(process.env.PORT, function() {
console.log(`Your app is listening on port ${listener.address().port}`);
});
এটি শুধু express ইমপোর্ট করে এবং express.static
মিডলওয়্যার ব্যবহার করে public/directory-এ সব স্ট্যাটিক HTML, JS ও CSS ফাইল লোড করে
(এবং এইসব ফাইল প্রতিটি বিল্ডের সাথে webpack-এর মাধ্যমে তৈরি হয়)।
প্রতিবার অনুরোধ করা হলে, brotli ব্যবহার করে সব অ্যাসেট কম্প্রেস করা হয়েছে কিনা তা নিশ্চিত করতে, shrink-ray
মডিউল ব্যবহার করা যেতে পারে। package.json-এ devDependency হিসেবে এটি যোগ করে শুরু করুন:
"devDependencies": {
// ...
"shrink-ray": "^0.1.3"
},
এবং এটি সার্ভার ফাইলে ইমপোর্ট করুন, server.js:
const express = require('express');
const shrinkRay = require('shrink-ray');
এবং express.static মাউন্ট করার আগে এটি মিডলওয়্যার হিসেবে যোগ করুন:
// ...
const app = express();
// Compress all requests
app.use(shrinkRay());
app.use(express.static('public'));
এখন অ্যাপটি আবার লোড করুন এবং নেটওয়ার্ক প্যানেলে বান্ডেলের সাইজ দেখুন:
আপনি এখন দেখতে পাবেন যে Content-Encoding হেডারে bz থেকে brotli প্রয়োগ করা হয়েছে।
main.bundle.js-এর সাইজ ২২৫ কেবি থেকে ৫৩.১ কেবি-তে কমিয়ে আনা হয়েছে! এটি gzip (৬১.৬ কেবি)-এর তুলনায়
~১৪% ছোট।
স্ট্যাটিক কম্প্রেশন
স্ট্যাটিক কম্প্রেশনের মূল উদ্দেশ্য হল অ্যাসেট কম্প্রেস করে আগে থেকে সেভ করে রাখা।
সুবিধা
- বেশি কম্প্রেশন লেভেলের কারণে লেটেন্সি নিয়ে আর চিন্তা করতে হবে না। ফাইল কম্প্রেস করার জন্য এখন আর কিছু করতে হবে না, কারণ সেগুলি এখন সরাসরি ফেচ করা যাবে।
অসুবিধা
- প্রতিটি বিল্ডের সাথে অ্যাসেট কম্প্রেস করতে হবে। উচ্চ কম্প্রেশন লেভেল ব্যবহার করা হলে, বিল্ড টাইম উল্লেখযোগ্যভাবে বৃদ্ধি পেতে পারে।
Node এবং webpack সহ Express-এর মাধ্যমে স্ট্যাটিক কম্প্রেশন
যেহেতু স্ট্যাটিক কম্প্রেশন-এর ক্ষেত্রে সময়ের আগেই ফাইল কম্প্রেস করতে হয়, তাই বিল্ড স্টেপের অংশ হিসেবে অ্যাসেট কম্প্রেস করার জন্য webpack
সেটিংস পরিবর্তন করা যেতে পারে। এর জন্য
brotli-webpack-plugin ব্যবহার করা যেতে পারে।
package.json-এ devDependency হিসেবে এটি যোগ করে শুরু করুন:
"devDependencies": {
// ...
"brotli-webpack-plugin": "^1.1.0"
},
অন্য যেকোনও webpack প্লাগ-ইনের মতো, এটি কনফিগারেশন ফাইলে ইমপোর্ট করুন,
webpack.config.js:
var path = require("path");
//...
var BrotliPlugin = require('brotli-webpack-plugin');
এবং এটি প্লাগ-ইন অ্যারেতে অন্তর্ভুক্ত করুন:
module.exports = {
// ...
plugins: [
// ...
new BrotliPlugin({
asset: '[file].br',
test: /\.(js)$/
})
]
},
প্লাগ-ইন অ্যারে নিম্নলিখিত আর্গুমেন্ট ব্যবহার করে:
asset: টার্গেট অ্যাসেটের নাম।[file]-এর জায়গায় আসল অ্যাসেট ফাইলের নাম দেখানো হয়।test: এই RegExp-এর সাথে মেলে এমন সব অ্যাসেট (অর্থাৎ,.js-এ শেষ হওয়া জাভাস্ক্রিপ্ট অ্যাসেট) প্রসেস করা হয়।
যেমন, main.js-এর নাম পরিবর্তন করে main.js.br করা হবে।
অ্যাপ রিলোড ও রিবিল্ড করার সময়, এখন মূল বান্ডেলের একটি কম্প্রেস করা ভার্সন
তৈরি করা হয়। Node সার্ভার দ্বারা পরিবেশিত চূড়ান্ত public/ ডিরেক্টরির ভিতরে কী আছে তা দেখতে Glitch Console খুলুন।
- টুল বোতামে ক্লিক করুন।
- Console বোতামে ক্লিক করুন।
- কনসোলে,
publicডিরেক্টরিতে পরিবর্তন করতে এবং এর সব ফাইল দেখতে নিম্নলিখিত কমান্ডগুলি রান করুন:
cd public
ls -lh
ব্রটলি কম্প্রেস করা বান্ডেলের ভার্সন, main.bundle.js.br, এখন এখানেও সেভ করা হয়েছে এবং
এটি main.bundle.js-এর থেকে ~৭৬% ছোট সাইজের (২২৫ কেবি বনাম ৫৩ কেবি)।
এরপর, সার্ভারকে বলুন যাতে এই brotli-কম্প্রেস করা ফাইলগুলি যখনই তাদের আসল JS ভার্সনের জন্য অনুরোধ করা হয় তখনই পাঠানো হয়। express.static-এর মাধ্যমে ফাইল পরিবেশন করার আগে server.js-এ নতুন রুট
সংজ্ঞায়িত করার মাধ্যমে এটি করা যেতে পারে।
const express = require('express');
const app = express();
app.get('*.js', (req, res, next) => {
req.url = req.url + '.br';
res.set('Content-Encoding', 'br');
res.set('Content-Type', 'application/javascript; charset=UTF-8');
next();
});
app.use(express.static('public'));
নির্দিষ্ট এন্ডপয়েন্টের জন্য GET অনুরোধে সার্ভার কীভাবে উত্তর দেবে তা জানাতে app.get ব্যবহার করা হয়। এই অনুরোধ কীভাবে ম্যানেজ করা হবে তা নির্ধারণ করতে, তারপর একটি কলব্যাক ফাংশন ব্যবহার করা হয়। রুটটি এইভাবে কাজ করে:
- প্রথম আর্গুমেন্ট হিসেবে
'*.js'উল্লেখ করার অর্থ হল, এটি JS ফাইল ফেচ করার জন্য ফায়ার করা প্রতিটি এন্ডপয়েন্টের জন্য কাজ করে। - কলব্যাকের মধ্যে, অনুরোধের URL-এ
.brঅ্যাটাচ করা থাকে এবংContent-Encodingরেসপন্স হেডারbr-এ সেট করা থাকে। - MIME-এর ধরন নির্দিষ্ট করতে
Content-Typeহেডারapplication/javascript; charset=UTF-8-এ সেট করা হয়েছে। - শেষে,
next()নিশ্চিত করে যে সিকোয়েন্সটি পরবর্তী যেকোনও কলব্যাকে চলতে থাকে।
কিছু ব্রাউজারে brotli কম্প্রেশন কাজ নাও করতে পারে, তাই brotli-কম্প্রেস করা ফাইল ফেরত দেওয়ার আগে brotli কাজ করছে কিনা তা কনফার্ম করুন। এর জন্য
Accept-Encoding অনুরোধের হেডারে br আছে কিনা তা চেক করুন:
const express = require('express');
const app = express();
app.get('*.js', (req, res, next) => {
if (req.header('Accept-Encoding').includes('br')) {
req.url = req.url + '.br';
console.log(req.header('Accept-Encoding'));
res.set('Content-Encoding', 'br');
res.set('Content-Type', 'application/javascript; charset=UTF-8');
}
next();
});
app.use(express.static('public'));
অ্যাপটি রিলোড হয়ে গেলে, নেটওয়ার্ক প্যানেলটি আরও একবার দেখুন।
হয়ে গেছে! আপনার অ্যাসেট আরও কম্প্রেস করতে আপনি Brotli কম্প্রেসন ব্যবহার করেছেন!
উপসংহার
এই কোডল্যাব থেকে জানা যায় যে কীভাবে brotli আপনার অ্যাপের সামগ্রিক সাইজ আরও কমাতে পারে। যেখানে কাজ করে, সেখানে brotli হল gzip-এর চেয়ে আরও শক্তিশালী কম্প্রেশন অ্যালগরিদম।