ฟังก์ชั่น mix() กับ asset() ใน laravel ต่างกันยังไง

ฟังก์ชั่น mix() กับ asset() ใน laravel6 ต่างกันยังไง

ถ้าใครที่เขียน Laravel แล้วผมเชื่อว่าอย่างน้อยต้องเคยสับสนกับฟังก์ชั่น mix() และ asset() ที่เป็น helper function ของ laravel อย่างแน่นอน แล้วมันใช้ทำอะไร? ก็เอาไว้เรียกไฟล์ css, js, image ใน Folder public ของ laravel นั้นละ…วันนี้เรามาไขความสับสนนี้กันครับ

asset() ฟังก์ชั่น

คือฟังก์ชั่นที่จะคืน URL Path ของไฟล์ที่เรียกแบบ Full URL ยกตัวอย่าง

asset('css/style.css')

ตัว function จะคืนค่ากลับมาแบบ Full URL คือ

https://john.com/css/style.css
// john.com คือตัวอย่างชื่อ domain เท่านั้นจะเปลี่ยนไปตามการตั้งค่า APP_URL ในไฟล์ .env

สำหรับ asset() ควรใช้กับอะไรก็ตามที่ ไม่เปลี่ยนบ่อย ยกตัวอย่างไฟล์ image, pdf, icon เรียกว่า copy มาใส่ project แล้วไม่ทำอะไรกับมันอีกแบบนี้ควรใช้ asset()

mix() ฟังก์ชั่น

ต้องเกริ่นก่อนว่า mix() นั้นไม่ได้ไปเรียกไฟล์ใน folder public แบบปกติแล้ว แต่เพราะ mix() จะอ่าน path ของไฟล์จาก ไฟล์ mix-manifest.json รวมถึงมีเรื่องของ webpack เข้ามาเกี่ยวข้องด้วย

หลักการเบื้องต้นคือ เมื่อเราสั่งรัน npm run dev หรือ npm run prod ตัว webpack จะสร้างไฟล์ขึ้นมา 1 ตัวใน public folder คือ mix-manifest.json ไฟล์ตัวนี้จะเป็น object บอกชื่อไฟล์ และ path หน้าตาแบบนี้

{
    "/assets/js/app.js": "/assets/js/app.js?id=7799d336d891ec86602f",
    "/assets/css/atomic.css": "/assets/css/atomic.css?id=c30b87e5854e9e2adb31",
    "/assets/css/bootstrap.css": "/assets/css/bootstrap.css?id=e98e55901af3c1647bee",
    "/assets/js/pages/cart.js": "/assets/js/pages/cart.js?id=290c594187923587cbd1",
}

เวลาที่เราเขียนเรียกไฟล์ใน blade template(.blade.php) เราก็จะเรียกแบบนี้แทน

mix('assets/js/app.js')

ตัว function จะคืนค่ากลับมาแบบ Full URL เหมือน asset() เลยแต่จะไปเอาค่ามาจากไฟล์ mix-manifest.json เราก็จะได้หน้าตาแบบนี้

https://john.com/assets/js/app.js?id=7799d336d891ec86602f
// john.com คือตัวอย่างชื่อ domain เท่านั้นจะเปลี่ยนไปตามการตั้งค่า APP_URL ในไฟล์ .env

ถามว่ามันดีกว่ายังไงปกติแล้วเวลาเราเรียกไฟล์ใน blade, html ต่างๆถ้ามี query string ต่อท้าย หรืออะไรก็ตามมันจะเป็นการเปลี่ยน url ในการโหลดไฟล์ไปด้วย สมัยก่อนจะใช้วิธีการเพิ่ม ?version=1 เวลาแก้ไฟล์ก็ ?version=2 ผลที่ตามมาเมื่อ url เปลี่ยนแสดงว่า ลิงก์ก็จะไม่ถูก browser cache ถามว่าดีไหมตอบได้เลยดีและควรทำ ถ้าเราแก้ css, js พออัพไฟล์ขึ้น Server หรือแม้กระทั่ง develop ในคอมของเรามันจะโหลดไฟล์ตัวใหม่ให้ user ทุกครั้งแสดงว่าเราอัพเดทปุ๊บ user จะได้ไฟล์ใหม่จะหมดปัญหา แสดงผลไม่เหมือนกัน คนนี้ติด cache คนนี้ไม่ติด

แต่ก่อนจะใช้งาน mix มีสิ่งที่เราต้องทำกับ webpack คือเข้าไปที่ไฟล์ webpack.mix.js จากนั้นเพิ่ม version() เข้าไปที่ mix จะได้หน้าตาแบบนี้

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/assets/js')
    .sass('resources/sass/atomic.scss', 'public/assets/css')
    .sass('resources/sass/cms/bootstrap.scss', 'public/assets/css')
    .version();

เวลาที่เราสั่ง npm run dev หรือ npm run prod เราจะได้ไฟล์ mix-manifest.json ที่มี ?id={random} แล้วจากนั้นเราก็ไปเรียก mix() ได้ที่ blade template เลย..

ปล. ตัว version จะเกิดกับไฟล์ที่ถูกเขียนใน webpack.mix.js เท่านั้นถ้าเราไม่ได้ใส่ชื่อไฟล์ใน webpack.mix.js ไฟล์นั้นๆจะไม่มี ?id= ส่วนวิธีการใช้ laravel mix เพิ่มเติมอ่านได้จาก reference เลยครับ

Reference

Compiling Assets (Mix) – Laravel – The PHP Framework For Web Artisans

Laravel Mix provides a fluent API for defining Webpack build steps for your Laravel application using several common CSS and JavaScript pre-processors. Through simple method chaining, you can fluently define your asset pipeline. For example: