I'm trying to implement some cache busting on my angular application in a way that it will still allow caching but break it anytime we push new code to production. My setup so far involves using grunt cache-breaker https://www.npmjs.org/package/grunt-cache-breaker to dig through my concatenated angular app.js file and append query params to any string ending in a .html file extension. I also do this for any template files I have that are using an ng-include. One complication this creates is that now I need to first copy my template files to a dist/ directory so I can safely .gitignore the cache-busted versions and not have to commit all of my templates everytime the cache is busted (and create conflicts).
My question is not how to do this but more of a sanity check as to if this is a practical way of avoiding template caching on new code? I have seen examples of disabling template caching in angular but it seems like it is something I would want to use in between code pushes when files are not changing.
How do other navigate this issue?
I think a popular approach is to use something like ng-templates (with a grunt plugin) to generate a JS file that pre-caches all of your templates. Then use the usemin grunt workflow along with an asset versioning task to version the JS file.
Related
I have a project, I use both Django and Webpack for bundling and process assets. My goal is to make Webpack process all assets, e.g. optimize images. If image is used in js / css file there is no problem. Things are going complicated when I use img only in Django template.
Is there a way to 'inform' Webpack, that particular img is used, and update path for it in Django template after webpack process it?
Edit:
Maybe I need to clarify how build flow works. I have project with multiple 'static' sites. I use Webpack to bundle assets for specific one (due too entrypoints). All assets goes to my dist folder from I can easy collect them using properly configured {% static %} template tag. But those I implicit import in Django template file must be a name from entrypoint in case of js/css which is ok with me, cuz it is just couple of them per site (of course would be nice if those names could be hashed and Django would know about that) the thing I need most is to process images, for now I just use mentioned CopyWebpackPlugin to copy them all to dist folder from my src.. which is not elegant at all. Why? Because if I use same e.g. image.png in css and html I end up with [hash].png and copied image.png.
I wonder is there a way to e.g. hash names of images on webpack side and somehow inform Django about that image.png is now [hash].png
I'm just starting out with AngularJS (1.4.7) and hoping to produce a concise build output using Closure Compiler for a new application.
I'm successfully generating a single output file containing all my application's JavaScript preceded by each of the libraries on which it depends.
However, my application uses ngRoute and this is loading a controller and a partial html template for each route when visited. Each template is loaded as required so the first time a route is used there is a delay as the template downloads.
I'm used to working with RequireJS in which a template can be treated as a resource and bundled into the compiled build product, however I don't see a way to do this with Angular and Closure.
I assume this is a problem that has previously been addressed but I've had a very hard time finding relevant information via Google.
Is it possible to include partial templates in a build product, produced either with Closure Compiler or some other tool?
The best way to handle this is a two step process:
Use the r.js optimizer to order your dependencies and create a single JS file.
Use closure-compiler to compress the output file from r.js.
The require js optimizer is available as both a grunt and gulp plugin.
With gulp, you would simply pipe the requirejs output into a compilation task. For grunt, you'll need to set the optimize property to none and generate an intermediate file. The intermediate file will be your js input file for closure-compiler.
first time i call an url in angular application, the engine gets all templates (external files).I suppose it retrives them for caching. Is there a
method to avoid this, and call only the interested template?
thank you
The best way is to use a build tool such as Grunt or Gulp and automate your build process.
You can install a package that will load all your templates via a set path, convert them into angular template files and concattenate them into one file. Then your angular app will only have to load one file and they are loaded into memory straight away.
Grunt plugin: https://github.com/ericclemmons/grunt-angular-templates
Gulp plugin: https://github.com/miickel/gulp-angular-templatecache
If you don't want to use a build tool you can also embed the templates inline and refer to them via a unique I.D.
Example: Angularjs: Multiples partials in single html?
I need to versioning my javascript files and think the best way is to generate the sha1/md5 of each file and rename it with that result (and the reference to each js file too obviously) during the build process.
This way, when a file content changes, its name changes too and I have not to worry about versioning anymore.
I am trying to find some info about how to make this works with maven but I don't find anything related to.
Any help?
In a project we are working on we have a bunch of boilerplate code that gets copied to a number of projects. We are using GIT for version control.
Currently I am using a .bat file to copy boilerplate files, set the read-only attribute on each file and apply a comment header to .js, .html and .css files waring the user that this file was generated automatically and not bother editing it.
This is working ok but not foolproof. If the boilerplate code is refactored and items deleted client projects will still have the old file hanging around. Git does not remember windows attributes such as read-only.
Is there a better way of doing this to overcome these restrictions?
I'd recommend using a Git subdmodule for this. You can have a clone/checkout hook that will run your script to add file headers. It won't solve the read-only problem, but that can be circumvented anyway. You can then distribute any updates to your boilerplate by doing git submodule update.
The caveat with this method is that your boilerplate must reside in a single folder. You could copy it out with your script but this will cause more problems than it solves.