Tối Ưu Hóa Vite Nâng Cao cho Laravel

· 4 min read
#laravel #vite #javascript #performance

Laravel đã chuyển từ Webpack (Mix) sang Vite cách đây vài phiên bản, và tốc độ cải thiện là rất lớn. Tuy nhiên, bản build Vite mặc định thường tạo ra một file app.js khổng lồ nếu bạn không cẩn thận.

Hãy cùng xem cách tối ưu hóa cài đặt Laravel + Vite cho một trang web nội dung nặng như blog này.

1. Chia Chunk Thủ Công

Nếu bạn sử dụng các thư viện nặng chỉ trên một số trang cụ thể (ví dụ: thư viện biểu đồ cho dashboard, hoặc syntax highlighter cho bài blog), bạn không nên gửi code đó cho người dùng truy cập trang chủ.

Trong vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    build: {
        rollupOptions: {
            output: {
                manualChunks(id) {
                    // Tách các package vendor thành file riêng
                    if (id.includes('node_modules')) {
                        return 'vendor';
                    }
                    // Tách riêng các thư viện nặng
                    if (id.includes('highlight.js')) {
                        return 'syntax-highlighter';
                    }
                }
            }
        }
    }
});

Điều này đảm bảo app.js luôn nhẹ.

2. Dynamic Import trong JavaScript

Tái cấu trúc entry point JS của bạn để load module theo yêu cầu.

Trước:

import hljs from 'highlight.js';
hljs.highlightAll();

Sau:

// Chỉ load trên các trang có code block
if (document.querySelector('pre code')) {
    import('highlight.js').then((module) => {
        const hljs = module.default;
        hljs.highlightAll();
    });
}

Vite sẽ tự động tạo một file riêng (ví dụ: assets/highlight.js-24a1.js) và trình duyệt chỉ tải về khi câu lệnh import() đó được thực thi.

3. Asset Versioning & Cache Busting

Laravel xử lý điều này tự động với helper {{ Vite::asset() }}, nhưng hiểu về manifest.json là rất quan trọng.

Khi bạn chạy npm run build, Vite tạo ra file public/build/manifest.json. Laravel đọc bản đồ này để tìm tên file đã được hash.

{
  "resources/js/app.js": {
    "file": "assets/app-48221e.js",
    "src": "resources/js/app.js"
  }
}

Mẹo: Đảm bảo cấu hình Nginx của bạn đặt header cache dài hạn cho mọi thứ trong /build/assets/. Vì tên file thay đổi với mỗi lần cập nhật nội dung (hash), bạn có thể cache chúng "mãi mãi" một cách an toàn.

location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
    expires 1y;
    add_header Cache-Control "public, no-transform";
}

4. Tối Ưu Hóa Hình Ảnh

Thay vì nén thủ công, hãy sử dụng plugin Vite.

npm install vite-plugin-image-optimizer --save-dev

import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';

export default defineConfig({
    plugins: [
        laravel(...),
        ViteImageOptimizer({
            png: { quality: 80 },
            jpeg: { quality: 75 },
            webp: { lossless: true },
        }),
    ],
});

Bây giờ, mọi asset được xử lý bởi Vite đều được tự động nén.

Tổng Kết

  1. Chia Chunk: Đừng gửi 1MB JS cho người dùng đang đọc một trang chủ yếu là văn bản.
  2. Lazy Load: Sử dụng dynamic import.
  3. Tối Ưu Hình Ảnh: Tự động hóa việc nén trong build pipeline.

Vite cực kỳ mạnh mẽ; hãy coi nó như nhiều hơn là chỉ một dev server!

Bình luận