درک راحت تر dynamic imports در React قسمت دوم

خب بعد اینکه مفهوم اولیه dynamic import رو فهمیدم (لینک قسمت اول) نیاز داریم که بتونیم اون رو داخل React پیاده سازی کنیم روش اولی که قراره امروز استفاده کنیم روش راحت تری نسبت به روش دوم هست برای اینکه بتونیم کار رو راحت شروع کنیم اول از همه با CRA یه پروژه رو ایجاد می کنیم تا بتونیم سفرمون به اعماق dynamic import آغاز کنیم .

npx create-react-app reactdynamicimport

بعد از اینکه پروژمون ایجاد شد فایل src/app.js رو باز می کنیم و کاستوم می کنیم.

function App() {
    const [component, setComponent] = React.useState("i am initial text");
    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                {component}
           </header>
        </div>
        );
 }
 export default App;

خب حالا صفحه ای که لود میشه به صورت زیر خروجی داره

خب حالا پوشه src/comps رو ایجاد می کنیم و دو فایل persian.js و english.js رو ایجاد می کنیم که محتوای این دو فایل

// english.js
export default (text = "I'm English Boiiiiiiii") => <p>{text}</p>;
// persian.js
export default (text = "زبان مادری ما فارسی است") => <p>{text}</p>;

از اونجایی که CRA به صورت پیش فرض import() رو داخل خودش جا داده توی این قسمت از اون استفاده می کنیم .

خب حالا دو تابع برای فراخوانی فارسی و انگلیسی داریم .

const loadpresian = () => {
    import("./comps/persian")
        .then(persian => {
            setComponent(persian.default());
        })
        .catch(err => {
            // Handle failure
        });
};
const loadenglish = () => {
     import("./comps/english")
         .then(english => {
             setComponent(english.default());
          })        
           .catch(err => { 
               // Handle failure
            }); 
};

خب همونجوری که میبینیم این دوتابع زمانی که فراخوانی میشن به صورت خیلی خفن و باحال سعی میکنن فایل js جدید رو import کنن و اگر موفق بشن ما متن داخل اون رو با متن داخل state خودمون عوض می کنیم .
حالا کافیه دو دکمه هم به صفحه اضافه کنیم خب حالا بیایم تست کنیم ببینیم چه اتفاقی افتاد.

<button ={loadpresian}>فارسی</button> 
<button ={loadenglish}>english</button>

خب حالا زمانی که دکمه فارسی رو میزنیم اتفاقی که میوفته اینه که ما میبینیم یه درخواست جدید ثبت می شه که این همون import خودمونه به تصویر زیر توجه کنید!

خب حالا ده بارم که دیگه روی دکمه فارسی کلیک کنیم می بینیم که درخواست برای فایل جدیدی ثبت نمیشه یعنی هر فایل یه بار می تونه import بشه از اون به بعد دیگه توی صفحمون موجوده حالا دکمه English رو میزنیم.

خب حالا میبینیم که باز هم همون اتفاق بالا افتاد :))) و ما به حالتی خیلی خفن تا زمانی که به یک فایل نیاز پیدا نکنیم اون رو اضافه نمی کنیم .

در قسمت آتی دیگه خبری از آماده بودن همه چیز نیست و میخوایم یه سری چیز ها رو خودمون کانفیگ کنیم و به مفهوم Code Splitting هم پی ببریم پس همراه من باشید.