fr1nge.xyz/themes/after-dark/docs/content/feature/fetch-injection.id.md

+++ title = "Fetch Injection" description = "Memuat skrip dan gaya eksternal dengan kecepatan luar biasa." categories = ["experience"] tags = ["performance", "styles"] feature = ["snippets", "related content", "code highlighter"] copyright owner = "Josh Habdas" date = "2019" license = "agpl-3.0-or-later" +++

After Dark menggunakan {{< external rel="external help" href="https://git.habd.as/jhabdas/fetch-inject" text="Fetch Inject" />}} pustaka untuk memuat dan menjalankan skrip dan gaya ekesternal lebih cepat dari yang dapat dilakukan browser.

{{< external href="https://hackcabin.com/post/managing-async-dependencies-javascript/" text="Fetch Injection" />}} terkonsep dan dikembangkan untuk After Dark agar memungkinkan tautan dalam ke ukuran penuh Galeri Gambar gambar tanpa memblokir pemuatan halaman dan memilki kinerja aplikasi lainnya:

Use Case	Chrome Performance Comparison (4G simulated connection speed)
	Without Fetch Inject	With Fetch Inject
{{< external href="https://habd.as/talks/screaming-fast-wordpress-redis-vultr/" text="WordPress Twenty Seventeen" />}}	~3.600s	~0.918s

Gunakan Fetch Inject di Custom Layouts untuk memuat skrip dan gaya asal usul silang atau dari direktori statis situs anda.

Berikan isi folder statis berikut:

├── layouts
├── static
│   ├── js
│   │   ├── jquery.slim.min.js
│   │   ├── tether.min.js
│   │   └── bootstrap.min.js
│   └── css
│       └── font-awesome.min.css
└── themes

Anda dapat memuat Bootstrap (w/Font Awesome) dan menunjukkan berapa lama itu selesai:

{{< highlight html "linenos=inline" >}}

{{< /highlight >}}

Fetch Inject adalah 555 bytes terkompresi, non-blocking dan disertakan secara default pada Custom Layouts. Kunjungi {{< external href="https://codepen.io/jhabdas/pen/MpVeOE?editors=0012" text="CodePen Playground" />}} untuk mencobanya.