Home » Laravel » ฟังก์ชั่น 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

เกี่ยวกับผู้เขียน

Itthipat Thitsarak

สวัสดีครับผม อิทธิพัทธ์ (เป้) เป็น Freelance Web developer ชอบหาเทคนิคต่างๆที่ทำให้ชีวิต Programmer ง่ายขึ้นโดย Blog นี้จะ สอน Laravel, Vuejs, CSS, HTML 5 และอื่นๆ ที่เกี่ยวกับการทำเว็บไซต์

ขอบคุณทุกคนที่ติดตาม และอ่านบทความของผมครับ หากใครมีคำถามหรืออยากให้ผมเขียนเกี่ยวกับเรื่องอะไรเพิ่มเติม สามารถแสดงความคิดเห็นไว้ที่ใต้บทความ หรือส่งเรื่องเข้ามาที่ Email ได้เลยครับ หัวข้อไหนน่าสนใจ ผมจะหยิบมาเขียนบทความให้ได้อ่านกันเรื่อยๆครับ

Scroll to Top