Laravel Mix Preload – Laravel Package

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 DeyneSpatie.

Laravel Mix Preload
Laravel Mix Preload

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

	composer require spatie/laravel-mix-preload

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.

{
    "/js/app.js": "/js/preload-app.js",
    "/js/app.js": "/js/prefetch-app.js",
    "/css/app.css": "/css/preload-app.css",
}

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 .

import('./maps' /* webpackChunkName: "preload-maps" */).then(maps => {
    maps.init();
});
import('./maps' /* webpackChunkName: "prefetch-maps" */).then(maps => {
    maps.init();
});

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

<head>
    <title>Preloading things</title>

    @preload
</head>

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

<link rel="preload" href="/js/preload-app.js" as="script">
<link rel="prefetch" href="/js/prefetch-app.js" as="script">
<link rel="preload" href="/css/preload-app.css" as="style">

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 .

Article Writter By

Long Phạm

"Thành công nuôi dưỡng sự hoàn hảo. Sự hoàn hảo lại nuôi lớn thất bại. Chỉ có trí tưởng tượng mới tồn tại."