2.6 KiB
+++ 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" >}}
<script> fetchInject([ 'https://cdn.jsdelivr.net/lodash/latest/lodash.min.js', 'https://cdn.jsdelivr.net/momentjs/latest/moment.min.js' ]) .then(() => { const start = moment(); fetchInject(['/js/bootstrap.min.js'], fetchInject([ '/js/jquery.slim.min.js', '/js/tether.min.js', '/css/font-awesome.min.css' ]) ).then(console.log(`Bootstrap Loaded: ${_.capitalize(start.toNow())}.`)); }); </script>{{< /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.