tra-loi-cau-hoi-phat-trien-web.com

Có cách nào để thêm rel = 'preload' bằng addScript / addStyleSheet không?

Tôi muốn hiển thị một số kiểu và tập lệnh bằng cách sử dụng rel='preload' để làm cho các trang của tôi tải nhanh hơn - tham khảo Google Ngọn hải đăng .

<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">

Có cách nào để làm điều này bằng cách sử dụng addScript/addStyleSheet trong Joomla không?

$document->addStyleSheet("css/style.css");
$document->addScript("js/us.script.js");
4
Frostbourn

Tôi cũng sẽ tự trả lời vì tôi có nhiều kinh nghiệm với việc lười tải tài sản.

preload có vẻ như nó tải không đồng bộ các tệp nhưng không được. Họ vẫn được coi là chặn kết xuất.

Điều này cũng áp dụng nếu bạn cũng chỉ cần thêm tài sản của mình vào bên dưới đóng </body> tag vì vẫn còn HTML được hiển thị.

Cách tiếp cận tốt nhất của bạn sẽ là thêm một đoạn mã Javascript nhỏ trước khi đóng </body> thẻ của mẫu của bạn:

<script>
// Lazy load all your CSS and fonts
for (const css of [
  '<?php echo $this->baseurl . '/templates/' . $this->template . '/css/template.css'; ?>',
  // You can define more CSS or font files here in the array
]) {
  const link = document.body.appendChild(document.createElement('link'));
  script.rel = 'stylesheet';
  script.href = css;
}

// Lazy load all your JS
for (const js of [
  '<?php echo $this->baseurl . '/templates/' . $this->template . '/css/template.js'; ?>',
  // You can define more Javascript files here in the array
]) {
  const script = document.body.appendChild(document.createElement('script'));
  script.async = false;
  script.src = js;
}
</script>

Lưu ý rằng tôi đã viết điều này trong ES6. Bạn có thể chuyển mã trở lại ES5 nếu bạn muốn hỗ trợ IE11.

3
Lodder

Nếu tôi hiểu cách sử dụng preload một cách chính xác, trong 3.x bạn có thể thêm các liên kết này theo cách thủ công với addHeadlink():

// Preload resources
$mediaVersion = $this->mediaVersion ? '?' . $this->mediaVersion : '';
$this->addHeadLink($this->baseurl . '/templates/' . $this->template . '/css/template.css' . $mediaVersion, 'preload', 'rel', array('as' => 'style'));
$this->addHeadLink($this->baseurl . '/templates/' . $this->template . '/js/template.js' . $mediaVersion, 'preload', 'rel', array('as' => 'script'));

// Load resources
JHtml::_('script', 'template.js', array('version' => 'auto', 'relative' => true));
JHtml::_('stylesheet', 'template.css', array('version' => 'auto', 'relative' => true));

Lưu ý, tài liệu $mediaVersion property hoạt động khi tài nguyên được thêm vào có giá trị auto cho version. Nếu bạn đang sử dụng một phương pháp khác để tạo phiên bản, hãy thay đổi nó trên các liên kết preload tương ứng.

3
Sharky

Có vẻ như Joomla 4.0 sẽ có khả năng này:

https://github.com/j Joomla/j Joomla-cms/pull/1588

0
Frostbourn