كما نلاحظ أنه عند عمل أي تغيير على ملفات blade او ملفات js فإننا بحاجة لإعادة تنفيذ الأمر npm run dev إلا إنه يمكن إستخدام أوامر أخرى بحيث يتم أخذ التغييرات بشكل تلقائي، كما أنه يمكن إنقاص حجم ملف app.js.

الأمر npm run watch

يمكن إستخدام هذا الأمر عوضا عن npm run dev حيث أن تغييرات في التطبيق سوف يتأثر بها بشكل مباشر دون تنفيذ الأمر npm run dev بعد كل تغيير. حيث يبقى npm run watch يعمل في الخلفية، ويلاحظ أي تغييرات

 npm run watch

الأمر npm run prod

عند تنفيذ الأمر npm run dev/watch يكون حجم الملف app.js كبير

لكن لو قمنا بتنفيذ الأمر npm run prod

npm run prod

نلاحظ أن حجم الملف أصبح أقل بكثير، لذلك بعد الإنتهاء من العمل على المشروع يجب تنفيذ هذا الأمر.

image & assets cache

في ملف welcome.blade.php قمنا بإستدعاء ملف app.js

<script src="{{ asset('js/app.js') }}"></script> ///////include js

لكن هنا المتصفحات ستقوم بعمل  cache للصور وملف js، يتم ذلك لأن إسم الملف يبقى كما هو app.js، لكن ما هي الحلول:-

إضافة time إلى إسم الملف

<script src="{{ asset('js/app.js') }}?time={{ time() }}"></script>

هنا في كل مره يتم عمل تحديث للمتصفح سيجد إسم مختلف.

لكن المشكله أنه ليس جميع المتصفحات تدعم ذلك.

Laravel Mix 

بدلا من استخدام asset لإستدعاء الملف app.js يمكن إستخدام mix

<script src="{{ mix('js/app.js') }}"></script>

إلا إننا بحاجة لإضافة versionn للـ mix.js في الملف webpack.mix.js

mix.js('resources/js/app.js', 'public/js').vue().version()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

بعد عمل run للمشروع، ولو قمنا بعمل view source نجد إنه بجانب الإسم app.js تم إضافة id

<script src="/js/app.js?id=e832ced4e924f217d6fd"></script>

حيث إنه يتم إنشاء ملف public/js/mix.manifest.json ويحتوي على id لملف app.js, app.css.