كنت أعمل على مشروع الواجهة الأمامية منذ بضعة أشهر. كان المشروع عبارة عن واجهة مصغرة كان من المفترض أن يتم دمجها في لوحة المعلومات القديمة.

كان السبب وراء اتباع نهج الواجهة الدقيقة هو تقليل التعقيد على لوحة القيادة. لقد كنت متحمسًا لهذا التحدي وانغمست فيه.

أقوم بإعداد الواجهة المصغرة باستخدام حزمة الويب والتفاعل والكتابة النصية. لقد استخدمت واجهة المستخدم chakra كإطار عمل CSS-IN-JS، ومحاور لتكامل واجهة برمجة التطبيقات (API) وكل شيء سار على ما يرام. ومع ذلك، كان حجم بناء المشروع حوالي 14 ميجابايت. بالنسبة للواجهة الدقيقة، كان ذلك كبيرًا بشكل يبعث على السخرية. أدى ذلك إلى استجابة بطيئة للغاية للصفحة في لوحة المعلومات حيث تم دمجها. لذلك تم تقديم تحدي جديد لي لتحسين البناء.

اعتقدت أن البناء كان بهذا الحجم لأنني استخدمت إطار عمل CSS-IN-JS للتصميم. لذلك قمت بإعادة هيكلة قاعدة التعليمات البرمجية بأكملها من واجهة المستخدم Chakra إلى ساس. خمن ماذا زاد حجم البناء من 14 ميجابايت إلى حوالي 21 ميجابايت ؟؟.

كان ذلك عندما علمت أن المشكلة لا تتعلق بمكتبة CSS أو الكود ولكن تتعلق بتكوين حزمة الويب. لقد بدأت الكثير من التجارب والخطأ في تكوين حزمة الويب. اكتشفت بعد ذلك أنه عندما قمت بإزالة أداة التطوير، ارتفع حجم البنية من 14 ميجابايت إلى حوالي 600 كيلو بايت. ثم قمت بفحص وثائق حزمة الويب حول devtool. أدركت أنه ليس إلزاميا. مزيد من المعلومات هنا:.

إليك نظرة خاطفة على تكوين حزمة الويب الخاصة بي

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/',
  },
  ...
}

شكرا على القراءة. أتمنى أن تجد هذا مفيدًا.