VueJS: Giới thiệu Trình kết xuất gói

Đến thời điểm này, chúng ta đã giả định rằng mã phía máy chủ được nhóm sẽ được máy chủ sử dụng trực tiếp qua require:

const createApp = require('/path/to/built-server-bundle.js')

Điều này là đơn giản, tuy nhiên bất cứ khi nào bạn chỉnh sửa mã nguồn ứng dụng của mình, bạn sẽ phải dừng và khởi động lại máy chủ. Điều này làm giảm năng suất khá nhiều trong quá trình phát triển. Ngoài ra, Node.js không hỗ trợ bản đồ nguồn gốc.

#Nhập trình kết xuất gói

vue-server-renderer cung cấp một API được gọi createBundleRenderer để xử lý vấn đề này. Với plugin webpack tùy chỉnh, gói máy chủ được tạo dưới dạng tệp JSON đặc biệt có thể được chuyển tới trình kết xuất gói. Khi trình kết xuất gói được tạo, việc sử dụng giống với trình kết xuất bình thường, tuy nhiên trình kết xuất gói cung cấp các lợi ích sau:

• Hỗ trợ bản đồ nguồn tích hợp (có devtool: 'source-map' trong cấu hình webpack)

• Tải lại trong quá trình phát triển và thậm chí triển khai (bằng cách đọc gói đã cập nhật và tạo lại thể hiện trình kết xuất)

• Chèn CSS quan trọng (khi sử dụng tệp *.vue): tự động in CSS cần thiết bởi các thành phần được sử dụng trong quá trình hiển thị. Xem phần CSS để biết thêm chi tiết.

• Đưa vào phần nội dung clientManifest : tự động nhập các lệnh nạp trước và tìm nạp trước tối ưu, và các đoạn mã được chia nhỏ cần thiết cho việc render ban đầu.

Chúng ta sẽ thảo luận cách cấu hình webpack để tạo các tạo phẩm xây dựng cần thiết bởi trình kết xuất gói trong phần tiếp theo, nhưng bây giờ chúng ta hãy giả sử chúng ta đã có những gì chúng ta cần, và đây là cách tạo và sử dụng trình kết xuất gói:

const { createBundleRenderer } = require('vue-server-renderer')

const renderer = createBundleRenderer(serverBundle, {
  runInNewContext: false, // recommended
  template, // (optional) page template
  clientManifest // (optional) client build manifest
})

// bên trong bộ xử lý server ...
server.get('*', (req, res) => {
  const context = { url: req.url }
  // Không cần truyền app ở đây vì nó tự động được tạo bằng cách
  // thực thi gói. Bây giờ server của ta được tách riêng khỏi app Vue!
  renderer.renderToString(context, (err, html) => {
    // xử lý lỗi...
    res.end(html)
  })
})

Khi renderToString được gọi trên trình kết xuất gói, nó sẽ tự động thực thi hàm được xuất bởi gói để tạo một đối tượng app (chuyển context làm đối số) và sau đó hiển thị nó.

Lưu ý bạn nên đặt tùy chọn runInNewContext thành false hoặc 'once'. Xem tham chiếu API của nó để biết thêm chi tiết.