جلوگیری از حجیم شدن فایل app.js تولیدی توسط laravel mix

چندتا فایل js ایجاد کنید، یعنی کامپوننت هر صفحه رو فقط توی همون صفحه فراخوانی کنید.
از webpack هم میتونید استفاده کنید تا کدهای استفاده نشده رو پاک کنه

@developer
چجور میتونم فایلهای js و کامپوننت های مربوط به vuejs رو جدا کنم و تو هرصفحه فایل مخصوص به همون رو لود کنم؟

اگه با vue cli کار میکنید که خودش این کارو میکنه خودکار
اگه vue رو توی لاراول استفاده میکنید خب کامپوننت هاتون رو یکی یکی توی فولدر کامپوننت‌ها ایجاد کنید بعد توی فایل app.js به تک تک شون آدرس بدید و موقع کامپایل همه رو به جز یکی کامنت کنید تا فقط همون یه کامپوننت mix بشه، همزمان توی فایل webpack هم به ازای هر کامپوننت چندتا خروجی بگیرید، به عبارتی به جای میکس کردن یک فایل app.js چندتا فایل mix کنید جدا جدا

کلا در فضای وب همیشه یک Trade-Off وجود داره بین تعداد ریکوئست ها و حجم ریسپانس هر ریکوئست.
و در هر شرایطی باید بررسی کنید بهترین انتخاب به چه صورت هست.

پیشنهاد شخصی بنده این هست که asset ها یا همون کدهای پکیج ها و کتابخونه ها رو جداگانه در قالب یک فایل (مثلا بنام assets.js) و کدهایی که خودتون بصورت خاص نوشتید رو در قالب یک فایل دیگر (بنام app.js) کامپایل کنید.

حالا شما می تونید فایل دوم یا app.js رو به زیر بخش های کوچک تر هم بشکونید و در هر صفحه یا پنل مشخصی صرفا کدهای مرتبط باهاش رو لود کنید و نه الباقی موارد. اینجوری معمولا تعداد فایل ها بیشتر میشه اما صرفه جویی بسیار خوبی در حجمشون میشه و در مجموع معمولا بهینه تر خواهد بود.

سلام می تونید به این شکل کار کنید مثلا فایل های قسمت بلاگ و فروشگاه و ادمین رو جدا کنید.

@Alvandi

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

@mhyeganeh

حالا شما می تونید فایل دوم یا app.js رو به زیر بخش های کوچک تر هم بشکونید و در هر صفحه یا پنل مشخصی صرفا کدهای مرتبط باهاش رو لود کنید و نه الباقی موارد.

ممکنه راهنمایی بفرمایید فایل app.js رو به چه روشی به فایلهای کوچکتر بشکونم؟

اگه vue رو توی لاراول استفاده میکنید خب کامپوننت هاتون رو یکی یکی توی فولدر کامپوننت‌ها ایجاد کنید بعد توی فایل app.js به تک تک شون آدرس بدید و موقع کامپایل همه رو به جز یکی کامنت کنید تا فقط همون یه کامپوننت mix بشه، همزمان توی فایل webpack هم به ازای هر کامپوننت چندتا خروجی بگیرید، به عبارتی به جای میکس کردن یک فایل app.js چندتا فایل mix کنید جدا جدا

@developer

مطابق فرمایش دوستمون اگه عمل کنم اونوقت با هر تغییر باید یک بار مجدد همه کامپوننت ها comment بشن و کامپوننت مورد نظر رو compile کنم. آیا راه اتوماتیکی وجود داره؟

lazy loading چقدر در خصوص کاهش حجم فایل کمک میکنه؟

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

در نهایت با استفاده از Laravel Mix و اعمال شرایط و تنظیماتتون در فایل Webpack.mix.js آدرس این فایل ها رو بهش میدید و تعیین می‌کنید که خروجیش به چه صورتی کامپایل و ذخیره بشه.

در نهایت از خروجی ها هم متناسب با شرایطتون استفاده می‌کنید.

جهت آشنایی بیشتر با ساز و کار Laravel Mix هم مستنداتش در وبسایت رسمی لاراول یا سایت رسمی خودش عالیه و مثال های خیلی خوبی دارند:
https://laravel.com/docs/8.x/mixl
https://laravel-mix.com/docs/main/installation

@mhyeganeh

جهت آشنایی بیشتر با ساز و کار Laravel Mix هم مستنداتش در وبسایت رسمی لاراول یا سایت رسمی خودش عالیه و مثال های خیلی خوبی دارند:

.

ممکنه راهنمایی بفرمایید فایل app.js رو به چه روشی به فایلهای کوچکتر بشکونم؟

من با laravel mix مشکلی ندارم سوالم در خصوص فایل app.js مربوط به vue بود که چجور به تکه های کوچکتر تقسیمش کنم نه کل فایلهای js کل پروژه رو