Fetch Injection

Memuat skrip dan gaya eksternal dengan kecepatan luar biasa.

After Dark menggunakan Fetch Inject pustaka untuk memuat dan menjalankan skrip dan gaya ekesternal lebih cepat dari yang dapat dilakukan browser.

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)
Use Case	Without Fetch Inject	With Fetch Inject
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:

 1<script>
 2  fetchInject([
 3    'https://cdn.jsdelivr.net/lodash/latest/lodash.min.js',
 4    'https://cdn.jsdelivr.net/momentjs/latest/moment.min.js'
 5  ])
 6  .then(() => {
 7    const start = moment();
 8    fetchInject(['/js/bootstrap.min.js'],
 9      fetchInject([
10        '/js/jquery.slim.min.js',
11        '/js/tether.min.js',
12        '/css/font-awesome.min.css'
13      ])
14    ).then(console.log(`Bootstrap Loaded: ${_.capitalize(start.toNow())}.`));
15  });
16</script>

Fetch Inject adalah 555 bytes terkompresi, non-blocking dan disertakan secara default pada Custom Layouts. Kunjungi CodePen Playground untuk mencobanya.