प्रतिक्रिया अनुप्रयोगों का उपयोग कर वेब अनुप्रयोग के साथ कैशिंग समस्या

मैं प्रतिक्रियाओं और वेबपैक का उपयोग करके विकसित एक वेब अनुप्रयोग पर काम कर रहा हूं। प्रत्येक परिनियोजन के बाद, हमें उपयोगकर्ताओं को ब्राउज़र कैश साफ़ करने और अपने ब्राउज़र को पुनरारंभ करने के लिए कहना होगा। मुझे लगता है कि जावास्क्रिप्ट बंडल फ़ाइल और सीएसएस फ़ाइल दोनों उपयोगकर्ता ब्राउज़र पर कैश हो रही हैं।प्रतिक्रिया अनुप्रयोगों का उपयोग कर वेब अनुप्रयोग के साथ कैशिंग समस्या

हम ब्राउज़र को इन फ़ाइलों को कैश करने या सर्वर से नवीनतम फ़ाइलों को डाउनलोड करने के लिए कैसे मजबूर कर सकते हैं।

<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>My App</title> 
      <link rel="stylesheet" href="styles.css" media="screen" charset="utf-8"> 
    </head> 
    <body> 
    <div id="app"></div> 
    <script src="bundle.js"></script> 
    </body> 
</html>

स्रोत

2016-04-07 OpenStack

आप html-webpack-plugin

plugins: [ 
    new HtmlWebpackPlugin({ 
     hash: true 
    }) 
]

हैश का उपयोग कर सकते हैं: सच | गलत होने पर गलत तो स्क्रिप्ट और सीएसएस फ़ाइलों को शामिल करने के लिए एक अद्वितीय वेबपैक संकलन हैश संलग्न करें। यह कैश बस्टिंग के लिए उपयोगी है।

स्रोत

2016-04-07 16:07:54 Jack

त्वरित उत्तर के लिए धन्यवाद। मुझे निम्न त्रुटि मिल रही है 'संसाधन लोड करने में विफल: सर्वर ने' bundle.js? 1c03629db68f03ac936e' फ़ाइल के लिए 404 (नहीं मिला) 'की स्थिति का जवाब दिया और इसी तरह की त्रुटि 'styles.css? 1c03629db68f03ac936e' फ़ाइल के लिए आ रही है। मैंने एनपीएम पैकेज स्थापित किया और सरल ने वेबपैक कॉन्फ़िगरेशन फ़ाइल में आपके द्वारा दिखाए गए कोड को जोड़ा। इमारत और तैनाती के बाद मुझे त्रुटि मिल रही है। जब मैं स्थानीय रूप से एप्लिकेशन चलाता हूं तो मुझे निम्न त्रुटि मिलती है 'ncaught Invariant उल्लंघन: _registerComponent (...): लक्ष्य कंटेनर एक DOM तत्व नहीं है। – OpenStack

सुनिश्चित करें कि' HtmlWebpackPlugin' से उत्पन्न HTML फ़ाइल सही ढंग से फ़ाइलों का संदर्भ दे रही है। मुझे नहीं पता कि आप कैसे प्रोजेक्ट स्थापित हैं, इसलिए ऐसा लगता है कि आपकी वितरण निर्देशिका संरचना इससे अलग है। – Jack

मुझे लगता है कि समस्या यह है कि क्वेरी स्ट्रिंग सही प्रारूप में नहीं है। कुंजी मूल्य जोड़ी के बजाय, फ़ाइल सिर्फ मूल्य है। इसका मतलब है कि 'bundle.js? v = 1c03629db68f03ac936e' के बजाय इसका मतलब 'bundle.js? 1c03629db68f03ac936e' के रूप में आ रहा है। 'कुंजी' गुम है। क्या मुझे कॉन्फ़िगरेशन विकल्प याद आया। – OpenStack

बिना किसी अतिरिक्त सामान के इस समस्या से बचने का एक आसान तरीका है। वेबपैक की अंतर्निहित हैशिंग क्षमता का उपयोग करें।

आप अपने बंडल here पर हैश जोड़ने के बारे में पढ़ सकते हैं। जबकि इसका शीर्षक "लांग टर्म कैशिंग" है, यह तब भी सही है जब आपकी फाइलें नहीं बदली जातीं। लेकिन अगर आप अपने बंडल का पुनर्निर्माण करते हैं तो यह नया अनूठा हैश प्राप्त करता है, इसलिए ब्राउज़र को लगता है कि यह नई फाइल है और इसे डाउनलोड करें।

स्रोत

2016-04-07 17:17:55 gyzerok

मानते हुए कि मैं अपने webpack.config फ़ाइल में 'filename:' [हैश] .bundle.js 'का उपयोग कर रहा हूं। जो इस '3d161aa1fedaca1ca95b.bundle' जैसी फ़ाइल उत्पन्न करता है। अब मैं अपनी index.html फ़ाइल को कैसे अपडेट करूं जो अभी भी bundle.js फ़ाइल सहित है <'script src =" bundle.js ">'। लेख में यह भी कहा गया है कि ध्यान दें कि आपको अपने एचटीएमएल में हैश के साथ एंट्री खंड को संदर्भित करने की आवश्यकता है। आप आंकड़ों से हैश या फ़ाइल नाम निकालना चाहते हैं। क्या मुझे यहां कुछ याद आ रहा है? – OpenStack

आप अंतिम अध्याय https://webpack.github.io/docs/long-term-caching.html#get-filenames-from-stats में इसका उत्तर पा सकते हैं। निर्माण के बाद आप वास्तविक बंडल नाम देखने के लिए figures.json में देख सकते हैं और फिर इसे अपने HTML टेम्पलेट पर भेज सकते हैं। – gyzerok

उत्तर के लिए धन्यवाद। मैंने 'एसेट्स-वेबपैक-प्लगइन' को देखा, वे कहते हैं कि 'यह प्लग-इन जेनरेट की गई संपत्ति के पथों के साथ एक जेसन फ़ाइल आउटपुट करता है ताकि आप उन्हें कहीं और से ढूंढ सकें।' लेकिन मुझे कोई उदाहरण नहीं दिखता है जो बताता है वे 'index.html' – OpenStack

प्रतिक्रिया अनुप्रयोगों का उपयोग कर वेब अनुप्रयोग के साथ कैशिंग समस्या

उत्तर

संबंधित मुद्दे