حذف ماژول های اضافه در Next.js

در مطلب قبلی با موضوع "چطور باندل اپ های Next.js رو بررسی کنیم؟" با هم بررسی کردیم که چطور میشه فهمید یک ماژول توی سرور لود شده یا توی کلاینت و اصلا چرا باید به این موضوع اهمیت بدیم.

اگر هنوز نمی دونید به این مقاله سر بزنید.

خوب حالا فرضا که متوجه شدیم! چطور از دستشون خلاص بشیم و کاری کنیم که فقط جایی که بهشون مربوط هست لود بشن. خوب توی این مقاله قراره این موضوع رو با هم بررسی کنیم و 3 تا روش خیلی ساده و کارآمد رو بهتون معرفی کنم.

مقصر کیست؟

خوب؛ این سوال از پایه اشتباه هست. سوالتون باید این باشه:

چطور جلوش رو بگیریم؟

خیلی ساده است. اما قبل از شروع بیاید در مورد مفاهیم صحبت کنیم.

درباره WEBPACK و ماژول های NPM

معمولا، اکثر ماژول های NPM که ما در کلاینت ساید استفاده می کنیم میتونن هم توی کلاینت ساید و هم سرور ساید بدون مشکل کار کنند. خیلی به ندرت پیش میاد که ماژول های سرور ساید رو توی کلاینت ساید استفاده کنیم. برای مثال، این کار رو برای اکثر ماژول های مربوط به Encryption مثل bcrypt انجام میدیم.

پس webpack همیشه سعی می کنه تمام ماژول ها رو تا جایی که میتونه باندل کنه. خودش هم یکسری ابزار برای استفاده ماژول های سرور ساید در کلاینت ساید داره.

رندر سمت سرور (SSR)

سرور ساید رندرینگ (Server Side Rendering) یا به اختصار SSR واقعا جذابه و بهتون اجازه میده کدهای کلاینت ساید رو در سرور اجرا کنید. معمولا هم ماژول هایی که استفاده می کنیم قابلیت استفاده در هر دو مکان رو دارند.

اما بعضی اوقات ما نیاز داریم تا یک ماژول خاص فقط سمت سرور اجرا بشه.

برای مثال، وقتی ما میخوایم یک دیتایی رو دریافت کنیم و نمایش بدیم از ابزارهایی استفاده کنیم که نیاز هست فقط سمت سرور اجرا بشن و اصلا سمت کلاینت کاری باهاشون نداریم.

مثال زیر رو ببینید:

در مثال بالا، هدف ما استفاده از ماژول faker فقط در سرور بوده و بس.

اما webpack ماژول faker رو به باندل کلاینت هم اضافه می کنه. طبیعتا سایز باندل افزایش پیدا میکنه و در نتیجه برنامه ما کندتر خواهد بود.

در تصویر بالا هم مشخص هست که ماژول faker به باندل کلاینت هم اضافه شده.

خوب بریم سراغ راه حل ها و اینکه چطور این هارو مدیریت کنیم.

1. استفاده از EVAL

شما می تونید ماژول مورد نظر رو با استفاده از require و eval فراخونی کنید:

const faker = eval(&quotrequire('faker')&quot)

وب پک توانایی شناسایی و آنالیز چیزهایی که داخل eval هستند رو نداره. پس در نتیجه اصلا باندل نمی شن. طبیعتا روش نرمال و خوبی نیست اما اگر جایی مجبور شدید می تونید استفاده کنید.

2. استفاده از پلاگین Ignore وب پک

وب پک یک پلاگینی داره که باهاش می تونید ماژول هارو ignore کنید.

برای این کار اگر فایل next.config.js رو ندارید اون رو پروژتون اضافه کنید و بعد از کد زیر استفاده کنید:

module.exports = {
    webpack: function (config) {
            new require(&quotwebpack&quot).IgnorePlugin(/faker/);
        )
        return config;
    }
}

اگر خودتون دستی وب پک رو کانفیگ کردن صرفا از خود پلاگین مستقیما استفاده کنید

3. استفاده از فیلد BROWSER در Package.json

همچنین میتونید از طریف فایل package.json از وب پک درخواست کنید که ماژول faker رو باندل نکنه.

برای اینکار کد زیر رو به package.json خودتون اضافه کنید:

package.json

{
    ...
    &quotbrowser&quot: {
        &quotfaker&quot: false
    }
    ...
}

نقص در ابزار و دانش کافی

این مشکل فقط مربوط به Next.js نیست و زمانی به وجود میاد که توسعه دهنده دانش کافی در مورد سیستم هایی که از SSR استفاده می کنند (شامل PWA) نداره.

ما نیاز به ابزار های بهتر و دقیق تر برای این مشکلات داریم و دستی چک کردن این موارد اصلا مناسب نیست. جدای از بحث زمان دقت بسیار بالایی نیاز داره که شاید در حوصله هم نباشه.

پایان

فعلا می تونیم امیدوار باشیم که تیم وب پک یا یک شخص خارجی یک پلاگینی رو برای این موضوع طراحی کنند تا دیگه شاهد این مشکل نباشیم.