Saat kami membangun aplikasi Ember, cepat atau lambat, kami harus menerapkannya ke produksi. Salah satu permasalahan yang mungkin muncul adalah terkait aset.

Aplikasi pada produksi tanpa aset sidik jari (misalnya, untuk setiap penerapan, Anda membuat jalur unik untuk setiap file statis) dikunci ke dalam cache pengguna Anda dan memaksa Anda menunggu hingga cache pengguna dihapus atau kedaluwarsa.

Ember-cli, berkat brokoli-asset-rev, punya solusi bagus — cukup aktifkan sidik jari di konfigurasi:

Seperti yang mungkin Anda ketahui, kami telah menambahkan generateAssetMap: true, yang menginstruksikan brokoli-asset-rev untuk menghasilkan asetMap.json di direktori aset/.

File ini akan memiliki nama file aset asli dan sidik jarinya yang setara, seperti:

Semuanya tampak bagus — di mana masalahnya?

Masalahnya akan segera muncul, karena kami akan membuat nama aset secara dinamis. Brokoli mencocokkan apa yang kita miliki di assetMap di sisi kiri dan menggantinya dengan apa yang ada di sisi kanan. Misalnya, kita telah membuat gambar sebagai properti yang dihitung:

Sekarang, kami tidak memiliki kemampuan untuk mencocokkannya sebagai nama statis, karena `skin` dapat memiliki nilai apa pun, apa hubungannya? Kami memiliki beberapa opsi:

Solusi #1 (yang paling sederhana)

Ini adalah solusi paling mudah dan sederhana yang mungkin Anda dapatkan dan saya sarankan untuk menggunakannya jika memungkinkan dan Anda tidak memiliki banyak aset dinamis.

Sesederhana yang Anda bisa — jadikan jalur ke aset Anda statis.

Jika menurut Anda solusi ini mungkin tidak cocok untuk Anda, mari lanjutkan.

Solusi #2 (bukan solusi terbaik)

Jika Anda memiliki banyak aset, misalnya, Anda memiliki bendera negara dan Anda harus mencocokkannya secara dinamis. Pertama, jika Anda tidak cukup malas — coba terapkan Solusi #1. Jika belum, mari kembali ke file asetMap.json yang telah kita lihat sebelumnya.

Mengetahui bahwa asetMap.json menyelesaikan semua file statis menjadi setara dengan sidik jari, kita dapat mencoba memuatnya sebelum aplikasi dimulai dan membuat layanan khusus untuk menyelesaikannya. Untuk itu, kita harus membuat inisialisasi/asset-map.js dan services/asset-map.js.

Solusi ini akan memuat asetMap.json sebelum aplikasi dimuat dan akan mengisi layanan asetMap dengan nilai yang dipetakan. Hal ini memberi kami kemampuan untuk memasukkan layanan peta aset di mana pun kami memerlukannya untuk menyelesaikan aset kami.

Satu peringatan dengan solusi ini — asetMap.json akan di-cache di browser klien. Jika Anda dapat menghindari penyimpanan file tersebut di CDN dan/atau Anda dapat mengaturnya untuk menghindari caching (misalnya mengirim header tanpa cache), maka solusi ini mungkin cocok untuk Anda. Jika tidak, mari kita lihat, apa lagi yang bisa kita lakukan

Solusi #3

Sidik jari asetMap.json dan masukkan ke dalam aplikasi Anda.

Jika kami menggabungkan semua solusi sebelumnya dan sidik jari asetMap.json, kami akan mendapatkan hasil yang menjanjikan. Solusi yang telah selesai berakhir di addon ember — RuslanZavacky/ember-cli-ifa.

Addon menyediakan injeksi otomatis asetMap-HASH.json ke dalam aplikasi Anda. Ia juga menyediakan penginisialisasi, layanan, dan pembantu untuk mendapatkan referensi di aplikasi Anda ke aset sidik jari.

Cukup aktifkan di environment.js Anda sebagai

ifa: { enabled: true }

dan konfigurasikan blok sidik jari di ember-cli-build.js Anda

fingerprint: {
  enabled: EmberApp.env() === 'production',
  prepend: '', // can be a link to your CDN
  generateAssetMap: true,
  fingerprintAssetMap: true
},

Saya harap ini membantu dan semua masukan disambut dengan hangat!