Docusaurus v3.6 có gì mới?

Docusaurus là một công cụ được yêu thích bởi các nhà phát triển giúp đơn giản hóa việc tạo và quản lý tài liệu dự án. Với mỗi bản cập nhật, đội ngũ Docusaurus lại mang đến những tính năng và tối ưu hóa mới, giúp người dùng xây dựng các website tài liệu chất lượng cao, tùy chỉnh linh hoạt và có hiệu suất tốt. Phiên bản mới nhất, Docusaurus v3.6 với một số tính năng mới, cải tiến, và sửa lỗi đáp ứng nhu cầu của cộng đồng và nâng cao trải nghiệm người dùng.

Trong bài viết này, chúng ta sẽ khám phá những điểm mới trong Docusaurus v3.6 nhé!

Nếu bạn chưa từng biết qua Docusarus, hãy đọc bài viết này.

Điểm nổi bật

Phiên bản này chủ yếu tập trung vào hiệu suất xây dựng thông qua dự án Docusaurus Faster.

Docusaurus Faster

Mục tiêu của dự án Docusaurus Faster là giảm thời gian xây dựng và tiêu thụ bộ nhớ.

• Rspack: Nhanh hơn với trình đóng gói web dựa trên Rust, thay thế gần như hoàn hảo cho webpack.
• SWC: Trình biên dịch Web nhanh hơn, nền tảng dựa trên Rust cho Web (HTML, CSS, JS).
• Lightning CSS: Trình phân tích cú pháp CSS cực kỳ nhanh, bộ chuyển đổi, đóng gói và nén.

Giảm thời gian build web

Các phép đo thử nghiệm trên trang web cho thấy bạn có thể build web nhanh hơn từ 2 đến 4 lần.

Tiêu thụ bộ nhớ

Bên cạnh đó, Docusaurus Teams cải thiện về việc tiêu thụ bộ nhớ như:

• Cơ sở hạ tầng mới tiêu thụ ít bộ nhớ hơn tổng thể.
• Sửa một lỗi rò rỉ bộ nhớ quan trọng, đặc biệt ảnh hưởng đến các trang web i18n.
• Thêm các kiểm tra CI.
• Thêm công cụ nội bộ để hiểu rõ hơn bước nào trong quá trình xây dựng tiêu thụ bộ nhớ.
• Loại bỏ một lệnh process.exit(0) có thể che giấu các lỗi rò rỉ bộ nhớ trong mã của bạn và các plugin của bên thứ ba.

Các tác động khác

• Trình nén HTML hiện sẽ phát ra cảnh báo trong trường hợp có đánh dấu HTML không hợp lệ
• Output HTML tĩnh giảm hơn ~5%.
• Một số lỗi được tự động sửa bởi cơ sở hạ tầng mới.

Hướng dẫn cập nhật lên Docusaurus v3.6

Để cập nhật lên phiên bản mới nhất, bạn có thể làm theo các bước đơn giản sau đây:

Cập nhật qua npm hoặc yarn

Mở terminal và chạy lệnh sau để cập nhật:

npm install @docusaurus/core@latest @docusaurus/preset-classic@latest

Hoặc:

yarn add @docusaurus/core@latest @docusaurus/preset-classic@latest

Thêm package Docusaurus Faster vào dự án:

npm install @docusaurus/faster

Sau khi cài, hãy thêm

  future: {
    experimental_faster: true,
  },

vào file docusaurus.config.js để chạy với Rspack thay vì Webpack.

Trong trường hợp một trong các cờ tính năng không hoạt động cho trang web của bạn, bạn có thể bật các cờ tính năng một cách độc lập như sau:

 future: {
    experimental_faster: {
      swcJsLoader: true,
      swcJsMinimizer: true,
      swcHtmlMinimizer: true,
      lightningCssMinimizer: true,
      rspackBundler: true,
      mdxCrossCompilerCache: true,
    },
  },

• swcJsLoader: Sử dụng SWC để biên dịch JS (thay vì Babel)
• swcJsMinimizer: Sử dụng SWC để nén JS (thay vì Terser)
• swcHtmlMinimizer: Sử dụng SWC để nén HTML và JS/CSS nhúng (thay vì html-minifier-terser)
• lightningCssMinimizer: Sử dụng Lightning CSS để nén CSS (thay vì cssnano và clean-css)
• rspackBundler: Sử dụng Rspack để đóng gói ứng dụng của bạn (thay vì webpack)
• mdxCrossCompilerCache: Biên dịch các tệp MDX một lần cho cả môi trường trình duyệt và Node.js thay vì biên dịch hai lần

Sau khi thêm vào file docusaurus.config.js. Bạn hãy chạy dự án của bạn và cảm nhận, đồng thời, kiểm tra lại các plugin và kiểm thử sau khi cập nhật để đảm bảo rằng không có lỗi hoặc sự cố nào phát sinh.