PHP kết hợp JavaScript

Cách chính xác nhất để làm điều này là gì?

Nó được tạo ra khi bạn có nhiều tập lệnh tại miền tĩnh/CDN, cho phép bạn chọn và gói các thư viện khác nhau dựa trên nhu cầu hiện tại của bạn

Nói chung, tốt nhất là kết hợp nhiều nội dung thành các gói bằng cách sử dụng trình chạy tác vụ chẳng hạn như webpack hoặc Gulp, nhưng điều này có thể hữu ích tùy thuộc vào trường hợp sử dụng của bạn

Cài đặt

  1. Sao chép hoặc giải nén các tệp vào một thư mục ngoài gốc web của bạn. Ví dụ, /combine/. Thay đổi thư mục đó
  2. composer install
  3. Đổi tên .env-sample thành .env. Đặt COMBINE_BASEDIR vào thư mục sẽ chứa các tệp JS/CSS mà bạn muốn cho phép kết hợp/thu nhỏ cho
  4. Định cấu hình máy chủ web của bạn để viết lại URL, như minh họa trong các ví dụ bên dưới. Thay đổi các đường dẫn /combine//minify/ như mong muốn

Nginx

# Rewrite combine/minify URLs
rewrite ^/combine/[.*]$ /combine/index.php?scripts=$1;
rewrite ^/minify/[.*]$ /combine/index.php?minify=true&scripts=$1;

apache

# Rewrite combine/minify URLs
RewriteRule "^/combine/[.*]$" "/combine/index.php?scripts=$1"
RewriteRule "^/minify/[.*]$" "/combine/index.php?minify=true&scripts=$1"

Ví dụ sử dụng

Ví dụ: giả sử bạn đặt COMBINE_BASEDIR của mình thành

# Rewrite combine/minify URLs
RewriteRule "^/combine/[.*]$" "/combine/index.php?scripts=$1"
RewriteRule "^/minify/[.*]$" "/combine/index.php?minify=true&scripts=$1"
1. Với thư mục này, bạn có thể có một số thư viện JS hoặc CSS. Chúng tôi sẽ kết hợp Font Awesome với ví dụ, giả sử rằng bạn đã trích xuất chúng thành
# Rewrite combine/minify URLs
RewriteRule "^/combine/[.*]$" "/combine/index.php?scripts=$1"
RewriteRule "^/minify/[.*]$" "/combine/index.php?minify=true&scripts=$1"
2

Để kết hợp hoặc thu nhỏ nhiều tập lệnh, hãy phân tách chúng bằng dấu phẩy





Tất nhiên, việc rút gọn là không cần thiết đối với các tập lệnh mà bạn đã có phiên bản rút gọn cho. Nó chỉ là một tùy chọn cho các thư viện/tập lệnh không chứa phiên bản rút gọn. Nếu bạn có sẵn các phiên bản rút gọn, bạn chỉ nên sử dụng phương pháp "kết hợp" vì nó tiêu tốn ít tài nguyên hệ thống hơn

Như với tất cả các chủ đề liên quan đến phát triển phần mềm, luôn có nhiều hơn một giải pháp cho một vấn đề. Đề xuất sau đây chỉ đơn giản là một giải pháp có thể và không có ý định dứt khoát

Bản tóm tắt

  • Kết hợp/gộp các tệp CSS và JavaScript thành các tệp đơn lẻ
  • Giảm thiểu CSS và giảm thiểu JavaScript
  • Thêm Trình đóng gói nội dung cho các mẫu PHP của bạn

Đôi khi bạn cần một giải pháp đơn giản nhưng thế giới công nghệ phần mềm và phát triển web thích phức tạp hóa mọi thứ. Và, với tư cách là nhà phát triển, theo bản năng, chúng tôi cảm thấy thoải mái hơn khi đang làm tốt công việc nếu mã của chúng tôi có cấu hình cao, có thể mở rộng, có thể kiểm tra và giàu tính năng. Âm thanh về hoàn hảo với tôi, quá

Tuy nhiên. Thường thì bạn chỉ muốn hoàn thành công việc một cách nhanh chóng, dễ dàng và không có bất kỳ chi phí đáng kể nào

Bất kỳ ai đã tiếp xúc với Thông tin chi tiết về tốc độ trang của Google đều chắc chắn đã trải qua các thông báo sau

  • Giảm thiểu JavaScript
    Giảm thiểu các tệp JavaScript có thể giảm kích thước tải trọng và thời gian phân tích tập lệnh
  • Giảm thiểu CSS
    Giảm thiểu các tệp CSS có thể giảm kích thước tải trọng mạng
  • Giữ số lượng yêu cầu thấp và kích thước chuyển nhỏ

Về cơ bản, những gì PageSpeed ​​[một phần] bảo bạn làm là kết hợp [hay còn gọi là gói] tất cả những chặn kết xuất đó, riêng lẻ. js và. các tệp css thành một tệp duy nhất, được rút gọn. css và. tập tin js

Một tìm kiếm trên web sẽ mang lại một danh sách khổng lồ các trình khai thác JavaScript và StyleSheet, trình nén, trình đóng gói và trình đóng gói. Các công cụ hàng đầu cực kỳ hiệu quả, đáng tin cậy và đã được thử nghiệm tốt. Ngoài ra, khá phức tạp và cung cấp hơn 100 tính năng mà bạn có thể chưa cần đến

Bạn chỉ muốn thu nhỏ và kết hợp các tệp của mình, chết tiệt. Bạn muốn tránh cài đặt nhiều công cụ dòng lệnh và định cấu hình đường dẫn xuất bản toàn diện cho trang web PHP nhỏ, đơn giản của mình

Theo ý kiến ​​​​của tôi, một mẫu gọn gàng, nhanh chóng cho Bao bì tài sản trông như thế này

    
     ...
    
    
    
    ....
    
    

Khi một trang hiển thị, kết quả của mẫu này sẽ giống như thế này

    
     ...
        	
    
    
    ....
    

Quá dễ phải không?

Đầu tiên, bạn cần sử dụng PHP để đọc các tệp trên máy chủ của mình, tải chúng vào bộ nhớ và sau đó ghi chúng tuần tự vào một tệp bó mới trên máy chủ

Thứ hai, trong quá trình đóng gói [và điều này, phải thừa nhận là thô sơ], hãy kiểm tra tên tệp của nội dung và nếu nó không bao gồm phần mở rộng ". tối thiểu. ", thu nhỏ tệp bằng một trong vô số thuật toán thu nhỏ mã nguồn mở có sẵn trên github

Và cuối cùng, trả lại biểu định kiểu HTML hoặc thẻ tập lệnh liên kết với tệp gói mới

Không bị sa lầy vào chi tiết, đây là phiên bản cơ bản của AssetPacker để sử dụng làm nghiên cứu điển hình

Chủ Đề