Lume का प्रदर्शन ट्यूनिंग करना

9 min

language: ja bn en es hi pt ru zh-cn zh-tw

नमस्ते, मैं अक्षम हूँ।
सर्वर-साइड कैश जैसी पिछली वर्डप्रेस सेटिंग्स वैसी ही थीं, इसलिए मैं उन्हें फिर से बदल दूँगा।

Nginx

Nginx की ओर, जो रिवर्स प्रॉक्सी कर रहा है, सभी आवश्यक सामग्री कैश की जाती है।
इसका मतलब यह है कि अपाचे बैकएंड तक पहुँचने से पहले ही कैश किया जा रहा है, तो आप इसे अपने स्वयं के 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

टर्सर
मैं Terser साइट से Terser के दस्तावेज़ों को देखूँगा।
यह API Reference Minify options structure
का हिस्सा है।

मैं 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,  
  },  
}));  

मैंने आवश्यक हिस्सों को बदल दिया और उन हिस्सों को हटा दिया जो मेरे वातावरण में जोड़ने पर काम नहीं कर रहे थे।

ईमानदारी से कहूँ तो, सेटिंग्स की आसानी से मैं काफी प्रभावित हुआ। क्या JS के लिए यह ठीक है?

### लाइटनिंग सीएसएस
लाइटनिंग सीएसएस

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 फ़ाइल कुछ ऐसी दिखती है। Image
जो लोग सीधे HTML फ़ाइलों को छूते हैं, उन्हें शायद घृणा महसूस होगी, लेकिन मैं वास्तव में उन्हें केवल बिल्ड से पहले .md फ़ाइल या LumeCMS ब्राउज़र से ही छूता हूँ, इसलिए मैं इस पर ज्यादा ध्यान नहीं देता।

परिणाम
यदि Google-संबंधित लोड शामिल नहीं हैं, तो यह तेज़ है।
Image

ईमानदारी से कहूँ तो, यह अंततः इस बात पर आ जाता है कि बाहरी लोडिंग को कैसे संभाला जाए,
हम्म... मेरा इरादा वास्तव में जितना संभव हो सके अपने हाथों से काम किए बिना चीजों को गति देना था, इसलिए मैं अब और गहराई में नहीं जाऊँगा। मैं संतुष्ट नहीं हूँ, इसलिए मैं नेटवर्क पैनल को देखते हुए इसे और समायोजित करूँगा। बस इतना ही।
यह थोड़ा अस्पष्ट अंत है, लेकिन कृपया भविष्य में भी मेरा समर्थन करें।

वैसे, मैं रात 1 बजे के आसपास उठा और एक अस्पष्ट भावना के साथ इसे छेड़छाड़ कर रहा था, और यह ऐसा हो गया। यह तथाकथित 'फ़ुवाफ़ुवा टाइम' (अस्पष्ट समय) है। मुझे 'मोफ़ुमोफ़ु टाइम' (नरम-नरम समय) भी दें।