Ember-cli-ifa
Inject fingerprinted assetMap.json file into your app and provide initializer, service, and helper to
dynamically reference fingerprinted assets.
Installation
ember install ember-cli-ifa
Configuration
Enable addon in environment.js
for specific environment.
module.exports = function(environment) {
var ENV = {
...
ifa: {
enabled: true
}
...
};
Configure fingerprinting in ember-cli-build.js
. Refer to the documentation of ember-cli for asset-compilation
fingerprint: {
enabled: true,
generateAssetMap: true,
fingerprintAssetMap: true
}
Usage
asset-map helper
If name
is tomster-under-construction
:
<img src={{asset-map (concat "assets/" name ".png")}} />
then it will generate something like assets/tomster-under-construction-da524c8bc9283f759ae640b68db81f24.png
base on assetMap.json.
asset-map service
import Component from 'ember-component';
import service from 'ember-service/inject';
export default Component.extend({
assetMap: service('asset-map'),
key: null,
image: computed('key', function() {
return this.get('assetMap').resolve(`assets/${this.get('key')}.png`);
})
});
Storing assets in a sub-directory
If prepend
option is added in fingerprint configuration block, it will be prepended into
generated asset path in the index.html.
var app = new EmberApp(defaults, {
fingerprint: {
prepend: '/blog/'
}
});
/blog
will be prepended to the assetMap file path in the index.html.