Ember-cli-ifa
Inject fingerprinted assetMap.json file into your app and provide initializer, service, and helper to
dynamically reference fingerprinted assets.
When to use this addon?
- If you have dynamic asset file names returned from API and/or you build paths based on several properties.
- If you can't put your asset filemames into css or to have path as static in your .js files.
- If you build your image/asset paths in a dynamic way, eg.
imagePath: computed(function() {
return this.get('assetMap').resolve(`${this.get('image')}.png`);
})
Installation
ember install ember-cli-ifa
Configuration
Enable addon in environment.js
for specific environment.
module.exports = function(environment) {
var ENV = {
...
ifa: {
enabled: true,
inline: false,
}
...
};
In case you use s3 and manifest module for ember-cli-deploy, update there configurations in config/deploy.js
to include json
as a valid file.
module.exports = function(environment) {
var ENV = {
...
s3: {
filePattern: function(context, pluginHelper) {
let filePattern = pluginHelper.readConfigDefault('filePattern');
return filePattern.replace('}', ',json}');
},
...
},
manifest: {
filePattern: function(context, pluginHelper) {
let filePattern = pluginHelper.readConfigDefault('filePattern');
return filePattern.replace('}', ',json}');
},
...
},
...
};
Configure fingerprinting in ember-cli-build.js
. Refer to the documentation of ember-cli for asset-compilation
fingerprint: {
enabled: true,
generateAssetMap: true,
fingerprintAssetMap: true
}
Note that if you use fastboot, this addon is automatically forced into inline: true
mode.
This is necessary, as otherwise fastboot could not easily access that data.
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.
inline option
If inline: true
is specified in config, contents of assetMap file will be inline into index.html.
This might save one request to assetMap.json, but will increase overall size of index.html
file, so use carefully.