يلا نتكلم شوية عن ال modern build tools في #javascript و #Nodejs
علي مر سنين طويلة كنت بعتمد علي #webpack بس قررت استتغني عنها واستخدم #esbuild و #vitejs وتعالوا احكيلكم عن تجربتي مع ال tools الجديدة
في الاول خلينا نفهم webpack بتشتغل ازاي خلف الكواليس ولية اصلا بنستخدمه!
ويباك عبارة عن bundling tool بتجمع ال resources من مصادر مختلفة وبتحولها عن طريق loaders
مثلا لو قابله ملف typescript بيحوله لكود javascript عن طريق ts-loader وبيحط الكود دة في ال output النهائي
في الاول webpack بيدخل ال entry point وهو الملف الرئيسي لل app وليكن مثلا src/index.ts
وكل اما يقابله import statement بيروح للملف المطلوب ويشتغل عليه ويجيب الكود النهائي بعد مايحوله لكود javascript يحطه في ال output
طب لية اصلا بنحتاج ن bundle الملفات بتاعتنا بالطريقة دي؟
من غير webpack نقدر نشغل الابليكيشن بتاعنا عادي جدا، ونقدر نحول ملفات #typescript لاكواد javsscript قابلة للتنفيذ من غير اي loaders بس هنا هيقابلنا مشكلة ...
مع كل import في كل ملف هنحتاج نعمل round trip عشان نجيب الملف المطلوب، واللي هنلاقيه هو كمان جواه imports كتير وكل ملف منهم هيطلب ملفات تانية وهكذا
في الاخر هنلاقي نفسنا بنعمل round trips كتير ودة بيبطأ الابليكيشن بتاعنا كتير
فبنجمع الاكواد دي كلها في ملف واحد بحيث يتطلب مرة واحدة عن طريق network trip واحدة
ويباك مش بس بيبندل الابليكيشن بتاعك، انما بيعمل عمليات كتير ورا الكواليس بتظبطلك ال performance بتاع الابليكيشن بتاعك كويس جدا زي مثلا عمل tree shaking لل dead ends وللاكواد غير المستخدمة
وكمان بيعمل optimization و minifying للكود عشان يكون تنفيذه اسرع
و esbuild بيقوم بنفس المهمة بالظبط بس بطريقة مختلفة شوية وبيتفوق علي webpack في شوية نقط
- اسرع من webpack ١٠ مرات، والسبب في كدة انه native code
لو ماتعرفش يعني اية native code هتلاقيني عامل بوست بيشرح الموضوع بالتفصيل، بس الخلاصة انه بيبأة كود مكتوب بلغة برمجة تانية ممكن تنفذ الجزء دة من الكود بطريقة افضل وبيشتغل جوة nodejs عادي جدا
بس مش دة السبب الاساسي اللي خلاني اسيب webpack وانقل ل esbuild
- كنا بنحتاج نسطب loaders ونظبط ال configurations بتاعة webpack اما esbuild فاهم انك بت build بيه node application من غير ماتسطب اي loaders او تعمل اي configurations
وبرضو مش دة السبب اللي خلاني انقل ل esbuild
السبب التالت والرئيسي اللي خلاني اسيب webpack وانقل ل esbuild و vitejs هتكلم عنه بالتفصيل البوست القادم
Forwarded fromDibo
1June 30, 2023 2.5K 4
