Laravel Mix Preload – Laravel Package – CODEVIVU.COM – Programming Tips & Tutorials for Developers

Laravel Mix Preload là một package cho phép người dùng Laravel-mix thông qua package này có thể tự động add các files đã mix và render ra blade dựa trên file mix-manifest. Được phát triển bởi Sebastian De Deyne và Spatie.

Hướng dẫn sử dụng Laravel Elixir Laravel Mix

Mọi thứ sẽ đơn giản hơn nhiều khi bạn đã có cài đặt sẳn Laravel-mix và đã chạy thành công Laravel-mix. Tiếp đến chỉ cần chúng ta thêm package này vào là xong.

Cài Đặt Laravel Mix Preload

[code lang="php"]
	composer require spatie/laravel-mix-preload
[/code]

Sau khi cài đặt xong. Giả sử đây là file config Laravel-mix của bạn. Chúng ta nên thêm prefix preload hoặc prefetch vào output files để dễ quản lý như sau.

[code lang="php"]
{
    "/js/app.js": "/js/preload-app.js",
    "/js/app.js": "/js/prefetch-app.js",
    "/css/app.css": "/css/preload-app.css",
}
[/code]

Ngoài ra nếu có quá nhiều files bạn có thể dùng cách tự động add vào thông qua webpackChunkName .

[code lang="php"]
import('./maps' /* webpackChunkName: "preload-maps" */).then(maps =&amp;gt; {
    maps.init();
});
import('./maps' /* webpackChunkName: "prefetch-maps" */).then(maps =&amp;gt; {
    maps.init();
});
[/code]

Việc tiếp theo chúng ta cần làm là thêm mark-up @preload vào header tag là xong.

[code lang="html"]
&amp;lt;head&amp;gt;
    &amp;lt;title&amp;gt;Preloading things&amp;lt;/title&amp;gt;

    @preload
&amp;lt;/head&amp;gt;
[/code]

F12 và xem thành quả xem nào.

[code lang="html"]
&amp;lt;link rel="preload" href="/js/preload-app.js" as="script"&amp;gt;
&amp;lt;link rel="prefetch" href="/js/prefetch-app.js" as="script"&amp;gt;
&amp;lt;link rel="preload" href="/css/preload-app.css" as="style"&amp;gt;
[/code]

Bạn có thể tìm hiểu thêm về package này cũng như nhận hướng dẫn cài đặt đầy đủ và xem mã nguồn trên GitHub tại spatie / laravel-mix-preload .