Thu nhỏ và gói lại trong SharePoint Online

Bài viết này mô tả cách sử dụng kỹ thuật thu nhỏ và gói lại với Web Essentials để giảm số yêu cầu HTTP, đồng thời giảm thời gian cần để tải trang trong SharePoint Online.

Khi tùy chỉnh website, cuối cùng, có thể bạn sẽ thêm một số lượng lớn tệp bổ sung vào máy chủ để hỗ trợ tùy chỉnh. Việc thêm JavaScript, CSS và hình ảnh bổ sung sẽ làm tăng số lượng yêu cầu HTTP tới máy chủ, dẫn đến tăng thời gian cần để hiển thị một trang web. Nếu có nhiều tệp cùng loại, bạn có thể đóng gói chúng để giúp tải xuống các tệp này nhanh hơn.

Với tệp JavaScript và CSS, bạn còn có thể sử dụng phương thức tiếp cận gọi là thu nhỏ, khi đó bạn có thể giảm tổng kích cỡ tệp bằng cách loại bỏ khoảng trắng và các ký tự khác không cần thiết.

Việc thu nhỏ và gói lại các tệp JavaScript và CSS thông qua Web Essentials

Bạn có thể sử dụng phần mềm của bên thứ ba như Web Essentials để gói lại các tệp CSS và JavaScript.

Quan trọng: Web Essentials là dự án dựa trên cộng đồng, nguồn mở của bên thứ ba. Phần mềm này là phần mở rộng cho Visual Studio 2012 và Visual Studio 2013 và không được Microsoft hỗ trợ. Để tải xuống Web Essentials, hãy truy nhập website tại http://vswebessentials.com/download.

Web Essentials mang đến hai dạng tính năng đóng gói:

  • .bundle: cho tệp CSS và JavaScript

  • .sprite: cho ảnh (chỉ sẵn dùng trong Visual Studio 2013)

Bạn có thể sử dụng Web Essentials nếu bạn có một tính năng hiện có với một số yếu tố thương hiệu được tham chiếu trong trang cái tùy chỉnh, như:

Ảnh chụp màn hình của thành phần nhãn hiệu trong trang cái tùy chỉnh

Để tạo gói TE000127218 và CSS trong Web Essentials

  1. Trong Visual Studio, trong Trình khám phá Giải pháp, hãy chọn tệp bạn muốn đưa vào gói.

  2. Bấm chuột phải vào tệp đã chọn, sau đó chọn Web Essentials > Tạo tệp đóng gói JavaScript từ menu ngữ cảnh. Ví dụ:

    Ảnh chụp màn hình hiển thị các tùy chọn menu Web Essentials

Xem kết quả đóng gói tệp JavaScript và CSS

Khi bạn tạo gói JavaScript và CSS, Web Essentials sẽ tạo một tệp XML gọi là tệp công thức xác định tệp JavaScript và CSS cũng như một số thông tin cấu hình khác:

Ảnh chụp màn hình của tệp công thức JavaScript và CSS

Ngoài ra, nếu cờ giảm bớt được đặt là true trong công thức đóng gói thì các tệp sẽ được giảm kích cỡ, đồng thời đóng gói cùng nhau. Điều này nghĩa là các phiên bản giảm bớt mới của tệp JavaScript đã được tạo để bạn có thể tham chiếu trong trang cái.

Ảnh chụp màn hình của cờ tối giản được đặt thành true

Khi tải một trang từ trang web, bạn có thể sử dụng các công cụ của nhà phát triển từ trình duyệt web, như Internet Explorer 11, để xem số yêu cầu đã được gửi đến máy chủ và thời gian cần để tải từng tệp.

Hình sau đây là kết quả khi tải các tệp JavaScript và CSS trước khi thu nhỏ.

Ảnh chụp màn hình cho thấy 80 mục đang được tải xuống

Sau khi đóng gói các tệp CSS và JavaScript cùng nhau, số lượng yêu cầu giảm xuống 74 và thời gian tải xuống của riêng từng tệp chỉ lâu hơn một chút so với các tệp gốc:

Ảnh chụp màn hình cho thấy 74 mục đang được tải xuống

Sau khi đóng gói, kích cỡ tệp đóng gói JavaScript sẽ giảm đáng kể từ 815KB xuống 365KB:

Ảnh chụp màn hình hiển thị kích cỡ tải xuống bị giảm bớt

Đóng gói hình ảnh bằng cách tạo ảnh sprite

Tương tự như cách đóng gói tệp JavaScript và CSS, bạn có thể kết hợp nhiều biểu tượng nhỏ và hình ảnh phổ biến khác vào trang tính sprite lớn hơn, sau đó dùng CSS để hiển thị các hình ảnh riêng lẻ. Thay vì tải xuống từng ảnh riêng lẻ, trình duyệt web của người dùng sẽ tải trang tính sprite một lần và sau đó lưu trữ trên máy tính cục bộ. Việc này cải thiện hiệu suất tải trang bằng cách cắt giảm số lượng bản tải xuống và trọn vòng đến máy chủ web.

Để tạo ảnh sprite trong Web Essentials

  1. Trong Visual Studio, trong Trình khám phá Giải pháp, hãy chọn tệp bạn muốn đưa vào trong gói.

  2. Bấm chuột phải vào tệp đã chọn, sau đó chọn Web Essentials > Tạo ảnh sprite từ menu ngữ cảnh. Ví dụ:

    Ảnh chụp màn hình cho thấy cách tạo sprite ảnh
  3. Chọn vị trí để lưu tệp sprite. Tệp .sprite là một tệp XML mô tả các thiết đặt và tệp trong sprite. Các hình sau đây trình bày ví dụ về tệp PNG sprite và tệp XML .sprite tương ứng.

    Ảnh chụp màn hình của tệp sprite

    Ảnh chụp màn hình của tệp XML sprite

Phát triển các kỹ năng của bạn
Khám phá nội dung đào tạo
Sở hữu tính năng mới đầu tiên
Tham gia Người dùng nội bộ Office

Thông tin này có hữu ích không?

Cảm ơn phản hồi của bạn!

Cảm ơn bạn đã phản hồi! Để trợ giúp tốt hơn, có lẽ chúng tôi sẽ kết nối bạn với một trong những nhân viên hỗ trợ Office của chúng tôi.

×