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 उच्च समवर्ती लेखन

परियोजना को एसिन्क्रोनस encapsulation मा आधारित 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 खुला स्रोत स्व-विकसित शुद्ध फ्रन्ट-एन्ड खोज, आकारमा सानो र छिटो प्रतिक्रिया, हालको शुद्ध फ्रन्ट-एन्ड पूर्ण-पाठ खोजका कमजोरीहरू समाधान गर्दछ र राम्रो प्रयोगकर्ता अनुभव प्रदान गर्दछ।