خب اول از همه باید بگم که به صورت پیش فرض الان دستور import به صورت یه دونه اعلان ثابت(static declarations) هست خب این یعنی چی؟ در اصل ما یه آدرس که از جنس رشته هست رو بهش می دیم که بهش می گیم فلان ماژول رو از فلان جا برام بیارش خب چیزی که اینجا جالبه اینه که عملا عملیات linking و binding اون ماژول با فایل فعلی ما در زمان اجرا اتفاق نمی وفته و قبلش اتفاق میوفته یعنی همون زمانی که ما فایلمون رو لود می کنیم اون ماژول هم لود میشه نه زمانی که از اون ماژول توی صفحه استفاده می کنیم . حالا می خوام بگم که شما فرض کن 100 تا ماژول 10kbداری توی صفحه که اگه دقت کنی یعنی 1mb همون اول کار لود میشه به نظرم من که چیز بدیه به نظر شما چطور؟
خب تا اینجای کار فهمیدیم که عملیات فعلی import چجوری اتفاق میوفته و یه نمونه از مشکلی که می تونه برای ما هم به وجود بیاره رو هم مثال زدیم.البته بگم که یه جاهایی هم بدردمون میخوره مخصوصا وقتی بخوایم همه چیز رو یک جا باندل کنیم که آفلاین کار کنه .
خب حالا بیاین با هم به این فکر کنیم که ما می تونه اون ماژول مورد نظر خودمون رو زمان اجرا اضافه کنیم به جای اینکه قبل زمان اجرا باشه (حس می کنم یکم فارسی هاش اذیت میکنه runtime & pre-runtime خب یکم بهتر شد.) و این می تونه این ندای امید بخش رو برسونه که ما صرفا زمانی یک ماژول رو import می کنیم که به کار آید. بزارید من یه مثال بزنم که همه چیز واضح تر بشه واسمون نظرتون چیه؟
فرض کنیم ما دوتا فایل english.js و persian.js رو داریم. بدین صورت:
//perisan.js export default persianText = () => { return { something } }
//english.js export default englishText = () => { return { something }}
فرض کنید این دوتا فایل کلی چیزهای دیگه هم داخلشه (صرفا از قوه تخیل خودتون استفاده کنید.) به نظرتون نیازه که وقتی کاربر فارسی زبان داخل سایت هست فایل مربوط به کاربر انگلیسی زمان هم لود شده باشه؟
و در این جاست که به dynamic import نیاز مند میشیم. خب حالا استفاده از dynamic import میتونه به روش های مختلفی انجام بشه که توی قسمت بعدی این سری با هم بررسی می کنیم دو روشش رو سخت نگیرید زودی بهش می رسیم. راستی اگه خوشتون اومد و منتظر سری بعدی هم هستید توییتر منو می تونید فالو کنید تا زودتر مطلع بشید ازش ممنون که وقت گذاشتید!
لینک قسمت دوم
