بالارفتن حجم فایل appjs در پروژه laravel و vue js
سلام دوستان
من یه سایت spa رو با laravel و vue js دارم پیاده سازی میکنم ولی همین الانشم که تقریبا کمتر از نص امکانات رو نوشتم حجم فایل app.js به ۲مگ میرسه وقتی به صورت پروداکشتن هم خروجی میگیرم حجم کم میشه ولی نه خیلی زیاد و همین باعث میشه تو اولین باری که صفحه لود میشه زمان زیادی رو بگیره و کاربر باید منتظر بمونه تا لود شه. حالا اگه سرعتش هم مناسب نباشه که دیگه واویلا..
میخواستم ببینم چه پیشنهادی دارین که اولین بار سایت با سرعت خوبی بیاد بالا.
پاسخها
14
سلام دوست عزیز @miladk313
این مشکل را می تونی با lazyloading یا بارگذازی تنبل در حل گرد.
به این صورت کار می کنه که هر کامپوننت شما در ویو را به یک فایل جاوا اسگریپت می شکنه و زمانی که نیاز دارید از اون استفاده کنید صداش می زنید
اگه بخوای خودت این کار را به صورت دستی انجام بدی باید از vue-loader استفاده کنی و اگر می خوای که خود webpack این کار را انجام بده برات باید ی سری تنظیمات را روی پروژه انجام بدی
سلام من خودمم دارم یه سایت spa مینویسم و الان 80% پروژه رو رفتم ولی app.js کلا 2کیلو بایته://
فککنم همه Templateاتو، تو app.js قرار دادی درسته؟
اره دقیقا من اومدم کل قالب رو به صورت کامپوننت های ویو جی اس نوشتم
گفتگوهای مرتبط
شاید پاسخ شما همینجا باشد
هر صفحه از سایتو تو یه فایل vue نوشتی دیگه آره
@mhmd.dev
ببین قسمت داشبوردشه .اومدم هر قسمت رو توی یه کامپوننت مجزا گذاشتم. مثلا هدر ، فوتر و .. هر کدوم یه کامپوننت جدا دارن
بعد یه قسمت هم اون وسط هست که کانتینرم هست اونو vuerouter گذاشتم که عوض میشه و کامپوننت های مختلف میان
خب اوکیه تنا راهی که من بلدم اینه که وقتی پروژت کلا تموم شد یه کپی ازش بگیر برای توسعه و بعد اون یکیرو با لاراول میکس فشرده کن تا حجمت بیاد پایین اگه هم کدا css تو اینلاین قرار دادی تو یه فایل css قرارشون بده
خب با لاراول میکس فشرده کردم و شده 2 مگ
اگه کمک کنین ممنون میشم
@hesammousavi
@milad
@ali.bayat
@Alimotreb
میتونید کامپوننت ها رو به صورت داینامیک لود کنید. هر صفحه موقعی که قراره دیده بشه با ارسال درخواست به سرور کامپوننتی که نیاز داره رو دریافت کنه و نمایش بده.
داخل تنظیمات پیش فرض فرانت در لاراول، یه سری موارد مثل bootstrap و jquery و lodash بعضی مواقع فعلاند. فایل "resources\js\bootstrap.js" رو چک کردید؟
@ali.bayat
بله اونا رو حذف کرده بودم ولی از bootstrap-vue استفاده کردم
@khanzadimahdi
چطوری ؟ میشه یه نمونه کد که کامپوننت رو از سرور برمیگردونه زجمت بکشین برام بنویسین ؟
داکیومنت های خود vuejs رو بخونید. البته کار شما کمی سخت تر و طولانی تر خواهد شد.
https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components
In large applications, we may need to divide the app into smaller chunks and only load a component from the server when it’s needed. To make that easier, Vue allows you to define your component as a factory function that asynchronously resolves your component definition. Vue will only trigger the factory function when the component needs to be rendered and will cache the result for future re-renders.
سلام
منم یه سایت داشتم با ویو که حجمش 11 مگ بود !!!
تنها راه حلی که داره اینه که از lazy load استفاده کنی
توی سایت vue router گفته این موضوع رو