مشكلة الأداء الضعيف عند تشغيل المشروع في وضع الإنتاج (production mode) وتجاوز حجم ملف bundle.js

لاحظت أن مشكلة حجم ملف bundle.js تنتج عن استخدام العديد من المكتبات الكبيرة والغير ضرورية في مشروعك. يتسبب ذلك في زيادة حجم الملف النهائي وتأثير سلبي على أداء التحميل والأداء العام للتطبيق.

لتحسين وضغط حجم ملف bundle.js وزيادة سرعة التحميل، يمكنك اتباع بعض الخطوات:

مراجعة الاعتمادات (dependencies): قم بتحليل المكتبات والموديولات التي تستخدمها في مشروعك وتأكد من أنك تستخدم فقط تلك التي تحتاجها حقًا. قد تحتاج إلى التخلص من المكتبات الزائدة والغير ضرورية.

تحسين صور المشروع: قم بتحسين وضغط الصور المستخدمة في مشروعك باستخدام أدوات مثل TinyPNG أو ImageOptim. ضغط الصور يمكن أن يقلل بشكل كبير من حجم الملف النهائي.

تحسين إعدادات webpack: قم بمراجعة ملف webpack.config.js وتحسين إعداداته لتحقيق أفضل ضغط وتقليل حجم الملف النهائي. يمكنك استخدام أدوات مثل Babel وUglifyJS وOptimizeCSSAssetsPlugin لضغط الكود وتحسينه.

استخدام تقنيات تحميل متقدمة: يمكنك استخدام Lazy Loading وCode Splitting لتحميل الكود بشكل ديناميكي فقط عند الحاجة إليه. هذا يساعد في تقليل حجم الملف الأولي وتحسين أداء التحميل.

استخدام CDN: يمكنك استخدام خدمات توزيع المحتوى (CDN) لتحسين سرعة التحميل. يقوم CDN بتخزين ملفات التطبيق في خوادم متعددة حول العالم، مما يساعد على تحميلها بشكل أسرع للمستخدمين في مواقع مخ

يبدو أنك قمت بتحميل ملف الـ node_modules على GitHub وهذا خطأ، حيث لا ينبغي ان يتم رفع مجلد الـ node_modules، وربما يكون هذا هو سبب البطئ، كذلك فلا ينبغي أن يتم رفع ملف الـ build أيضاً إلا إذا كنت تريد استخدام GitHub pages.

لتجنب رفع المجلدات `node_modules` و `build` على GitHub، يمكنك إنشاء ملف باسم `.gitignore` في المجلد الرئيسي لمشروعك وإضافة هذه المجلدات إلى هذا الملف.

يعمل ملف `.gitignore` على تجاهل الملفات والمجلدات المحددة عند الرفع على GitHub.

هذا مثال على محتوى ملف `.gitignore`:

node_modules/
build/

بهذه الطريقة، لن يتم رفع المجلدات `node_modules` و `build` على GitHub.

قمت برفع مجلد node_modules وهو يحتوي على كافة الحزم الخاصة بالمشروع، وهو أمر غير صحيح، لذلك عليك بإضافة ملف .gitignore لمجلد المشروع لديك ولذلك رفع الكود المصدري فقط وتجاهل مجلدات مثل  node_modules وdist وbuild.

وقد شرحت ذلك هنا:

وبعد تطبيق الشرح السابق، عليك بحذف المستودع وإعادة رفع المشروع من جديد وإليك طريقة حذف المستودع:

وإليك طريقة رفع المشروع على GitHub pages أو استضافة مجانية مثل Netlify:

ونصيحتي إليك هي برفع مجلد build أو dist على فرع منفصل داخل المستودع ثم استخدامه في GitHub pages أي أنشيء مستودع داخل المجلد ثم قم برفع محتوياته إلى فرع منفصل.

أو بطريقة أسهل استخدم Netlify وستقوم برفع مجلد build مباشرًة إلى الاستضافة:

يبدو أن المشكلة ليست في webpack فحسب،  قد يكون هناك عدة عوامل تسبب هذه المشكلة، وهي كالتالي:

1- حجم الصور: يمكن استخدام أدوات مثل TinyPNG لضغط حجم الصور وتحسين أدائها.

2- تمكين الضغط: يمكن استخدام أدوات مثل Gzip و Brotli لضغط ملفات JavaScript و CSS ، مما يقلل بشكل كبير من حجم الملفات.

3- حذف المكتبات غير الضرورية: إذا كنت تستخدم بعض المكتبات التي لا تحتاجها حقًا ، فحذفها سوف يساعد في تقليل حجم الملف النهائي.

4- ال caching: يمكنك تمكين caching للملفات، حيث يتم تخزين نسخة مختزنة من الملفات بمتصفح العميل، مما يقلل من عدد الطلبات إلى الخادم.

5- lazy loading: تطبيق عملية التحميل التلقائي للصور والمكتبات التي لا تحتاجها المستخدم في الوقت الحالي يمكن أن يقلل من وقت التحميل.

يمكنك القيام بكل هذه التعديلات عن طريق التحديث في ملف webpack.config.js، أو استخدام مكتبات مثل Webpack Bundle Analyzer التي تقوم بتحليل ملف bundle.js لإيجاد الملفات التي تسبب المشكلة و قم بالعمل على تحسينها.