brief: | i18n.site आब सर्वरलेस पूर्ण-पाठ खोज के समर्थन करैत अछि.

ई लेख शुद्ध फ्रंट-एंड पूर्ण-पाठ खोज प्रौद्योगिकी केरऽ कार्यान्वयन के परिचय दै छै, जेकरा म॑ IndexedDB द्वारा निर्मित उल्टा अनुक्रमणिका, उपसर्ग खोज, शब्द विभाजन अनुकूलन आरू बहु-भाषा समर्थन शामिल छै ।

मौजूदा समाधान के तुलना म॑ i18n.site केरऽ शुद्ध फ्रंट-एंड फुल-टेक्स्ट खोज आकार म॑ छोटऽ आरू तेज छै, जे छोटऽ आरू मध्यम आकार के वेबसाइट जेना कि दस्तावेज आरू ब्लॉग लेली उपयुक्त छै, आरू ऑफलाइन उपलब्ध छै ।

शुद्ध फ्रंट-एंड उल्टा पूर्ण-पाठ खोज

क्रम

कई सप्ताह के विकास के बाद, i18n.site (एकटा विशुद्ध रूप स स्थिर markdown बहुभाषीअनुवाद & वेबसाइट निर्माण उपकरण) आब शुद्ध फ्रंट-एंड पूर्ण-पाठ खोज के समर्थन करैत अछि |

ई i18n.site खोज प्रभाव के अनुभव करय लेल i18n.site शुद्ध फ्रंट-एंड पूर्ण-पाठ खोज के तकनीकी कार्यान्वयन साझा करत.

कोड ओपन सोर्स : खोज कर्नेल / इंटरैक्टिव इंटरफेस

सर्वरलेस पूर्ण-पाठ खोज समाधानक समीक्षा

छोट आरू मध्यम आकार के विशुद्ध रूप स॑ स्थिर वेबसाइट जेना कि दस्तावेज/व्यक्तिगत ब्लॉग लेली, स्व-निर्मित पूर्ण-पाठ खोज बैकएंड के निर्माण बहुत भारी छै, आरू सेवा-मुक्त पूर्ण-पाठ खोज अधिक आम विकल्प छै.

सर्वर रहित पूर्ण-पाठ खोज समाधान दू व्यापक श्रेणी मे आबै छै:

पहिल, समान algolia.com तृतीय पक्ष खोज सेवा प्रदाता पूर्ण-पाठ खोज कें लेल फ्रंट-एंड घटक प्रदान करयत छै.

ऐन्हऽ सेवा म॑ खोज केरऽ मात्रा के आधार प॑ भुगतान के जरूरत होय छै, आरू अक्सर मुख्य भूमि चीन म॑ उपयोगकर्ता लेली वेबसाइट के अनुपालन जैसनऽ मुद्दा के कारण अनुपलब्ध होय जाय छै ।

एकरऽ उपयोग ऑफलाइन नै करलऽ जाब॑ सकै छै, इंट्रानेट प॑ इस्तेमाल नै करलऽ जाब॑ सकै छै, आरू एकरऽ बहुत सीमा छै । एहि लेख मे बेसी चर्चा नहि कयल गेल अछि।

दोसर अछि शुद्ध फ्रंट-एंड फुल-टेक्स्ट खोज।

वर्तमान मे, आम शुद्ध फ्रंट-एंड पूर्ण-पाठ खोज मे lunrjs आ ElasticLunr.js ( lunrjs माध्यमिक विकास पर आधारित) शामिल अछि ।

lunrjs अनुक्रमणिका बनेबाक दूटा तरीका अछि, आ दुनूक अपन समस्या अछि।

1. पूर्व निर्मित अनुक्रमणिका फाइल

   चूँकि अनुक्रमणिका मे सभ दस्तावेजक शब्द होइत अछि, तेँ एकर आकार पैघ होइत अछि । जखन कखनो कोनों दस्तावेज जोड़ल जायत छै या संशोधित कैल जायत छै, तखन एकटा नव अनुक्रमणिका फाइल लोड करनाय आवश्यक छै. एहि सं यूजर के इंतजार के समय बढ़त आओर बैंडविड्थ के बहुत खपत होएत.

2. दस्तावेज लोड करू आ मक्खी पर अनुक्रमणिका बनाउ

   सूचकांक बनाना कम्प्यूटेशनल रूप सं गहन काज छै हर बेर जखन अहां ओकरा एक्सेस करय छी तखन इंडेक्स कें पुनर्निर्माण सं स्पष्ट अंतराल आ खराब उपयोगकर्ता अनुभव होयत.

lunrjs के अलावा, किछु आओर पूर्ण-पाठ खोज समाधान अछि, जेना :

fusejs

एहि समाधानक प्रदर्शन अत्यंत खराब अछि आओर एकर उपयोग पूर्ण-पाठ खोजक लेल नहि कएल जा सकैत अछि (देखू Fuse.js लंबा क्वेरी मे 10 सेकेंड सँ बेसी समय लगैत अछि, एकरा कोना अनुकूलित कएल जाए? ).

TinySearch goo good google

मौजूदा समाधान के कमी के कारण i18n.site एकटा नव शुद्ध फ्रंट-एंड फुल-टेक्स्ट खोज समाधान विकसित केलक, जेकर निम्नलिखित विशेषता अछि :

1. बहु-भाषा खोज कें समर्थन करयत छै आ आकार मे छोट छै पैकेजिंग gzip कें बाद खोज कर्नेल कें आकार 6.9KB छै (तुलना कें लेल, lunrjs कें आकार 25KB छै.
2. indexedb के आधार पर एकटा उल्टा सूचकांक बनाउ, जे कम मेमोरी लैत अछि आओर तेज अछि.
3. जखन दस्तावेजक कें जोड़ल/संशोधित कैल जायत छै, तखन केवल जोडल गेल या संशोधित दस्तावेजक कें पुन: अनुक्रमित कैल जायत छै, जे गणना कें मात्रा मे कमी करयत छै.
4. उपसर्ग खोज कें समर्थन करयत छै आ उपयोगकर्ता टाइप करय कें दौरान खोज परिणाम वास्तविक समय मे प्रदर्शित कयर सकय छै.
5. ऑफलाइन उपलब्ध अछि

नीचाँ i18n.site तकनीकी क्रियान्वयन विवरण विस्तार सं परिचय देल जायत.

बहुभाषी शब्द विभाजन

शब्द विभाजन ब्राउज़र केरऽ मूल शब्द विभाजन Intl.Segmenter के उपयोग करै छै, आरू सब मुख्यधारा के ब्राउज़र ई इंटरफेस के समर्थन करै छै.

शब्द विभाजन coffeescript कोड निम्नलिखित अछि

SEG = new Intl.Segmenter 0, granularity: "word"

seg = (txt) =>
  r = []
  for {segment} from SEG.segment(txt)
    for i from segment.split('.')
      i = i.trim()
      if i and !'| `'.includes(i) and !/\p{P}/u.test(i)
        r.push i
  r

export default seg

export segqy = (q) =>
  seg q.toLocaleLowerCase()

में:

• /\p{P}/ एकटा नियमित अभिव्यक्ति अछि जे विराम चिन्हसँ मेल खाइत अछि विशिष्ट मिलान चिन्हमे शामिल अछि : ! " # $ % & ' ( ) * + , - . / : ; < = > ? @ [ \ ] ^ _ { | } ~। ।</p><ul><li> split('.')एहि लेल अछि जेFirefoxब्राउज़र शब्द विभाजन. ` खंड नहि करैत अछि .

सूचकांक भवन

IndexedDB मे 5 ऑब्जेक्ट स्टोरेज टेबल बनाओल गेल छल :

• word : id -
• doc : id - दस्तावेज url - दस्तावेज संस्करण संख्या
• docWord : दस्तावेज के सरणी id - शब्द id
• prefix : उपसर्ग - शब्द id के सरणी
• rindex : शब्द id - दस्तावेज id : पंक्ति संख्या के सरणी

दस्तावेज url आओर संस्करण संख्या ver क सरणी मे पास करू, आओर खोजू जे दस्तावेज तालिका doc मे मौजूद अछि या नहि.जँ ई मौजूद नहि अछि, त' एकटा उल्टा अनुक्रमणिका बनाउ. संगे-संग ओहि दस्तावेजक लेल उल्टा अनुक्रमणिका हटाउ जे पास नहि कएल गेल छल.

अइ तरह सं वृद्धिशील अनुक्रमणिका प्राप्त कैल जा सकय छै आ गणना कें मात्रा कम भ सकय छै.

फ्रंट-एंड बातचीत मे, सूचकांक कें लोडिंग प्रगति पट्टी कें प्रदर्शित कैल जा सकय छै ताकि पहिल बेर लोड करय कें समय अंतराल सं बचल जा सकय "एनीमेशन कें साथ प्रगति पट्टी, एकल progress + शुद्ध css कार्यान्वयन पर आधारित" अंग्रेजी / चीनी .

IndexedDB उच्च समवर्ती लेखन

परियोजना के एसिंक्रोनस एनकैप्सुलेशन के आधार पर idb अछि IndexedDB

IndexedDB पढ़ैत अछि आओर लिखैत अछि एसिंक्रोनस अछि. अनुक्रमणिका बनाबैत काल, अनुक्रमणिका बनेबाक लेल दस्तावेज एक संग लोड कएल जाएत.

प्रतिस्पर्धी लेखन कें कारण आंशिक डाटा हानि सं बचय कें लेल, अहां नीचा देल गेल coffeescript कोड कें संदर्भित कयर सकय छी आ प्रतिस्पर्धी लेखन कें रोकय कें लेल पढ़य आ लिखय कें बीच ing कैश जोड़ सकय छी.

pusher = =>
  ing = new Map()
  (table, id, val)=>
    id_set = ing.get(id)
    if id_set
      id_set.add val
      return

    id_set = new Set([val])
    ing.set id, id_set
    pre = await table.get(id)
    li = pre?.li or []

    loop
      to_add = [...id_set]
      li.push(...to_add)
      await table.put({id,li})
      for i from to_add
        id_set.delete i
      if not id_set.size
        ing.delete id
        break
    return

rindexPush = pusher()
prefixPush = pusher()

परिशुद्धता आ स्मरण

खोज पहिने उपयोगकर्ता द्वारा दर्ज कीवर्ड के सेगमेंट करत.

मानल जाय जे शब्द विभाजन के बाद N शब्द अछि जखन परिणाम वापस कएल जाएत तखन पहिने सभ कीवर्ड वाला परिणाम वापस कएल जाएत, आओर फेर N-1 , N-2 ,..., 1 कीवर्ड वाला परिणाम वापस कएल जाएत.

पहिने प्रदर्शित खोज परिणाम क्वेरी कें सटीकता सुनिश्चित करयत छै, आ बाद मे लोड कैल गेल परिणाम (लोड मोर बटन पर क्लिक करूं) रिकॉल दर सुनिश्चित करयत छै.

मांग पर भार

प्रतिक्रिया गति मे सुधार कें लेल, खोज ऑन-डिमांड लोडिंग कें लागू करय कें लेल yield जनरेटर कें उपयोग करयत छै, आ limit बेर जखन कोनों परिणाम कें पूछताछ कैल जायत छै तखन वापस आ जायत छै.

ध्यान राखू जे हर बेर जखन अहाँ yield बाद फेर स खोजब , तखन अहाँ कए IndexedDB क क्वेरी लेनदेन कए फेर स खोलबाक जरूरत अछि .

उपसर्ग वास्तविक समय खोज

उपयोगकर्ता टाइप करय कें दौरान खोज परिणाम प्रदर्शित करय कें लेल, उदाहरण कें लेल, जखन wor दर्ज करल जाय छै, तखन wor कें उपसर्ग वाला शब्द जेना words आरू work प्रदर्शित करल जाय छै.

खोज कर्नेल शब्द विभाजन के बाद अंतिम शब्द के लेल prefix तालिका के उपयोग करत जे ओकर उपसर्ग वाला सब शब्द के खोजत, आओर क्रम में खोज करत.

एंटी-शेक फंक्शन debounce उपयोग फ्रंट-एंड इंटरैक्शन (निम्नलिखित तरीका सं लागू) मे सेहो कैल जायत छै, जे उपयोगकर्ता इनपुट कें आवृत्ति कें कम करय कें लेल खोज कें ट्रिगर करय आ गणना कें मात्रा कें कम करय कें लेल करल जाय छै.

export default (wait, func) => {
  var timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(func.bind(this, ...args), wait);
  };
}

ऑफलाइन उपलब्ध अछि

अनुक्रमणिका तालिका मूल पाठ कें संग्रहण नहि करयत छै, केवल शब्दक कें संग्रहीत करयत छै, जे भंडारण कें मात्रा कें कम करयत छै.

खोज परिणाम कें हाइलाइट करय कें लेल मूल पाठ कें पुनः लोड करय कें आवश्यकता होयत छै, आ service worker मिलान करनाय बार-बार नेटवर्क अनुरोध सं बच सकय छै.

एकरऽ साथ ही, कैन्हेंकि service worker सब लेख क॑ कैश करै छै, एक बार उपयोगकर्ता न॑ खोज करला के बाद, खोज सहित पूरा वेबसाइट ऑफलाइन उपलब्ध होय जाय छै ।

मार्कडाउन दस्तावेज क प्रदर्शन अनुकूलन

i18n.site क शुद्ध फ्रंट-एंड खोज समाधान MarkDown दस्तावेज क लेल अनुकूलित अछि.

खोज परिणाम प्रदर्शित करला पर अध्याय के नाम प्रदर्शित होय जैतै आरू क्लिक करला पर अध्याय नेविगेट होय जैतै ।

संक्षेप मे बताइए

उल्टा पूर्ण-पाठ खोज विशुद्ध रूप स फ्रंट एंड पर लागू, कोनो सर्वर क जरूरत नहि. छोट आ मध्यम आकारक वेबसाइट जेना दस्तावेज आ व्यक्तिगत ब्लॉग लेल ई बहुत उपयुक्त अछि ।

i18n.site ओपन सोर्स स्व-विकसित शुद्ध फ्रंट-एंड खोज, आकार मे छोट आ तेज प्रतिक्रिया, वर्तमान शुद्ध फ्रंट-एंड पूर्ण-पाठ खोज कें कमी कें हल करयत छै आ बेहतर उपयोगकर्ता अनुभव प्रदान करयत छै.