मैं कुछ महीने पहले एक फ्रंटएंड प्रोजेक्ट पर काम कर रहा था। यह प्रोजेक्ट एक माइक्रोफ्रंटेंड था जिसे एक विरासत डैशबोर्ड पर एकीकृत किया जाना था।

माइक्रोफ्रंटेंड दृष्टिकोण का कारण डैशबोर्ड पर जटिलता को कम करना था। मैं इस चुनौती से उत्साहित था और मैं इसमें कूद पड़ा।

मैं वेबपैक, रिएक्ट और टाइपस्क्रिप्ट का उपयोग करके माइक्रोफ्रंटेंड सेटअप करता हूं। मैंने CSS-IN-JS फ्रेमवर्क के रूप में चक्र यूआई का उपयोग किया, एपीआई एकीकरण के लिए एक्सियोस और सब कुछ ठीक रहा। हालाँकि, प्रोजेक्ट का निर्माण आकार लगभग 14 एमबी था। एक माइक्रोफ्रंटेंड के लिए, यह हास्यास्पद रूप से बड़ा था। इसके कारण डैशबोर्ड में पृष्ठ प्रतिक्रिया बहुत धीमी हो गई जहां इसे एकीकृत किया गया था। इसलिए मेरे सामने निर्माण को अनुकूलित करने की एक नई चुनौती प्रस्तुत की गई।

मुझे लगा कि निर्माण इतना बड़ा था क्योंकि मैंने स्टाइलिंग के लिए CSS-IN-JS फ्रेमवर्क का उपयोग किया था। इसलिए मैंने चक्र-यूआई से लेकर एसएएस तक पूरे कोडबेस को दोबारा तैयार किया। अंदाजा लगाइए, बिल्ड का आकार 14 एमबी से बढ़कर लगभग 21 एमबी हो गया है।

तभी मुझे पता चला कि मुद्दा सीएसएस लाइब्रेरी या कोड के बारे में नहीं है बल्कि वेबपैक कॉन्फिगरेशन के बारे में है। मैंने वेबपैक कॉन्फ़िगरेशन के साथ बहुत सारे परीक्षण और त्रुटियां शुरू कीं। फिर मुझे पता चला कि जब मैंने डेवटूल को हटाया, तो बिल्ड का आकार 14 एमबी से लगभग 600 केबी हो गया। फिर मैंने डेवटूल के बारे में वेबपैक दस्तावेज़ की जाँच की। मुझे एहसास हुआ कि यह अनिवार्य नहीं है. अधिक जानकारी यहां:.

यहां मेरे वेबपैक कॉन्फ़िगरेशन की एक झलक है

module.exports = merge(common, {
  name: "client",
  mode: process.env.NODE_ENV,
  devtool: "eval-source-map", //remove devtool
  entry: {
    "microfrontend": "./src/bootstrap.tsx",
  },
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "[name]_[hash].js",
    pathinfo: false,
    publicPath: 'http://localhost:6001/',
  },
  ...
}

संक्षेप में, मेरे सामने आई समस्या का समाधान केवल कोड की एक पंक्ति को हटाकर तय किया गया था।

module.exports = merge(common, {
  name: "client",
  mode: process.env.NODE_ENV,
  entry: {
    "microfrontend": "./src/bootstrap.tsx",
  },
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "[name]_[hash].js",
    pathinfo: false,
    publicPath: 'http://localhost:6001/',
  },
  ...
}

पढ़ने के लिए धन्यवाद। मुझे उम्मीद है कि आप इस मददगार को खोज लेंगे।