Quản lý assets (js, css) trong ứng dụng Laravel
Hầu hết các CMS, framework hiện đại hiện nay đều đã hỗ trợ các hàm để quản lý assets hiệu quả, giúp chúng ta có thể thêm js, css cho các trang khác nhau trong ứng dụng.
Như trong WordPress ta có thể sử dụng wp_enqueue_script, wp_enqueue_style, trong Yii 2 thì có Asset bundle để quản lý. Tuy nhiên, mặc định Laravel không hỗ trợ việc này.
Ví dụ, bạn muốn sử dụng thư viện Ckeditor cho trang thêm/sửa bài viết nhưng không muốn thư viện này load trong trang list chẳng hạn.
Thông thường các bạn sẽ thêm js cho trang edit bằng cách chèn vào section footer như thế này.
@section('footer')
<script src="{{ asset('vendor/packages/ckeditor/ckeditor.js') }}"></script>
@stop
Cách này có thể giải quyết được nhu cầu trên, tuy nhiên nó sẽ làm ứng dụng của bạn ngày càng phức tạp. Bạn phải thêm đoạn code trên ở những view có sử dụng Ckeditor. Việc thay đổi thư viện hay quản lý phiên bản sử dụng sẽ trở nên khó khăn hơn.
Vì nhu cầu quản lý được phiên bản của các thư viện css, js và có thể linh hoạt thêm/bớt các thư viện cho từng trang riêng biệt thì mình đã viết 1 package có tên là assets và sử dụng từ 2015 tới giờ, sau vài lần tối ưu thì nó cũng đã khá dễ để sử dụng.
Các bạn có thể tải về và xài tại đây: https://github.com/botble/laravel-assets
Cài đặt:
composer require botble/assets
Nếu các bạn đang sử dụng Laravel phiên bản <= 5.4 thì phải thêm vào phần providers của config/app.php
Botble\Assets\Providers\AssetsServiceProvider::class,
Và phần aliases
'Assets' => Botble\Assets\Facades\AssetsFacade::class,
Tiếp theo, hãy chạy lệnh
php artisan vendor:publish --provider="Botble\Assets\Providers\AssetsServiceProvider" --tag=config
Lệnh này sẽ publish config cho package assets.
File config sẽ được copy ra config/assets.php hãy sửa lại theo như nhu cầu của bạn. Bạn có thể mở các phần ghi chú bên dưới và chỉnh sửa cho nhanh.
<?php
return [
// Mặc định sẽ là offline, assets sẽ được load từ local, nếu set offline là false và resource có định
// nghĩa cdn thì assets sẽ được load từ cdn
'offline' => env('ASSETS_OFFLINE', true),
'enable_version' => true, // Bật hiển thị version, lúc này link tới resource sẽ được nối thêm "?v=1.0" chẳng hạn.
'scripts' => [ // Các thư viện js mặc định được sử dụng, là key được định nghĩa trong phần resource bên dưới.
//'app',
],
'styles' => [ // Các thư viện css mặc định
//'bootstrap',
],
'resources' => [ // Định nghĩa tất cả đường dẫn tới assets.
'scripts' => [ // Định nghĩa các thư viện js
/*'app' => [
'use_cdn' => false, // Có cho phép sử dụng cdn hay không, nếu là true thì bạn phải định nghĩa link tới cnd bên dưới
'location' => 'top', // Vị trí chèn, trên header hay dưới footer, có thể là top hoặc bottom
'src' => [
'local' => '/js/app.js', // Đường dẫn tới thư viện
],
],
'modernizr' => [
'use_cdn' => true,
'location' => 'bottom',
'src' => [
'local' => '/vendor/core/packages/modernizr/modernizr.min.js',
'cdn' => '//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js',
],
],*/
// End JS
],
'styles' => [ // Định nghĩa các thư viện css
/*'bootstrap' => [
'use_cdn' => true,
'location' => 'top',
'src' => [
'local' => '/packages/bootstrap/css/bootstrap.min.css',
'cdn' => '//stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css',
],
'attributes' => [ // Các thuộc tính bổ sung, nếu cần
'integrity' => 'sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB',
'crossorigin' => 'anonymous',
],
],*/
],
],
];
Tiếp theo, hãy chèn vào master layout của bạn. Trong phần thẻ head
{!! Assets::renderHeader() !!}
Và dưới phần footer.
{!! Assets::renderFooter() !!}
Bạn sẽ thấy các thẻ style và script được chèn vào, bạn sẽ quản lý tất cả assets của mình trong config/assets.php một cách dễ dàng.
Khi lên production, các bạn có thể thêm vào .env:
ASSETS_OFFLINE=false
Lúc này, assets sẽ được load từ cdn, giúp tăng tốc độ load website của bạn.
Và có thể thêm version cho từng bản release như sau:
ASSETS_VERSION=1.0
Khi đó tất cả assets của bạn sẽ được nối thêm “?v=1.0”, điều này giúp loại bỏ cache trên browser và làm ứng dụng của bạn nhìn chuyên nghiệp hơn.
Một số hàm hữu ích:
Ngoài việc định nghĩa assets trong file config/assets.php, các bạn còn có thể thêm js, css trực tiếp từ controller.
Ví dụ:
public function show()
{
\Assets::addScripts(['ten-key-asset']) // tên resource script được định nghĩa trong file config/assets.php
->addStyles(['ten-style-sheet-resource']);
->removeStyles(['danh-sach-css-khong-su-dung'])
->removeScripts(['key']);
}
Mình khuyến khích các bạn định nghĩa tất cả assets được sử dụng trong file config để tiện quản lý đường dẫn và phiên bản. Tuy nhiên, các bạn vẫn có thể thêm assets 1 cách trực tiếp mà không cần định nghĩa trước.
\Assets::addScriptsDirectly('/vendor/bootstrap/js/bootstrap.js');
// hoặc
\Assets::addStylesDirectly(''/vendor/bootstrap/css/bootstrap.css');
Project hiện tại mình đang làm (Botble CMS) sử dụng tới vài chục thư viện nhưng trong 1 trang nhất định, mình chỉ xài khoảng 4-5 thư viện. Việc quản lý trang nào sử dụng thư viện nào và gỡ bỏ thư viện khi sử dụng 2 thư viện bị conflict sẽ dễ dàng hơn với package botble/assets này.
Một ngày đẹp trời bạn đổi tên thư mục /public/js/plugins thành /public/js/packages chẳng hạn, thì bạn chỉ cần sửa lại tất cả đường dẫn trong file config/assets mà không cần làm gì thêm.
Nếu các bạn thấy hữu ích, hãy cho mình 1 star trên Github nhé <3
- Địa chỉ: Hồ Chí Minh
- Facebook: Sang Nguyen