Lume-এর পারফরম্যান্স টিউনিং করা

নমস্কার, আমি অযোগ্য।
সার্ভার-সাইড ক্যাশে এবং অন্যান্য সেটিংস আগের ওয়ার্ডপ্রেস থেকে যেমন ছিল তেমনই রয়ে গেছে, তাই আমি সেগুলোকে আবার পরিবর্তন করব।

Nginx

রিভার্স প্রক্সি চালানো Nginx-এর দিক থেকে প্রয়োজনীয় সমস্ত কন্টেন্ট ক্যাশে করা হচ্ছে।
যদি ব্যাকএন্ডের Apache-এ পৌঁছানোর আগেই ক্যাশে করার অর্থ বলা হয়, তবে এটিকে নিজস্ব CDN সার্ভারের মতো ভাবা যেতে পারে।

পরিবর্তন

if ($request_uri ~* "\.(jpg|jpeg|png|webp|gif|mp4|css|js|ico|woff2|svg|pdf|zip|eot|ttf|xml|json|txt|html)(\?.*)?$") {  
    set $do_not_cache 0;  
}

আমি এতদিন HTML ক্যাশে করিনি, কিন্তু যেহেতু আমি একটি "স্ট্যাটিক সাইট" জেনারেটর ব্যবহার করছি, তাই আমি এটি যোগ করেছি।

এছাড়াও, একটি স্ট্যাটিক সাইটে ক্যাশে করা হবে কি হবে না তার জন্য একটি শর্ত যোগ করার কোনো মানে আছে কিনা।

if ($request_uri ~* "/wp-admin/|/xmlrpc.php|wp-.*.php|/feed/|sitemap(_index)?.xml") {  
 set $skip_cache 1;  
 set $skip_reason URI;   
}  

আমি এখানে ইচ্ছাকৃতভাবে কোডটি রেখে দিয়েছি। এটি এই কারণেও যে আমি যেকোনো সময় ওয়ার্ডপ্রেসে ফিরে যেতে পারি, তবে আমি সাইটম্যাপের মতো জিনিস ক্যাশে করতে চাই না, তাই আমি সেগুলোকে ক্যাশে করছি না।

Nginx-এর দিক থেকে এটুকুই বলা যায়।
আগে আমি /blog-এ পোস্ট রাখতাম, তাই /blog-এর জন্য আলাদা ক্যাশে সেটিংস ব্যবহার করতাম। তবে, এটি আলাদা করার কোনো প্রয়োজন আছে কিনা এমন অনুভূতিও ছিল, তাই আমি এটিকে আলাদা না করার সিদ্ধান্ত নিয়েছি।

Lume

আমি Lume-এর প্লাগইনগুলো দেখেছি এবং কোড কমানোর জন্য যা যা সম্ভব ছিল, আপাতত সব যোগ করে দিয়েছি। প্লাগইনস

Terser

টার্সার
টার্সার সাইট থেকে টার্সারের ডকুমেন্টেশন দেখে নিই।
এটি API রেফারেন্স মিনিফাই অপশনস স্ট্রাকচার
অংশ।

আমি AI-কে জিজ্ঞাসা করে শুধুমাত্র প্রয়োজনীয় অংশগুলো পরিবর্তন করব।
কমেন্ট আউট করে এটিকে আরও বোধগম্য করে তোলাটা প্রশংসনীয়।

$ cat _config.ts   
import lume from "lume/mod.ts";  
import blog from "blog/mod.ts";  
import plugins from "./plugins.ts";  
import nunjucks from "lume/plugins/nunjucks.ts";  
import basePath from "lume/plugins/base_path.ts";  
import terser from "lume/plugins/terser.ts";  
import minifyHTML from "lume/plugins/minify_html.ts";  
import lightningCss from "lume/plugins/lightningcss.ts";  
  
const site = lume({  
  src: "./src",  
  location: new URL("https://soulminingrig.com"),  
});  
  
site.use(basePath());  
site.use(plugins());  
site.use(nunjucks());  
  
// ফাইল সংকোচন  
site.use(terser({  
  options: {  
    compress: {  
      drop_console: true,  
      passes: 5,  // পাস বাড়িয়ে আরও সংকোচন চেষ্টা করা  
      unsafe: true,  
      pure_getters: true,  // গেটারকে বিশুদ্ধ ফাংশন হিসেবে গণ্য করা  
      unsafe_arrows: true,  // অ্যারো ফাংশনের অপ্টিমাইজেশন  
      unsafe_comps: true,  // তুলনার অপ্টিমাইজেশন  
      unsafe_Function: true,  // ফাংশন কনস্ট্রাক্টরের অপ্টিমাইজেশন  
      unsafe_math: true,  // গাণিতিক অপ্টিমাইজেশন  
      unsafe_methods: true,  // মেথড কল অপ্টিমাইজেশন  
      unsafe_proto: true,  // __proto__ এর অপ্টিমাইজেশন  
      unsafe_regexp: true,  // রেগুলার এক্সপ্রেশনের অপ্টিমাইজেশন  
      conditionals: true,  // শর্তযুক্ত বিবৃতির অপ্টিমাইজেশন  
      dead_code: true,  // ডেড কোড অপসারণ  
      evaluate: true,  // ধ্রুবক এক্সপ্রেশনের মূল্যায়ন  
      booleans: true,  // বুলিয়ান অপারেশনের অপ্টিমাইজেশন  
      loops: true,  // লুপের অপ্টিমাইজেশন  
      unused: true,  // অব্যবহৃত কোড মুছে ফেলা  
      hoist_funs: true,  // ফাংশন ডিক্লারেশন হোয়স্টিং  
      keep_fargs: false,  // অব্যবহৃত ফাংশন আর্গুমেন্ট মুছে ফেলা  
      hoist_vars: true,  // ভেরিয়েবল ডিক্লারেশন হোয়স্টিং  
      if_return: true,  // if-return এর অপ্টিমাইজেশন  
      inline: true,  // ইনলাইনিং  
      join_vars: true,  // ভেরিয়েবল ডিক্লারেশন একত্রিত করা  
      side_effects: true,  // পার্শ্বপ্রতিক্রিয়াযুক্ত এক্সপ্রেশন মুছে ফেলা  
      warnings: false,  // সতর্কতা নিষ্ক্রিয় করা  
    },  
    mangle: {  
      properties: {  
        reserved: ['$', '_'],  
        regex: /^_/,  // আন্ডারস্কোর দিয়ে শুরু হওয়া প্রপার্টি রক্ষা করা  
      },  
      toplevel: true,  // টপ-লেভেলের ভেরিয়েবলের নামও অস্পষ্ট করা  
    },  
    format: {  
      comments: false,  
      beautify: false,  
      ascii_only: true,  // শুধুমাত্র ASCII অক্ষর ব্যবহার করা  
      wrap_iife: true,  // IIFE মোড়ানো  
    },  
    sourceMap: false,  // সোর্স ম্যাপ সম্পূর্ণরূপে নিষ্ক্রিয় করা  
    ecma: 2023,  
    enclose: false,  
    keep_classnames: false,  
    keep_fnames: false,  
    ie8: false,  
    module: false,  
    nameCache: null,  
    safari10: false,  
    toplevel: true,  
  },  
}));  

আমি প্রয়োজনীয় অংশগুলো পরিবর্তন করেছি এবং আমার পরিবেশে যোগ করার পর যে অংশগুলো কাজ করেনি, সেগুলো মুছে ফেলেছি।

সত্যি বলতে, কনফিগারেশনের সহজতা আমাকে বেশ মুগ্ধ করেছে। জাভাস্ক্রিপ্টের জন্য কি এটি যথেষ্ট?

### লাইটনিং সিএসএস
লাইটনিং সিএসএস

import lightningCss from "lume/plugins/lightningcss.ts";  
~  
site.use(lightningCss({  
  extensions: [".css"],  
  include: /.+\.css$/,  
  options: {  
    minify: true,  
    sourceMap: false,   
    drafts: {  
      nesting: true,  
      customMedia: true,  
    },  
    nonStandard: {  
      deepSelectorCombinator: true,  // গভীর নির্বাচক সংযোজক সক্রিয় করা (প্রয়োজনে)  
    },  
    targets: {  
      android: 98,  
      chrome: 98,  
      edge: 98,  
      firefox: 97,  
      ios_saf: 15,  
      safari: 15,  
      opera: 83,  
      samsung: 16,  
    },  
    browserslist: null,   
  },  
}));  
~~~

সত্যি বলতে, আমার এতে খুব বেশি আগ্রহ নেই, তাই বলার মতো বিশেষ কিছু নেই।
সম্ভবত ডিফল্ট সেটিংসই যথেষ্ট, তাই অপশন ছাড়া রাখলেও ভালো হবে বলে মনে করি।

মিনিফাই HTML

মিনিফাই HTML সত্যি বলতে, আগের ধাপে ইতিমধ্যেই কিছুটা অপ্টিমাইজেশন করা হয়েছে, তাই এটি কেবল একটি কৌতূহল হিসেবে যে এমন কিছুও আছে।

import minifyHTML from "lume/plugins/minify_html.ts";  
~~~  
site.use(minifyHTML());

বিল্ড হওয়ার পর HTML ফাইলটি দেখতে এমন হবে।
যারা সরাসরি HTML ফাইল নিয়ে কাজ করেন, তাদের কাছে এটি হয়তো বিরক্তিকর মনে হতে পারে, কিন্তু আমি আসলে বিল্ডের আগের .md ফাইল বা LumeCMS ব্রাউজার ছাড়া এটি স্পর্শ করি না, তাই আমি খুব বেশি চিন্তা করি না।

ফলাফল
যদি গুগল-সম্পর্কিত লোডিং না থাকে, তবে এটি দ্রুত।

সত্যি বলতে, শেষ পর্যন্ত এটি বাহ্যিক লোডিং কীভাবে পরিচালনা করা হবে তার উপর নির্ভর করে।
হুম... আসলে, আমার উদ্দেশ্য ছিল যতটা সম্ভব কম ম্যানুয়াল কাজ করে দ্রুত করা, তাই আমি এর বেশি গভীরে যাব না। আমি সন্তুষ্ট নই, তাই হয়তো নেটওয়ার্ক প্যানেলের দিকে তাকিয়ে আরও কিছু পরিবর্তন করব। এই পর্যন্তই।
এটি কিছুটা অস্পষ্ট সমাপ্তি, তবে আবার দেখা হবে।

উল্লেখ্য, রাত ১টার দিকে ঘুম ভেঙে হালকা মেজাজে এটি নিয়ে কাজ করতে গিয়ে এমনটা হয়েছে। তথাকথিত, হালকা মেজাজের সময়। মোফু-মোফু সময়ও দিন।