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 सेकंदांपेक्षा जास्त वेळ घेते, ते कसे ऑप्टिमाइझ करायचे? ).

, शोधण्यासाठी ब्लूम फिल्टर वापरा, उपसर्ग शोधासाठी वापरला जाऊ शकत नाही (उदाहरणार्थ, goo TinySearch करा, 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 अंमलबजावणी" इंग्रजी / चीनी .

अनुक्रमित डीबी उच्च समवर्ती लेखन

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 प्रविष्ट केला जातो, तेव्हा words आणि work सारखे wor सह उपसर्ग असलेले शब्द प्रदर्शित केले जातात.

शोध कर्नल शब्द विभाजनानंतर शेवटच्या शब्दासाठी 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 मुक्त स्रोत स्वयं-विकसित शुद्ध फ्रंट-एंड शोध, आकाराने लहान आणि जलद प्रतिसाद, सध्याच्या शुद्ध फ्रंट-एंड पूर्ण-मजकूर शोधातील उणीवा दूर करते आणि वापरकर्ता अनुभव प्रदान करते.