مشكلة webpack الاساسية معايا انها static bundling tool، يعني اية… — قعدة مبرمجين — TG.ME

قعقعدة مبرمجين@developers_talks · 2.1K subscribersOpen in TelegramOpen

Forwarded fromDIDibo

مشكلة webpack الاساسية معايا انها static bundling tool، يعني اية الكلام دة

لو بصينا علي function زي دي مثلا
function loadFile(file: string){
  return import(file)
}

الكود دة هيضرب في webpack .. عشان نعرف السبب لازم نتعمق اكتر في شغل ويب باك خلف الكواليس

ويب باك هيجيب كل الملفات المحتملة ويحطها جوة static import
والكود اللي احنا عملناه دة معناه انك تقدر تطلب اي فايل من اي مكان في الابليكيشن كله، بمعني اخر ويب باك هيضطر يعمل static import للابليكيشن كله بما في ذلك ال entry point ودة هيعملنا مشاكل كتير وهيدخلنا في cyclic dependencies

عشان نحل المشكلة دي هنحتاج نحددله فولدر معين فيه الملفات اللي ممكن ن import منه فهنعمل تعديل بسيط علي ال function بتاعتنا

function loadFile(file){
return import(`./dynamic/${file})
}

حلينا المشكلة، بس عملنا مشكلة تانية جديدة 😂

مع اننا استخدمنا ES dynamic import بس ويب باك نفسها static tool زي ما قولنا من شوية، فبتحتاج تجهز لستة محددة من الملفات والاسوأ ان الملفات لازم تكون موجودة وقت ال compile time حتي لو كنت ناوي تخلي الملفات دي تتوجد وقت ال runtime

خلف الكواليس لو ويب باك مالقاش الملف المطلوب وقت ال compile time هيرمي error
الطريقة دي بتقيدك كتير

اما esbuild حلت المشكلة دي وبتتعامل مع الموضوع علي انه dynamic import حقيقي بعكس ويب باك اللي بتحولها ل static import

ب esbuild تقدر تعمل حاجة زي كدة
function loadDynamicFile(path: string){
if(!existsSync(path)
download(path)

return import(path)
}

البوست الجاي هنتكلم فيه عن vitejs

t.me/developers_talks/107Translate

4

June 30, 2023 3.6K 4